1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    45
    Vote Rating
    0
    just_a_kid is on a distinguished road

      0  

    Default TreeGrid Panel is very slow when no of nodes is large

    TreeGrid Panel is very slow when no of nodes is large


    Hi Guys,

    I have some performance issue when using TreeGrid rendering large data / tree node ( eg : > 1000 ).

    I create a solution as below to render n no of records at a time
    1. display 200 nodes at a time
    2. on 201 row show "show more link"
    3. once user click that , it will fire another call to server to fetch row 201-400.
    4. when the data returned. i loop through the record and add to the parent node of the tree node that is clicked as follow
    eg :
    Code:
            
             var parentNode = node.parentNode;       
             parentNode.beginUpdate();
            for(var i=0; i < jsonResponseArr.length ; i++){
                          var nodeAttr = jsonResponseArr[i];
                          var node = treeLoader.createNode(nodeAttr);
                          parentNode.appendChild(node);
            }
            parentNode.endUpdate();
            node.remove();
    I notice step no 4 taking 10-20 seconds to load the whole node ( max to 200 nodes per fetch ) and cause the browser to temporarily hangs.

    It seems to me that the treenode is generating too much DOM tree and causing the slowness.

    Any idea how to fix this ? can i spawn background thread to render n no of rows simultaneously ?
    I have tried using DelayedTask to process rendering 20 rows at a time but still when the function is executed it caused the browser to hang

    Thanks in advance

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This got me thinking if it would be a good ui to have a node (non leaf) for each page...

    /root
    --/node
    ----/page1
    ------leafs....
    ----/page2
    ------leafs....
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1