在Ext.tree.panel

Question

插入一个节点在特定的位置，我试图改变这个的Ext JS的TreeGrid样本： http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html

所有我想要的是在特定位置添加一个节点。

我尝试这样做：

var treePanel = Ext.getCmp('treePanel'); 
var selNode = treePanel.getSelectionModel().getSelection()[0]; 
var appendedChild = selNode.appendChild({ 
         task: 'Task1', 
         user: 'Name', 
         duration: '10', 
         leaf: true 
        }); 

它给没有错误，但UI不会更新。与selNode.insertChild(0, ..一样的东西它没有错误地运行，但UI不会更新。

不知怎的，这工作：

var node = treePanel.store.getRootNode(); 
node.appendChild({ 
        task: 'Task3', 
        user: 'Name', 
        duration: '10', 
        leaf: true 
       }); 

那么，如何在基于用户选择特定位置追加/插入。

这里是我的全部代码如下所示：http://jsfiddle.net/4T68s/
我改变了商店的静态数据，因为一个跨域请求得到json数据是行不通的。

Answer 1

您应该节点leaf属性更改为false您添加子之前它：

selNode.set('leaf', false); 

工作样本：http://jsfiddle.net/lolo/4T68s/6/

Answer 2

如果要追加的节点，新的父母一定不能是叶。我已经更新了代码，以举例说明如何将节点添加到正确的位置以及如何更改图标，使其看起来不像父文件夹图标，这是我假设您试图避免的。

http://jsfiddle.net/4T68s/5/

设置你的店是这样，这样的父节点被展开和加载。

var store = Ext.create('Ext.data.TreeStore', { 
    model: 'Task', 
    root: { 
     expanded: true, 
     children: [ 
      { 
      task: 'Settings', 
      leaf: false, 
      expanded: true, 
      children: [ 
       { 
       task: 'System Settings', 
       expanded: true, 
       loaded: true, 
       icon: 'icon-leaf'}, 
      { 
       task: 'Appearance', 
       expanded: true, 
       loaded: true, 
       } 
      ]} 
     ] 
    } 
}); 

然后插入一个像这样的新模型。

var selNode = treePanel.getSelectionModel().getSelection()[0]; 
var newTask = Ext.create('Task'); 
newTask.set({ 
    task: 'Task1', 
    user: 'Name', 
    duration: '10', 
    expanded: true, 
    loaded: true, 
    leaf: false, 
    icon: 'icon-leaf' 
}); 

selNode.insertChild(0, newTask); 

这将创建一个新的父节点，然后您将能够添加更多的任务。使用图标属性来设置图标图像src或iconCls使用CSS来完成。尽管CSS方式存在一个错误。由于某种原因，它保留了x-tree-icon-parent类。