Results 1 to 3 of 3

Thread: Best way to add components to container dynamically

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Mumbai
    Posts
    33

    Default Best way to add components to container dynamically

    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

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    The principle is

    Code:
    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:

    Code:
    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.

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Location
    Mumbai
    Posts
    33

    Default

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

    I have one query here:
    which is faster:
    Code:
    container.add({
         xtype: 'xyz',
         // inner config
         items: [{//inner items config ...}, {}]
    });
    or
    Code:
    innerContainer =  container.add({
         xtype: 'xyz',
        //inner config
    });
    innerContainer.add({
       xtype: 'abc',
       //inner items config
    });
    or
    Code:
    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

Similar Threads

  1. Dynamically add/remove components inside tab in TabPanel
    By golemsolutions in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 9 Jun 2010, 3:11 PM
  2. Dynamically add components to vbox
    By tomtom- in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 30 Dec 2009, 8:09 AM
  3. Add Dynamically Component to a Container
    By chaby in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 28 Aug 2009, 1:52 AM
  4. Add / Removing Components Dynamically
    By roflware in forum Ext 2.x: Help & Discussion
    Replies: 10
    Last Post: 29 Jun 2008, 12:05 AM
  5. Dynamically add components in ASP.NET contentpages
    By jonahcarneskog in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 30 Oct 2007, 11:35 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •