Extjs 4.0.7如何重新渲染我的treepanel以查看更改

Question

我正在创建一个带有两个框的项目选择器,它们可以在extjs应用程序中来回移动.在右侧框中,我创建了用于上下移动项目的按钮.基本上我是在上面或下面交换一个项目.所以,我的代码在这方面是直截了当的

MoveUp: function(button, event, eOpts){
  var theChosen = Ext.getStore('storeId').getRootNode().findChild('text', 'Chosen folder');
  var chosenPanel = Ext.ComponenetQuery.query('#chosenTreePanel')[0];
  var selected = chosenPanel.getSelectionModel().getSelection();

  for( var i = 1; i < theChosen.childNodes.length; i++){
    if(Ext.Array.contains(selected, theChosen.childNodes[i]) && (!Ext.Array.contains(selected, theChosen.childNodes[i-1]){
      var temp = theChosen.childNodes[i];
      theChosen.childNodes[i] = theChosen.childNodes[i-1];
      theChosen.childNodes[i-1] = temp;

    }

  }
}

所有这些代码似乎都运行正常,因为在单击我的按钮并检查firebug中的DOM后,我可以看到所选节点已正确移动到数组中,但是,此效果永远不会显示在我的treepanel中.???如何在树形图更改时更新树形图.???

TreePanel heirarchy看起来只是为了澄清

根节点'选择文件夹节点'我在"文件夹"中上下移动的项目数组

我正在使用版本4.0.7

尝试使用replaceChild()来触发事件以进行重新渲染并不像我预期的那样

更改:

var temp = theChosen.childNodes[i];
theChosen.childNodes[i] = theChosen.childNodes[i-1];
theChosen.childNodes[i-1] = temp;

至:

var temp = theChosen.childNodes[i];
theChosen.replaceChild(theChosen.childNodes[i-1], theChosen.childNodes[i]);
theChosen.replaceChild(temp, theChosen.childNodes[i-1]);

导致某些节点丢失的奇怪行为.当然不是我想要的.我在哪里错了？

使用datachanged和(未记录的)刷新事件尝试以下代码:

Ext.getStore('storeId').fireEvent('datachanged', Ext.getStore('chosen') );
Ext.getStore('storeId').fireEvent('datachanged', Ext.getStore('chosen') );

这不会重新加载任何东西......

解:

使用nodeInterface的insertChild方法....

我注意到insertChild的工作方式有些奇怪,我需要根据向上或向下移动来更改我的索引,这将通过下面的代码解释.

向上移动:

theChosen.insertChild( (i-1), theChosen.childNodes[i]);

向下移动:

theChosen.insertChild( (i+2), theChosen.childNodes[i]);

虽然-1 vs +2,但它们都能在适当的方向上有效地将项目移动一个.

Answer 1

如果要更新节点视图,我建议使用yourTree.getView().refresh();

但是你可以通过使用parentNode.insertChild(index,childNode)来避免这种情况; 其中index是您希望节点显示的位置,parentNode是您要重新排序的节点的父节点.ChildNode可以是新节点或已存在的任何其他节点接口的配置.如果节点已经存在并且您使用insertChild方法插入它,它将自动从该节点移除该节点.

因此,当您在回答我的答案时提供问题时,您的代码将使用类似的东西(这可能是我做的,但这是未经测试的):

MoveUp: function(button, event, eOpts){
    var chosenPanel = Ext.ComponenetQuery.query('#chosenTreePanel')[0];
    var selectedNodes = chosenPanel.getSelectionModel().getSelection();
    for( var i = 0; i < selectedNodes.length; i++){
        var currentNode = selectedNodes[i];
        if(!currentNode.isFirst())
        {
            var parentNode = currentNode.parentNode;
            var newIndex = parentNode.indexOf(currentNode) - 1;
            parentNode.insertChild(newIndex, currentNode);
        }
    }
}