Ext.grd.Grid out from Example.init can't be created

[zafiro]

I used the complex layout example as a base for my program. I created a grid inside a NestedLayoutContainer at the west region. However, the code became so big that I tried to move the definitions of the panels out from init (and still inside Example).



var Example = function(){
var layout;
var refPags=false;
var refAreas=false;
var Sitios = function(){
var ds = new Ext.data.Store({ ... });
ds.load();
var colModel = new Ext.grid.ColumnModel([...]);
var grid_sites = new Ext.grid.Grid('grid-sitios', {ds: ds, cm: colModel});


And it breaks when trying to create the grid.

Firebug shows:
this.container has no properties
Ext.grid.Grid=function(_1,_2){this.container=Ext.get(_1);this.container.update("...

However, if I move 'Sitios' definition inside of init, there is no problem. I suppose
Ext.EventManager.onDocumentReady(Example.init, Example, true); is setting something in the scope that the grid uses... in it gets set only for Example.init What is it? What does the grid require?

[zafiro]

Wait... or is it because of the moment when it gets executed?

[zafiro]

/:) yes it is.

Wao, it seems it helped to write it. The solution is to declare the funtion out, but invoque it inside init.

[hutboy]

I have the same problem with you. Thanks a lot.

[zafiro]

I have the same problem with you. Thanks a lot.

I am sorry, I didn't read your message. I'll paste the answer anyway, just in case somebody else reads this.

Original:



var Example = function(){
var layout;
var refPags=false;
var refAreas=false;
var Sitios = function(){
var ds = new Ext.data.Store({ ... });
ds.load();
var colModel = new Ext.grid.ColumnModel([...]);
var grid_sites = new Ext.grid.Grid('grid-sitios', {ds: ds, cm: colModel});
}();


Solution:


var Example = function(){
var layout;
var refPags=false;
var refAreas=false;
var Sitios = function(){
var ds = new Ext.data.Store({ ... });
ds.load();
var colModel = new Ext.grid.ColumnModel([...]);
var grid_sites = new Ext.grid.Grid('grid-sitios', {ds: ds, cm: colModel});
}
return {
init : function(){
Sitios = Sitios();
...
}
}
}


The problem was that the div 'grid-sitios' does not exist before the document is ready, so the function that creates it must be invoqued latter.