Ext JS - Best Practice Tips

[gexxo]

Hello all.

I've spent the last couple of months getting my head round Ext JS and am blown away by it.

I'm in the middle of developing a huge application with it and am interested to see if anyone has any best-practice tips?

I'm thinking especially about the following things:

Minimising memory overheads (garbage-collection, DOM removal, component destruction etc.). How well does Ext JS garbage-collect on its own? Is there anything I should watch out for (especially when using the Window or JSONStore classes)?

The use of local variables when instantiating components as opposed to globals. I'm thinking in terms of the following examples:



MyNameSpace.buildThingyMethodOne = function(){
var panelOne = new Ext.Panel({id: 'panel-one', ...});
var panelTwo = new Ext.Panel({id: 'panel-two', ...});
var panelThree = new Ext.Panel({
id: 'panel-three',
items: [panelOne, PanelTwo],
...
});
};

MyNameSpace.buildThingyMethodTwo = function(){
MyNameSpace.PanelOne = new Ext.Panel({id: 'panel-one', ...});
MyNameSpace.PanelTwo = new Ext.Panel({id: 'panel-two', ...});
MyNameSpace.PanelThree = new Ext.Panel({
id: 'panel-three',
items: [MyNameSpace.PanelOne, MyNameSpace.PanelTwo],
...
});
};


I've found that the benefit of the second method (buildThingyMethodTwo) is that I can reference MyNameSpace.PanelOne and MyNameSpace.PanelTwo from anywhere in the Application without having to pluck them out of Ext using getCmp(). Is this better/faster/worse/slower? Or doesn't it make any difference?

I've got loads more questions around best-practice but I don't want to bore you all with my first post - I'll drop them in at a later point.

Thanks for any tips.

gexxo

[devnull]

Another option is to use private properties along with accessor methods:


MyNameSpace.buildThingyMethodOne = function(){
var panelOne = new Ext.Panel({id: 'panel-one', ...});
var panelTwo = new Ext.Panel({id: 'panel-two', ...});
var panelThree = new Ext.Panel({
id: 'panel-three',
items: [panelOne, PanelTwo],
...
});
return {
getPanelOne: function(){
return panelOne;
},
getPanelTwo: function(){
return panelTwo;
}
}
};

I am fairly new to OO languages, but this seems to be the pattern preferred by most OO languages that have real public/private namespaces (unlike javascript).