Best way to add components to container dynamically

[sjmittal]

Hi,
I have a requirement when panels are constructed dynamically from the json returned via ajax calls.
The container may contain nested containers (each having different layout) and components are added inside these.

Example:
I have a panel.
In that there are 15 nested containers each added by looping through the json object.
Each container then may contain 4 nested containers.
Finally the inner most container has components added to it.

So I wanted to know whats the most optimal way to construct such structure dynamically,

Currently I loop through the json object and create one big config object with the above structure. Each sub config in that config object has its own xtype.

Then finally to top level container I simply do
container.add(bigConfigObject)
and lastly I do
container.doLayout()
to get the new layout reflected in the browser.

It works fine, however it takes say around 2 seconds to render the whole.

I was wondering if there is a better way to do whole thing in order to improve performance.

Would it be better create ExtJs objects directly and add then to container instead of using xtype lazy instantiation.

Is there any way to avoid doLayout to whole top level container, because that's the part that takes most time as whole layout has many sub containers.

Please let me know if there are any best practices to follow here in order to get complex layouts created and rendered dynamically most optimally.

Thanks
Sachin

[Animal]

The principle is

myContainer.add(myNewComponent);

Simple as that.

And when you have finished adding (you can add many new Components), you tell the Container to use the layout manager that you configured it with to ensure that all child items are rendered and layed out properly:

myContainer.doLayout();

Reading your description, I would advise you to think hard about your nesting strategy and not nest any deeper than you need for performance reasons.

[sjmittal]

Hi,
Thanks for the quick response.
I am doing exactly like you have suggested.

I have one query here:
which is faster:

container.add({
     xtype: 'xyz',
     // inner config
     items: [{//inner items config ...}, {}]
});

or

innerContainer =  container.add({
     xtype: 'xyz',
    //inner config
});
innerContainer.add({
   xtype: 'abc',
   //inner items config
});

or

innerContainer = container.add(new XYZ({
    //inner config
});
innerContainer.add(new ABC({
   //inner items config
});

I am taking a note on your comment about limiting the nesting of containers.

Further query is, based on your experience do you feel some layout rendering is faster than others.
Like the arrangement I can get using column layout can also be achieved using say table or hbox or vbox layouts.

What layout would you recommend if components are to be placed in some order, vertical or horizontal inside any container?

Thanks
Sachin