Thanks Mindplay!
I modified it some so that it can be used to load ext components (dynamically generated if you like) on the fly.
JSLoader.js
Code:
Ext.ux.JSLoader = function(options) {
Ext.ux.JSLoader.scripts[++Ext.ux.JSLoader.index] = {
url: options.url,
success: true,
jsLoadObj: null,
options: options,
onLoad: options.onLoad || Ext.emptyFn,
onError: options.onError || Ext.ux.JSLoader.stdError
};
Ext.Ajax.request({
url: options.url,
params: options.params,
scriptIndex: Ext.ux.JSLoader.index,
success: function(response, options) {
var script = Ext.ux.JSLoader.scripts[options.scriptIndex];
try {
script.jsLoadObj = Ext.decode(response.responseText);
Ext.applyIf(script.jsLoadObj,{jsLoad: function(){return Ext.ComponentMgr.create(script.jsLoadObj);}});
var comp = script.jsLoadObj.jsLoad();
if (comp.remoteInit){
comp.remoteInit();
}
} catch(e) {
script.success = false;
script.onError(script.options, e);
}
if (script.success) script.onLoad(comp,script.options);
},
failure: function(response, options) {
var script = Ext.ux.JSLoader.scripts[options.scriptIndex];
script.success = false;
script.onError(script.options, response.status);
}
});
}
Ext.ux.JSLoader.index = 0;
Ext.ux.JSLoader.scripts = [];
Ext.ux.JSLoader.stdError = function(options, e) {
// throw(e);
window.alert('Error loading script:\n\n' + options.url + '\n\nstatus: ' + e);
}
example usage
Code:
new Ext.ux.JSLoader({
url: 'dynamic_comp.cfm', //You can generate components dynamically, I use ColdFusion
params: {foo: 'bar'},
//put anything else you will want to pass to the onLoad function here like
closable: 1,
onLoad:function(comp, options){
//your component will be delivered here
//do what you want with it like at it as a tab to a tabpanel
getMainPanel().add({
title: 'New Tab'
closable: options.closable, //the options contain everything that was defined in your JSLoader config
border: false,
layout: 'fit',
items: [comp]
}).show();
getMainPanel().doLayout();
}
});
There are two was to return the components. One using the lasy render with xtype or the other is generating the components by using new and returning it. I will show both ways
First Way
dynamic_comp.cfm xtype Way
Code:
{
xtype: 'panel',
layout: 'column',
title:'Dashboard',
layoutConfig: {
// The total column count must be specified here
columns: 1
},
//This is not required but if it is defined, it will be called by the JSLoader in the scope of this panel
remoteInit: function(){
this.title = 'Im Alive';
}
}
This is easy enough.
Second Way
Return an object with the defined function jsLoad() and return the component.
JSLoader will call the jsLoad function if it exists and pass the component you return to the onLoad method you defined in the JSLoader config
dynamic_comp.cfm Function Way
Code:
{
jsLoad: function(){
var subPanel = new Ext.Panel({
title: 'Sub Panel'
})
var thePanel = new Ext.Panel({
title: 'Panel 1',
items: [subPanel]
})
return thePanel;
}
}
Hope this helps someone.
ext.ux.JSLoader - load JavaScript on demand
.I want to know your opinions
