[Ext3]Defer Container events until the kids are rendered

[hendricd]

It's been an annoyance in the past (especially with Forms). For a sure-fire way of waiting for all the child items to render before the parent container fires its render event (without relying on its frequently-fired 'afterlayout' event):

This is a simple Border Layout Window, but the same methodology can be applied to any Container:


var W = new Ext.Window({
layout: 'border',
hidden : true,
renderHidden : true,
width : 500,
height : 500,
onAdd : function(eachChild){
this.eventsSuspended || this.suspendEvents(true); //queue them up!
},
items : [
{ region : 'center', html : 'Center Region' },
{ region : 'west', html : 'West Region' },
{ region : 'east', html : 'East Region' },
{ region : 'south',
html : 'South Region' ,
listeners : {
render : function(){
this.ownerCt.resumeEvents(); //wake up the Window again(firing its queued events)
}
}
}],

listeners : {
render : function(w){
this.show(); //show the Window when all the kids are rendered.
}
}
});
W.render(Ext.getBody());
But, the neat thing about this is that you can resumeEvents of the parent container at any time (eg. store or Form load callback/listener, whatever.. ).

Go nuts. ;)