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

[chiba.k@hitcom.co.jp]

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

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

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

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

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

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

[yuki]

ソート処理は、ノードのbeforeexpandとexpandイベントの間に行われるので、その間マスク処理を行えばいいかと思います。ノード毎にイベントリスナーを設定する必要は発生しますが。

[chiba.k@hitcom.co.jp]

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

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

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

[yuki]

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

     Ext.onReady(function(){
        var t = new Ext.tree.TreePanel({
          renderTo: Ext.getBody(),
          autoScroll: true,
          height: 500,
          width: 300,
          dataUrl: 'treesort.php',
          root: {
            nodeType: 'async',
            text: 'root'
          }
        });

        var ts = new Ext.tree.TreeSorter(t, {
          folderSort: true,
          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({
          beforeload: t.loadmask.show,
          load: t.loadmask.hide,
          scope: t.loadmask
        });

        t.getRootNode().on({
          beforeexpand: t.sortmask.show,
          expand: t.sortmask.hide,
          scope: t.sortmask,
          single: true
        });
      }); 

ちなみに、コード中の treesort.php は下記のような感じです：

  $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);