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

      0  

    Default How to improve performance of TreeNode.appendChild

    How to improve performance of TreeNode.appendChild


    Hi,

    I have a TreeNode which could have more than 1000 child nodes

    If i expand those treenode which have a lot of child nodes it becomes very slow

    I notice that this method is very slow
    TreeNode.appendChild

    I am thinking to rewrite this method to remove some unnecessary event or processing.

    Can anybody help me with that ?

    Thanks

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

      0  

    Default


    I found this tips somewhere in internet
    http://dev.opera.com/articles/view/e...script/?page=3

    that we should not modify the live dom tree

    So i created a dummy tree node to contain all my child
    Code:
    var rootNode; //parent of the child nodes
    var dummyNode = new TreeNode({id:"dummy});
    
    for(var r=0;r<response.length;r++){
          var node = response[r];
          node.parentNode = dummyNode;
          dummyNode.childNodes.push(node);
    }
    rootNode.appendChild(dummyNode);

    Above way works quite good in term of performance

    But there is one problem. i want to remove the dummyNode from tree and move all the childs nodes of this dummy nodes to one level up.

    What is the way to do it without performance hogging ?

    If i loop trhought the child nodes of the dummyNode and start adding it to the rootNode then it will be performance intensive.

    Thanks

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

      0  

    Default


    I have found the problem by using profiler in IE

    Inside TreeGridNodeUI.js renderElements
    Code:
    buf.push( '</tr><tr class="x-tree-node-ct"><td colspan="', cols.length, '">', '<table class="x-treegrid-node-ct-table" cellpadding="0" cellspacing="0" style="table-layout: fixed; display: none; width: ', t.innerCt.getWidth() ,'px;"><colgroup>');
    the t.innerCt.getWidth() is taking a lof time . i am not so sure what it does.

    The other issue is everytime after i expand the TreeNode , collapse it and expand again . the extjs does not go to the remote to pull data instead it pulls from the cache which is fine

    The only thing is a bit slow for those large tree node and i found this fxWrap ( took 953ms based on profiler ) is contributing to some of the slowness
    Code:
    fxWrap : function(pos, o, vis){ var dom = this.dom, wrap, wrapXY; if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){ if(o.fixPosition){ wrapXY = fly(dom).getXY(); } var div = document.createElement("div"); div.style.visibility = vis; wrap = dom.parentNode.insertBefore(div, dom); fly(wrap).setPositioning(pos); if(fly(wrap).isStyle(POSITION, "static")){ fly(wrap).position("relative"); } fly(dom).clearPositioning('auto'); fly(wrap).clip(); wrap.appendChild(dom); if(wrapXY){ fly(wrap).setXY(wrapXY); } } return wrap; },
    The question how do i override/extends it to make it faster , what it does and so on

  4. #4
    Sencha User
    Join Date
    May 2013
    Location
    USA
    Posts
    4
    Vote Rating
    0
    hemanthrpr is on a distinguished road

      0  

    Default


    @Just_a_kid
    Thanks for the idea and one thing I did was to hide the dummyNode by adding a class name to it instead of removing it.

    Code:
    yourTreepanel.getView().addRowCls(dummyNode,'dummyRow');
    And then in css you can add this.
    Code:
    .dummyRow {
    	display : none;
    }

    P.S : I'm new to extJS world, so excuse me if it didn't make any sense.

  5. #5
    Sencha User
    Join Date
    May 2013
    Location
    USA
    Posts
    4
    Vote Rating
    0
    hemanthrpr is on a distinguished road

      0  

    Default Issue with sorting

    Issue with sorting


    You might see the dummy rows again after sorting. In order to hide again, you can add sortChange listener like below :

    Code:
    sortChange : function(){
         treePanel.getRootNode().cascadeBy(function(node) { 
              if(node.data.dummy){
                 treePanel.getView().addRowCls(node,'dummyRow');
                  }
        });
    }
    Note : I created the dummyNode like below :

    Code:
    var dummyNode = Ext.ModelManager.create({"leaf" : false,"expanded" : true,"dummy" : true}, 'modelName');
    where modelName is the model in the store.

Similar Threads

  1. Replies: 0
    Last Post: 17 Aug 2010, 6:25 AM
  2. need help to improve the performance of ext on IE
    By simo_9 in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 29 Oct 2009, 12:30 PM
  3. How to improve RPC performance
    By livinglegends in forum Ext GWT: Discussion
    Replies: 25
    Last Post: 25 Aug 2009, 11:02 PM
  4. Help me improve my TreeLoader performance
    By abulawad in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 11 Jun 2008, 11:56 PM

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi