Mar 28, 2011, 9:17 AM
MVC, Drag-Drop & DirectMethods
Hi All,
I am sorry if the title is a bit confusing. :)
To cut the story short, I've been building application based on the Ext.NET MVC example. Everything was good. Then I had requirement in which I need to do drag-drop from the main GridPanel (iframe) to the TreePanel (master page). Since the GridPanel is inside Iframe, the drag-drop couldn't be done.
After searching internet for days, apparently this is a show-stopper (or does anyone manage to successfully implement drag-drop from GridPanel in iframe to the TreePanel in the masterpage?)
So now, I am started to rewrite one View page as a control and use DirectMethods to dynamically load it.
So in the Site.Master file I defined the DirectMethods as
I am sorry if the title is a bit confusing. :)
To cut the story short, I've been building application based on the Ext.NET MVC example. Everything was good. Then I had requirement in which I need to do drag-drop from the main GridPanel (iframe) to the TreePanel (master page). Since the GridPanel is inside Iframe, the drag-drop couldn't be done.
After searching internet for days, apparently this is a show-stopper (or does anyone manage to successfully implement drag-drop from GridPanel in iframe to the TreePanel in the masterpage?)
So now, I am started to rewrite one View page as a control and use DirectMethods to dynamically load it.
So in the Site.Master file I defined the DirectMethods as
<script runat="server">
[DirectMethod]
public void AddInboxTab(String ID)
{
var p = new Ext.Net.Panel { Title = "Inbox", ID = ID, Closable = true };
p.ContentControls.Add(this.Page.LoadControl("~/Views/Shared/Inbox.ascx"));
tpMain.Items.Add(p);
p.Render();
tpMain.SetActiveTab(p.ClientID);
}
</script>
Whenever user click one of the TreePanel's leaf, it will be handled by this procedure which is handled in separate .js fileaddTab: function(config) {
if (Ext.isEmpty(config.url, false)) {
return;
}
var tp = Ext.getCmp('tpMain');
var id = this.hashCode(config.url);
var tab = tp.getComponent(id);
if (!tab) {
if (config.title == 'Inbox') {
//Call direct method
//Ext.net.DirectMethod.request("AddInboxTab", Ext.applyIf(config || {}, { params: { ID: id }, control: "ctl00" }));
Ext.net.DirectMethods.AddInboxTab(id); // ERROR
}
else {
tab = tp.addTab({
id: id.toString(),
title: config.title,
iconCls: config.icon || 'icon-applicationdouble',
closable: config.closable == undefined ? true : config.closable,
autoscroll: config.autoscroll,
autoLoad: {
showMask: true,
url: config.url,
mode: 'iframe',
noCache: true,
maskMsg: "Loading ...",
scripts: true,
passParentSize: config.passParentSize
}
});
}
} else {
tp.setActiveTab(tab);
Ext.get(tab.tabEl).frame();
}
}
But Chrome's debugger is throwing exception. When I inspected the Ext.net.DirectMethods object, I couldn't find AddInboxTab there. What mistakes did I do?