PDA

View Full Version : Calling add() inside onRender in FormPanel



duskandawn
22 Feb 2011, 6:28 PM
Hello All,
Can someone please explain me why this is happening.
I went through the api and the source code but still cant figure this out.

So basically i have subclass of a FormPanel. Where i am trying to add some fieldsets dynamically to the panel.

So when i try to do this inside onRender function :



onRender : function(){
for ( var i = 0; i < this.fieldSetConfig.length; i++) {
this.add(this.fieldSetConfig[i]);
}
this.doLayout();
MyApp.form.Test.superclass.onRender.apply(this, arguments);
tplDetail.overwrite(this.acctbl.getEl(), myObj);
},


// fieldsetConfig is an array of fieldset objects :example
MyApp.FieldSets.AcctTable = {
xtype: 'container',
ref : 'acctbl',
id : 'AcctTable'
};



When i run the above code i see the error as :



el is null
Meaning this.acctbl.getEl() is still not rendered.


So i wanted to know is there a way cant I do the add() inside the onRender, or i need to specifically use the this.el - creatChild technique to manual add each fieldset ?


Also when i try the exact same case in the afterRender call, everything looks perfect.

So my question is why cannot i use the onRender(), since my parent div will already be created, all i am doing is adding children to it, and also do i need the doLayout there, wont onRender() take care of showing the added children ?

Please advise,
Thanks

duskandawn
23 Feb 2011, 5:31 AM
Hello All,
Can anyone please help shed some light on this.


Thanks for your time,

Condor
23 Feb 2011, 5:45 AM
Don't call doLayout() from onRender() (doLayout will be called automatically after doRender has finished).

duskandawn
23 Feb 2011, 6:07 AM
Hi Condor,
So i tried what you suggested below is the new code :



onRender : function(){
for ( var i = 0; i < this.fieldSetConfig.length; i++) {
this.add(this.fieldSetConfig[i]);
}
MyApp.form.Test.superclass.onRender.apply(this, arguments);
},


afterRender : function(){
MyApp.form.Test.superclass.afterRender.apply(this, arguments);
tplDetail.overwrite(this.acctbl.getEl(), myObj); // <---------
// Now if doLayout is called automatically, above line should work
},



I still get the error saying :

el is null.
el.innerHTML = this.applyTemplate(values);

Any ideas here ?

Condor
23 Feb 2011, 6:18 AM
afterRender will only call doLayout if the container is the top-most container.

Otherwise it will assume the top-most container will call doLayout after afterRender has finished.

Maybe you should use the afterlayout event (with single:true) instead.

duskandawn
23 Feb 2011, 6:31 AM
I am confused here, didnt you meantion :


Don't call doLayout() from onRender() (doLayout will be called automatically after doRender has finished).


So i assume by the time the code reached afterRender, dolayout is already called, and so i can do the getEl() call.

Also for afterLayout even, do i need to call doLayout for it to fire, or it will fire after onRender ?

Condor
23 Feb 2011, 6:36 AM
So i assume by the time the code reached afterRender, dolayout is already called, and so i can do the getEl() call.

No. Container.afterRender will call doLayout, but only if it is the top-most container. If it isn't, it assumes that the top-most container will call doLayout after the afterRender of this container has finised.


Also for afterLayout even, do i need to call doLayout for it to fire, or it will fire after onRender ?

Your top-most container will call doLayout after rendering, so you won't have to call that yourself.

duskandawn
23 Feb 2011, 6:53 AM
Hi Condor,
So i made the changes they look like :



listeners: {
afterlayout: function(){ tplDetail.overwrite(this.acctbl.getEl(), myObj);},
single : true
},

onRender : function(){
MyApp.form.Test.superclass.onRender.apply(this, arguments);
for ( var i = 0; i < this.fieldSetConfig.length; i++) {
this.add(this.fieldSetConfig[i]);
}
},



Everything looking good now.

Thanks a lot for your help, i understand it better now.