code for Ext.getCmpWaitFor

[jerrybrown5]

Here is a helpful function that I created to get a component that may not be rendered or even created yet.



Ext.getCmpWaitFor=function(id, funcRun, scope, taskConfig){

var task={
run : function(){
var component=Ext.getCmp(id);
if(component){
funcRun.call(scope || this || window, component);
return false;
}
},
interval: 100
};

if (taskConfig) { Ext.apply(task, taskConfig) }

if (!(task.run()===false)){
if (!task.duration && !task.repeat ){task.repeat=3}
Ext.TaskMgr.start(task);
}

}
Here is an simple example of how to use it, but you could also pass in the taskConfig object to have greater control over how often it will check for the element.



Ext.getCmpWaitFor('centerRegionVariables',function(centerRegionVariables){
centerRegionVariables.add({html:'Test'});
centerRegionVariables.doLayout();
})

[evant]

Thanks for the post.

Just curious, what advantage does this have over subscribing to the render event?

[jerrybrown5]

The purpose of this is to modify an element without having to worry whether that element even exists yet--the render event is not available on items that have not yet been created. An example use case: you are inside the render event of a form or other container and you need access to uncreated child elements and (for code cleanliness) don't want to move this code somewhere else. For me I use this function often because I have events on records that interact with form elements that may not have been constructed yet.

[fangzhouxing]

jerrybrown5,thank you very much for sharing this great code.

I have improve it as follows(When funcStopWaiting return true, it stop waiting and run funcRun):



Ext.ns('divo')
divo.waitFor = function(funcStopWaiting, funcRun, scope, taskConfig){
var task = {
run : function(){
if(funcStopWaiting.call()){
funcRun.call(scope || this)
return false
}
},
interval: 100
};

if (taskConfig) { Ext.apply(task, taskConfig) }

if (!(task.run()===false)){
if (!task.duration && !task.repeat ){task.repeat=300}
Ext.TaskMgr.start(task);
}
}


This method is very useful to deal with the lack of real 'afterRender' event.

Usage example:


divo.home.TopBarPanel = Ext.extend(Ext.Panel, {
id : "j-top-bar-panel",
ctx : null,
menuItems : [],
initComponent : function() {
Ext.apply(this, {
border : false,
items : [this.createTopBarView()]
})
divo.waitFor(this.addHandlerStopWait,this.addHandler,this) //<--- here
divo.home.TopBarPanel.superclass.initComponent.call(this)
},
// private
showMainMenu : function() {
this.publish("j.showMenuNavigator")
},
// private
showShortcutMenu : function(e) {
...
},
// private
createTopBarView : function() {
this.store = new Ext.data.JsonStore({
url : '/menus/bar/' + divo.getUserId(),
root : 'rows',
fields : ['text', 'id']
});
this.store.load();

var tpl = new Ext.XTemplate(
'<img src="media/images/divo/main-menu.gif" id="nav-main-menu"/>',
'<img src="media/images/divo/shortcut-menu.gif" id="nav-shortcut-menu"/>',
'<div id="top-bar-menu">',
'<tpl for=".">',
' <span class="top-bar-menu-item common-text" id="top-bar-menu-item-{id}">{text}</span>',
' <img src="media/images/divo/vline.gif"/>', '</tpl>',
'</div>');

this.view = new Ext.DataView({
store : this.store,
tpl : tpl,
singleSelect : true,
overClass : 'x-view-over',
itemSelector : 'span.top-bar-menu-item',
listeners : {
'click' : {
fn : function(dv, index, node, e) {
var r = dv.store.getAt(index);
alert(r.get('text'));
},
scope : this
}
}
})
return this.view
},
//<--- here
addHandlerStopWait : function() {
return Ext.get('nav-main-menu')?true:false
},
//<--- here
addHandler : function() {
Ext.get('nav-main-menu').on('click', this.showMainMenu.createDelegate(this))
Ext.get('nav-shortcut-menu').on('click',this.showShortcutMenu.createDelegate(this))
}
});

Ext.reg("j.panel.TopBarPanel", divo.home.TopBarPanel);
// EOP

[fangzhouxing]

I have aborted the use of 'divo.waitFor' now. This code can replace the use of it.


afterRender : function() {
divo.panel.ClickActionWithFocusPanel.superclass.afterRender.call(this)
this.renderOther.defer(100,this) <--- wait for all rendered really
},
renderOther : function() {
.....
}