PDA

View Full Version : Initialize component after AJAX call



nagarajan.bose
23 Nov 2010, 7:58 AM
Hi,
I have a situation where I need to apply and initialize my superClass after completion of AJAX request. However if I move the Ext.apply and initComponent.apply inside "success" it is not working. If I place it outside it is not waiting for the AJAX request to complete, which is expected behavior.

Please advise me on how to handle this situation.



...
...
initComponent : function() {
Ext.Ajax.request({
url : this.utpUrl,
success : function(response) {
this.sapData = new Ext.Template(response.responseText);
this.sapData.compile();
}
});

Ext.apply(this, {
items: this.utpItems,
sapData:this.sapData
});
UTP.sap.SapPage.superclass.initComponent.apply(this, arguments);
}


Thanks in advance.

Regards,
Nagaraj

Condor
23 Nov 2010, 8:04 AM
You obviously can't do that due to the ansynchronous behaviour of requests.

You will have to move the Ext.Ajax.request outside of the component and only create the component when the response is received.

Another method would be rewriting your component so the response data won't be needed in initComponent and the component can function without it until the response is received.

nagarajan.bose
23 Nov 2010, 8:14 AM
Thanks Condor. If you can refer to any relevant post or a small example it will be helpful or even a small skeleton structure will do.

darthwes
23 Nov 2010, 9:45 AM
Sure.



Ext.onReady(function() {
Ext.Ajax.request({
...
success: function(resp) {
var cfg = {...};
var mySpecialCmp = new CustomSpecialCmp(cfg);
}
});


or



...
initComponent: function () {
Ext.Ajax.request({
url: this.utpUrl,
success: this.handleResponse,
scope: this
});
UTP.sap.SapPage.superclass.initComponent.apply(this, arguments);
},
handleResponse: function(response) {
//build tCfg from response
var tCfg = {
sapData: new Ext.Template(response.responseText)
};
tCfg.sapData.compile();
this.add(new CustomObj(tCfg));
}