Loading application modules at runtime

Posted in xn--kfs74mzzid01b.com edit by mike on January 7th, 2009

:-? Hi
I'm building a very big application. Now i want to divide it in small javascript files.
I want to load the javascript at runtime, only when is needed.
There is a way using Ajax?
Any example or previous post?

Thanks Mauro

This is only the example how to create it.
In any case once you create it, if you dont destroy it, you can always get it using Ext.getCmp('object-id'), no need to cache anything
:)

I think i got it.
I save in a file the constructor parameters

{
id : "window-test",
title : "Test",
width:400,
buttons : [
{text:"Salva" , handler:function() { Ext.getCmp("window-test").hide() }},
{text:"Chiudi" , handler:function() { Ext.getCmp("window-test").hide() }}
],

items : [
{title:'Panel' , height:70 , border:false , frame:true , html:'

Elettronica C-Lux

'},

new Ext.grid.GridPanel({
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]),
data: {}
}),
cm: new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
width:600,
height:300,
title:'Grid with Numbered Rows and Force Fit',
iconCls:'icon-grid'
}) ,

new Ext.FormPanel({
iconCls:'icon-search',
id:'schede-search-panel',
formId:'schede-search-form',
labelWidth : 65,
frame:true,
defaultType: 'textfield',
border:false,
items :[
{ fieldLabel: 'Cimitero', name: 'vc__IDCIMITERO' , width:55},
{ fieldLabel:"N�Scheda" , name : 'in__NSCHEDA' , width:55 },
{ fieldLabel:"Pagante" , name : 'vc__COGNOMENOM' , width:133 },
{ fieldLabel:"Defunto" , name : 'vc__DEFUNTO' , width:133 },
{ fieldLabel:"Posizione" , name : 'vc__POSIZIONE' , width:133 }
],

buttons: [
{ text: 'Nuova Ricerca', handler : function(){
var thisForm = Ext.getCmp("schede-search-panel").form ;
var fieldIdCimitero = thisForm.findField("vc__IDCIMITERO");
var fieldIdCimiteroValue = fieldIdCimitero.getValue();

thisForm.reset();

fieldIdCimitero.setValue( fieldIdCimiteroValue );
}
},
{ text: 'Trova' , handler : function(){
var gridPanel = Ext.getCmp("schede-grid") ;
var thisStore = gridPanel.store ;
var thisForm = Ext.getCmp("schede-search-panel").form ;
var values = thisForm.getValues(false) ;

for(val in values) thisStore.baseParams[val] = values[val];
thisStore.baseParams["action"] ='list' ;

thisStore.load( pagedGridLoadParameters );
}
}
]
})

]

}

and i create the component using Ext.ajax.

Ext.Ajax.request({
url : 'loader.php' ,
success: function ( resp, opt ) {
eval( "new Ext.Window (" + resp.responseText + ").show()" ) ;
},
failure: function ( resp, opt ) { }
});

As you can see in this example I create a form a panel and a grid.

:D:D:D:D

Wouldn't this be a bad thing? Would caching work on this? Otherwise if you have a fairly large class, would it have to load it each time?

I- I forgot sorry ... thank you again

The application is very big : 1.023 tables 1320 forms and 467 users divided in 23 groups. But every group uses only a part of the application. I use some tables to configure this groups (enabled forms, fields and actions).

(the software is for an italian Public administration)

Jack, this model of the application with loading modules, there is a sense to use Google Gears WorkerPool for performance ajax queries on background? For example for periodic updating the table of the rights of the started application?

my idea was something like this (to show a window)

var codeLoader = new Ext.data.HttpProxy({ url: "loader.php" }) ;
var codeReader = new Ext.data.JsonReader( );

codeLoader.load(
{id:'window-test'} ,
codeReader,
function(){
new Ext.Window( codeReader.jsonData.component ).show();
}
)

the component server side

{
component : {
id : "window-test",
title : "Test",
width:300,
height:300,
buttons : [
{text:"Salva" , handler:function() { Ext.getCmp("window-test").hide() }},
{text:"Chiudi" , handler:function() { Ext.getCmp("window-test").hide() }}
],

items : [
new Ext.FormPanel({
frame:true,
border:false,
id:"schede-panel",
formId:"schede-form",
margins : "20 20 20 20" ,
labelWidth : 90,
items :[

new Ext.form.NumberField ({ fieldLabel:"N�Scheda" , name : "NSCHEDA" , width:55 }),
new Ext.form.TextField ({ fieldLabel:"Pagante" , name : "COGNOMENOM" , width:380 }),
new Ext.form.TextArea ({ fieldLabel:"Posizione" , name : "POSIZIONE" , width:380 })
]
})

]

}
}

it works if i dont define the FormPanel

But if you want to cache it this is the code

Ext.Ajax.request({
url : 'loader.php' ,
success: function ( resp, opt ) {
eval( "var newWind = new Ext.Window (" + resp.responseText + ").show()" ) ;
},
failure: function ( resp, opt ) { }
});

Probably jack and all the craw, with 2.0 is trying to define every object through metadata in json format and not with xml. (My previous example is not perfect because i did not use only metadata but if you want you can do it).

Jack am I right?

Ciao to everybody :D

In the my work I have come to conclusion, that is better way is one big skeleton of the application, which loaded once with main HTML page. This skeleton define all GUIs and logic. Skeleton can be splittes in many js files, and a little, I use OOP paradigm. That nothing differs from a variant with loading separate parts.

All initial values putted in main HTML page as js arrays and hashes. And in the further can be changed through ajax transport.

During work application will load small html and scripts by ajax. This scripts contain one-two instructions for crteating and manipulating objects certain in a skeleton and define divs and id. But this with 1.1, with 2.0 excellent new model of work which as it seems to me, is self-sufficient and allows to do without loading of additional files.

Hi,
But how I can placed this window to Desktop status bar?

Loader function:
function loader() {

Ext.Ajax.request({
url : 'add.php' ,
success: function ( resp, opt ) {
eval(resp.responseText);
},
failure: function ( resp, opt ) { }
});

}

Add.php:
var desktop = Ext.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'sfd',
items:
...
});
}
win.show();

But "var desktop = Ext.app.getDesktop();" is not defined.

Ok, I do that:
windows.js
Example = new Ext.app.App({
init : function(){
Ext.QuickTips.init();
},

getModules : function(){
return [
//new Example.GridWindow(),
new Example.ModulesMenu(),
new Example.UtilitesMenu(),
new Example.SettingsMenu(),
new Example.HelpMenu()
];
}

});

Example.loadItems = Ext.extend(Ext.app.Module, {

loadModules : function(file) {

var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');

if(!win) {

Ext.Ajax.request({
url : file.url,
success: function ( resp, opt ) {
eval("win = desktop.createWindow({" + resp.responseText + "}); win.show();");
},
failure: function ( resp, opt ) { }
});

}

}

});

Example.SettingsMenu = Ext.extend(Example.loadItems, {
init : function(){
this.launcher = {
text: 'Настройки',
iconCls:'pref',
menu : {
items:[{
text: 'Раздел 1 (Грид)',
iconCls:'bogus',
handler : this.createWindow,
scope: this
},{
text: 'Раздел 2 (Подгрузка)',
iconCls:'bogus',
handler : this.loadModules.createDelegate(this, [{url:'add.php'}]),
scope: this
},{
text: 'Раздел 3 (Форма)',
iconCls:'bogus',
handler : this.createWindow,
scope: this
}]
}
}
}
});

add.php
id: 'grid-win',
title:'sfd',
width:740,
height:480,
//x:10,
//y:10,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),

viewConfig: {
forceFit:true
},
//autoExpandColumn:'company',

tbar:[{
text:'Добавить новость',
tooltip:'Добавление новости',
iconCls:'add'
}, '-', {
text:'Редактировать новость',
tooltip:'Редактирование новости',
iconCls:'option'
},'-',{
text:'Удалить новость',
tooltip:'Удаление новости',
iconCls:'remove'
}]
})

Personally I don't see any benefit to doing it. In fact, I strongly believe it would have a negative impact on performance. However, there have been several threads were people have discussed their method of doing it. If you can't find them, this search (http://google.com/coop/cse?cx=011693920879787039234%3Az7of1ufqccu) may help you find results a little better.

It's possible and not a bad idea. It's not something we can bundle into Ext though because we can't introduce any dependencies on 3rd party plugins like google gears.

I did it

{
component : {
id : "window-test",
title : "Test",
width:300,
height:300,
buttons : [
{text:"Salva" , handler:function() { Ext.getCmp("window-test").hide() }},
{text:"Chiudi" , handler:function() { Ext.getCmp("window-test").hide() }}
],

items : [
new Ext.FormPanel({
iconCls:'icon-search',
title: 'Ricerca',
collapsible:true,
id:'schede-search-panel',
formId:'schede-search-form',
labelWidth : 65,
frame:true,
defaultType: 'textfield',

items :[
{ fieldLabel:"N�Scheda" , name : 'in__NSCHEDA' , width:55 },
{ fieldLabel:"Pagante" , name : 'vc__COGNOMENOM' , width:133 },
{ fieldLabel:"Posizione" , name : 'vc__POSIZIONE' , width:133 }
],

buttons: [
{ text: 'Nuova Ricerca', handler : function(){
........
}
},
{ text: 'Trova' , handler : function(){
.........
}
}
]
})

]

}
}

i hope it can give some ideas

#If you have any other info about this subject , Please add it free.#

Loading application modules at runtime

Elettronica C-Lux

Archives

Meta