1. #1
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    2
    Vote Rating
    0
    chiba.k@hitcom.co.jp is on a distinguished road

      0  

    Default Ext.tree.TreeSorterのソート中表示について

    Ext.tree.TreeSorterのソート中表示について


    「Ext.tree.TreePanel」 + 「Ext.tree.AsyncTreeNode」 + 「Ext.tree.TreeSorter」 を利用して、非同期通信で得たノードのソートを行っております。

    ツリーのノード取得中には「Ext.LoadMask」を利用してロード中のマスク表示をおこなっています。

    ノードを取得し終わるとマスクを解除して、その後ソート処理が行われます。

    多数のノードのソート処理には時間がかかるため、ソート処理中にはそれがわかるように「ソート中」のようなマスク表示を行い、
    ソート完全終了後にマスクを解除したいと考えています。

    しかしながら、ソートが完全に終了してマスクを解除させるタイミングがわからずに困っております。

    ソート処理が終了した時点が判断できるイベント等があれば良いのでしょうが、
    何か良い方法などはありますでしょうか。

  2. #2
    Sencha - Support Team yuki's Avatar
    Join Date
    Jun 2007
    Location
    Chigasaki, Japan
    Posts
    273
    Vote Rating
    0
    yuki is on a distinguished road

      0  

    Default


    ソート処理は、ノードのbeforeexpandとexpandイベントの間に行われるので、その間マスク処理を行えばいいかと思います。ノード毎にイベントリスナーを設定する必要は発生しますが。
    Ext Japan, LLC [Twitter: @extjapan]
    [Ext JS / Ext GWTのライセンス販売][日本語テクニカルサポート][Ext JSトレーニング・コンサルティング]

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    2
    Vote Rating
    0
    chiba.k@hitcom.co.jp is on a distinguished road

      0  

    Default


    ご返答ありがとうございます。

    親ノードのbeforeexpandイベントでマスク処理を、expandイベントでマスク解除処理を試してみましたが、
    expandイベントがコールされた後も子ノードのソート処理が行われているようにみえました。

    Ext.tree.TreeSorterのdoSort(Ext.tree.TreeNode)の中で子ノード数をカウントすることで
    なんとかソート完了が判断できないかと考えています。

  4. #4
    Sencha - Support Team yuki's Avatar
    Join Date
    Jun 2007
    Location
    Chigasaki, Japan
    Posts
    273
    Vote Rating
    0
    yuki is on a distinguished road

      0  

    Default


    下記のようなコードを試してみたのですが、1500件ほどのノードであればうまく動いているように見えるんですけどね

    PHP Code:
         Ext.onReady(function(){
            var 
    = new Ext.tree.TreePanel({
              
    renderToExt.getBody(),
              
    autoScrolltrue,
              
    height500,
              
    width300,
              
    dataUrl'treesort.php',
              
    root: {
                
    nodeType'async',
                
    text'root'
              
    }
            });

            var 
    ts = new Ext.tree.TreeSorter(t, {
              
    folderSorttrue,
              
    dir"asc",
              
    sortType: function(node){
                return 
    node.attributes.val;
              }
            });
            
            
    t.show();

            
    t.loadmask = new Ext.LoadMask(t.el, { msg"Loading..."});
            
    t.sortmask = new Ext.LoadMask(t.el, { msg"Sorting..."});

            
    t.on({
              
    beforeloadt.loadmask.show,
              
    loadt.loadmask.hide,
              
    scopet.loadmask
            
    });

            
    t.getRootNode().on({
              
    beforeexpandt.sortmask.show,
              
    expandt.sortmask.hide,
              
    scopet.sortmask,
              
    singletrue
            
    });
          }); 
    ちなみに、コード中の treesort.php は下記のような感じです:
    PHP Code:
      $nodes = array();
      
    $max 1500;

      for(
    $i=0$i<$max$i++){
        
    $val rand(0,$max);

        
    $n = array(
          
    "text" => "node".$val,
          
    "val" => $val,
          
    "leaf" => true,
        );
        
    array_push($nodes,$n);
      }

      echo 
    json_encode($nodes); 
    Ext Japan, LLC [Twitter: @extjapan]
    [Ext JS / Ext GWTのライセンス販売][日本語テクニカルサポート][Ext JSトレーニング・コンサルティング]

Similar Threads

  1. Custom Template for Ext.tree.TreePanel (Ext.tree.TreeNodeUI)
    By roymartin in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 28 Oct 2013, 10:03 AM
  2. [1.2] Ext.ux.tree.ArrayTree - Tree from array Extension (stateful, Ext 2.2 compat)
    By jsakalos in forum Ext 2.x: User Extensions and Plugins
    Replies: 31
    Last Post: 22 Aug 2010, 12:34 PM
  3. Ext.tree: reset Treeloader & render Tree without pageref
    By oxi in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 23 Jan 2010, 12:15 AM
  4. Extendin a EXT.tree.TreeNode or building a new Ext.tree.TreeNodeUI
    By kheraud in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 25 Jul 2009, 1:52 PM
  5. Replies: 3
    Last Post: 5 Sep 2007, 10:52 PM

Thread Participants: 1