Extjs 4.0.7如何重新渲染树面板以查看更改

我正在创建一个项目选择器，其中包含两个框，用于在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;

    }

  }
}

致：

导致一些节点丢失的奇怪行为。当然不是我想要的。我哪里出了问题

使用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和+2，但它们都有效地将项目向适当的方向移动了一个。

编辑：

回到责任事件问题。。。 你得把枪开了

'datachanged' 
'refresh'

将存储作为唯一参数的存储上的事件。这将导致UI更新。但请注意，我只是对源代码进行了一个初步了解，我相信这一切都可以做得更聪明。已经存在至少一个用于此的。 如果我有时间再研究一下，但我想你第一次应该对这些事件没意见

你永远看不到任何东西，因为你只是在没有适当的方法的情况下做了，然后触发导致重新渲染的负责任的事件。看看

可能还有更多的方法可以帮助解决这个问题。我建议您使用这些，而不是在没有任何责任事件发生的情况下在引擎盖下进行

除了我的第二条评论（只是一个不知道这是否正是你想要的猜测）：

编辑：

回到责任事件问题。。。 你得把枪开了

'datachanged' 
'refresh'

将存储作为唯一参数的存储上的事件。这将导致UI更新。但请注意，我只是对源代码进行了一个初步了解，我相信这一切都可以做得更聪明。已经存在至少一个用于此的。 如果我有时间再研究一下，但我想你第一次应该对这些事件没意见

你永远看不到任何东西，因为你只是在没有适当的方法的情况下做了，然后触发导致重新渲染的负责任的事件。看看

可能还有更多的方法可以帮助解决这个问题。我建议您使用这些，而不是在没有任何责任事件发生的情况下在引擎盖下进行

除了我的第二条评论（只是一个不知道这是否正是你想要的猜测）：

---

如果要更新节点的视图，建议使用yourTree.getView（）.refresh（）

但您可以通过使用parentNode.insertChild（index，childNode）来避免这种情况；其中，index是希望节点显示的位置，parentNode是要重新排序的节点的父节点。ChildNode可以是新节点或已存在的任何其他节点接口的配置。如果该节点确实存在，并且您使用insertChild方法将其插入，则它将自动从该节点所在的位置删除该节点

因此，正如您在回答我的问题时所提供的，您的代码将与以下内容一起工作（我可能会这样做，但这是未经测试的）：

MoveUp：功能（按钮、事件、eOpts）{
var chosenPanel=Ext.ComponenetQuery.query（“#chosenTreePanel”）[0]；
var selectedNodes=chosenPanel.getSelectionModel（）.getSelection（）；
对于（变量i=0；i

如果要更新节点的视图，建议使用yourTree.getView（）.refresh（）

但您可以通过使用parentNode.insertChild（index，childNode）来避免这种情况；其中，index是希望节点显示的位置，parentNode是要重新排序的节点的父节点。ChildNode可以是新节点或已存在的任何其他节点接口的配置。如果该节点确实存在，并且您使用insertChild方法将其插入，则它将自动从该节点所在的位置删除该节点

因此，正如您在回答我的问题时所提供的，您的代码将与以下内容一起工作（我可能会这样做，但这是未经测试的）：

MoveUp：功能（按钮、事件、eOpts）{
var chosenPanel=Ext.ComponenetQuery.query（“#chosenTreePanel”）[0]；
var selectedNodes=chosenPanel.getSelectionModel（）.getSelection（）；
对于（变量i=0；i

我将对此进行研究，但如果我对它进行了一点黑客攻击，是否有可以触发的特定事件，或启动重新渲染的自定义事件？我尝试了replaceChild方法。请参阅我对该问题的编辑。@Bbb如果您使用appendChild（）将一个节点附加到另一个节点，这将自动从旧的父节点（如果有）中删除移动的节点，然后将其附加。就我所见，您正在移动节点，所以在目标节点上使用appendChild（），而不是replaceChild（），看起来您这样做是错误的。总的来说，你这样做似乎很复杂。。您只是将所选节点移动到新的父节点，我错了吗？那么您需要任何数组。树（节点）负责子节点和

'datachanged' 
'refresh'

MoveUp: function(button, event, eOpts){
    var target = Ext.getStore('storeId').getRootNode().findChild('text', 'Chosen folder');
    var selected = chosenPanel.getSelectionModel().getSelection();
    target.appendChild(selected);
}

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