Aug 12, 2012, 2:25 PM
[CLOSED] MVC Custom Control using Builder framework - Loader problem
Hi,
This question/problem builds on from this thread where Vladimir showed how a custom Ext.NET component can be exposed in MVC Razor using a class that implements IHtmlString: http://forums.ext.net/showthread.php...as-MVC-Helpers
The previous post is really handy but I wanted to go a step further. In the previous post I can do something like this with Razor:
So I gave it a go (using a custom window example). From an intellisense perspective, it worked, and I could do something like this:
Some code to reproduce:
1) CustomWindow class (C#)
4) Example of it being successfully used in WebForms:
a) Adding Builder support to Custom Window:
However, if I browse the above template (assuming controller for it is created!) Firebug reports the following:
"Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: MyApp.CustomWindow"
When I look at the source code, indeed, the custom resource is not loaded (though it is if I use the WebForms approach -- or ControlRender approach as per the previous thread I mention at the top of this one).
Even if I add ResourceManager.RegisterControlResources<Custom Window>(); into the builder factory methods it still doesn't help.
Any thoughts? I've probably missed something when looking at your source code...
(Second question, I found I had to set the ID of the custom window - see where I used Guid.NewGuid(). If I didn't do that I got a different error saying Widget needs an ID. I couldn't see in your code how you addressed that without my "hack". Any insight into that would also be appreciated!)
This question/problem builds on from this thread where Vladimir showed how a custom Ext.NET component can be exposed in MVC Razor using a class that implements IHtmlString: http://forums.ext.net/showthread.php...as-MVC-Helpers
The previous post is really handy but I wanted to go a step further. In the previous post I can do something like this with Razor:
@Html.FinancialGrid(400, 500);
But what I wanted to see if I could do is inherit/borrow from Ext.NET's own MVC framework so that I can get all the other properties/methods in Razor (e.g. .SetHeight(100).SetWidth(100).SetTitle("blah") etc)So I gave it a go (using a custom window example). From an intellisense perspective, it worked, and I could do something like this:
@Html.MyApp().CustomWindow().SetHeight(100).SetWidth(150)
However, at run time it had an error saying the Loader could not load the corresponding JavaScript class, MyApp.CustomWindow.Some code to reproduce:
1) CustomWindow class (C#)
public partial class CustomWindow : Window
{
internal const string JsResource = "Ext.Net2.Tests.CustomCode.CustomWindow.CustomWindow.js";
public override string InstanceOf
{
get { return "MyApp.CustomWindow"; }
}
public override string XType
{
get { return "customwindow"; }
}
protected override List<ResourceItem> Resources
{
get
{
List<ResourceItem> baseList = base.Resources;
baseList.Capacity += 1;
baseList.Add(new ClientScriptItem(typeof(CustomWindow), JsResource, ""));
return baseList;
}
}
protected override void OnInit(EventArgs e)
{
Title = "My window";
Layout = "fit";
Border = false;
Items.Add(new Panel { Html = "Example" });
base.OnInit(e);
}
}
2) CustomWindow class (JavaScript)Ext.define('MyApp.CustomWindow', {
extend: 'Ext.window.Window',
alias: 'customwindow'
});
3) JavaScript file is embedded into assembly4) Example of it being successfully used in WebForms:
<cc1:CustomWindow runat="server" Height="100" Width="150" />
5) My attempt to build MVC support using your builder frameworka) Adding Builder support to Custom Window:
public partial class CustomWindow
{
public CustomWindow()
{
}
public CustomWindow(Config config)
{
Apply(config);
}
public Builder ToBuilder()
{
return new BuilderFactory().CustomWindow(this);
}
public class Builder : Builder<CustomWindow, Builder>
{
public Builder() : base(new CustomWindow()) { }
public Builder(CustomWindow component) : base(component) { }
public Builder(Config config) : base(new CustomWindow(config)) { }
}
new public class Config : Window.Config
{
public static implicit operator Builder(Config config)
{
return new Builder(config);
}
}
}
b) Adding a builder factory:public partial class BuilderFactory
{
public HtmlHelper HtmlHelper { get; set; }
}
public partial class BuilderFactory
{
public CustomWindow.Builder CustomWindow()
{
return CustomWindow(new CustomWindow
{
ID = Guid.NewGuid().ToString("N"),
ViewContext = HtmlHelper != null ? HtmlHelper.ViewContext : null
});
}
public CustomWindow.Builder CustomWindow(CustomWindow component)
{
component.ViewContext = HtmlHelper != null ? HtmlHelper.ViewContext : null;
return new CustomWindow.Builder(component);
}
}
c) Creating a MyApp() namespace for MVC similar to your X() namespace.public class MyApp
{
}
public static class MyAppExtensions
{
public static BuilderFactory MyApp(this HtmlHelper helper)
{
return new BuilderFactory { HtmlHelper = helper };
}
}
6) My Razor template:@using Ext.Net2.Tests.CustomCode.CustomWindow
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
@Html.X().ResourceManager().Theme(Theme.Gray)
@Html.MyApp().CustomWindow().SetHeight(100).SetWidth(150)
</body>
</html>
Inside visual studio, Intellisense correctly offers me SetHeight, SetWidth and all the other various methods available.However, if I browse the above template (assuming controller for it is created!) Firebug reports the following:
"Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: MyApp.CustomWindow"
When I look at the source code, indeed, the custom resource is not loaded (though it is if I use the WebForms approach -- or ControlRender approach as per the previous thread I mention at the top of this one).
Even if I add ResourceManager.RegisterControlResources<Custom Window>(); into the builder factory methods it still doesn't help.
Any thoughts? I've probably missed something when looking at your source code...
(Second question, I found I had to set the ID of the custom window - see where I used Guid.NewGuid(). If I didn't do that I got a different error saying Widget needs an ID. I couldn't see in your code how you addressed that without my "hack". Any insight into that would also be appreciated!)
Last edited by Daniil; Aug 14, 2012 at 7:30 AM.
Reason: [CLOSED]