PDA

View Full Version : When to lazy load support data in component lifecycle



harirama
17 Jul 2009, 2:13 PM
Hi all,

I have created a number of components that take config paramaters, but require addtional information from the server before they are rendered and used in the browser.

Up until now, I preload this information at the first page load so it's available for these components. This is not ideal as it eliminates some of the advantage of lazy loading.

My question is, what is the best design pattern, from an extjs perspective to load this data in the component life cycle.

The small snipit below is what I am thinking


Ext.ux.MyClass = Ext.extend(Ext.Panel,{

initComponent: function(){
Ext.Ajax.request ( {url: ...,
params: {...},
callback: function(o,s,r) {
.. test and decode some JSON data and apply to component
Ext.ux.MyClass.superclass.initComponent.call(this);

},
scope: this});
}
});



But will this asynchronous completion of the initComponent function cause a big problem in the rest of the cycle?

What is the best way to accomplish this?

Lukman
17 Jul 2009, 7:10 PM
I think the function call ofExt.ux.MyClass.superclass.initComponent.call(this) should be synchronous within Ext.ux.MyClass.initComponent() since the component has to be fully initialized when initComponent exits.

Maybe you could pull out the Ajax part and put it into a 'loader' object which will instantiate MyClass using the config that it fetches from server.

danh2000
17 Jul 2009, 7:27 PM
I'd probably do this:


Ext.ux.MyClass = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.ux.MyClass.superclass.initComponent.call(this);
Ext.Ajax.request ( {url: ...,
params: {...},
callback: this.remoteInitComponent,
scope: this}
);
},
remoteInitComponent: function(o,s,r) {
//continue init with the remote info
}
});

harirama
21 Jul 2009, 7:54 AM
Thanks,

You are correct about returning from both the initComponent and Render functions synchronously.

I need this capability for both panels as well as form components.

What I am doing is rendering panel based components with no items, and putting in a loading mask, then running a callback to get data then initiate the items and do another layout.

I haven't figured out an ideal way to do the form based ones yet. I may just render a loading mask and then render the real thing after the init.

Thanks for the help.