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

这将创建一个新的父节点，然后您可以添加更多任务。使用icon属性设置图标图像src或iconCls以使用CSS执行此操作。虽然CSS方式有一个bug。它出于某种原因保留了x-tree-icon-parent类。

在Ext.tree.panel中的特定位置插入节点

2 个答案: