PDA

View Full Version : Dynamically loaded panels



pwrs
3 Feb 2010, 5:24 AM
Hi,

I am using border layout with accordion in the left panel, and main content panel in the center. I would like to load different views/pages/ascx (I'm using ASP.NET MVC 1.0) in that center panel depending on what element gets clicked in the accordion. Now my solution works, but i load all js files that contains center panel body and do:



//AppContent is container within center panel
AppContent.removeAll();
AppContent.add(myUIObject);
AppContent.doLayout();


All UI js files contains variables with visual components that are going to load. Tha main disadvantage is that all the scripts are loaded with the main page. My appplication is going to have tens of such js files, so loading all at the begining is great waste of time and is not very efficient.

Is there any way to load the js files dynamically from server and inject it to center panel on demand? I found a solution that uses eval to evaluate js code received from ajax request, but I find it not very neat and elegant.

Any clues will be very appreciated, I'm the very new user of ExtJs
Regards

Drayton
3 Feb 2010, 5:39 AM
eval() is afaik your only choice when post-loading js.

Another approach would be to specify the different panels as lazy config objects, serve them on request as json and simply load the json decoded object with add()

pwrs
3 Feb 2010, 6:14 AM
Could you please write a bit more about the solution with lazy config objects?

Regards

Drayton
3 Feb 2010, 6:53 AM
Ok, here's a simple example:

JSON encoded ext component config in dyntest1.js:

{"xtype":"panel","title":"Post loaded panel 1","html":"Hello, Im a dynamically loaded panel"}JSON encoded ext component config in dyntest2.js:

{"xtype":"panel","title":"Post loaded panel 2","html":"Hello, Im another dynamically loaded panel"}Now a simple window that can load these panel definitions dynamically:

new Ext.Window({
id: 'myWindow',
title: 'Test',
width: 400,
height: 400,
closable: true,
buttons: [{
text: 'Load panel 1',
handler: function(b,e){
Ext.Ajax.request({
url: 'dyntest1.js',
success: function(res,opt){
var cmp = Ext.util.JSON.decode(res.responseText);
var w = Ext.getCmp('myWindow');
w.removeAll();
w.add(cmp);
w.doLayout();
}
});
}
},{
text: 'Load panel 2',
handler: function(b,e){
Ext.Ajax.request({
url: 'dyntest2.js',
success: function(res,opt){
var cmp = Ext.util.JSON.decode(res.responseText);
var w = Ext.getCmp('myWindow');
w.removeAll();
w.add(cmp);
w.doLayout();
}
});
}
}]
}).show();