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

Insert a node at a specific location in Ext.tree.panel

本文关键字：定位 位置 插入 节点 Ext tree panel      更新时间：2023-09-26

我正在尝试更改这个ext-js树网格示例：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数据的跨域请求不起作用。

在添加子节点之前，应将节点上的leaf属性更改为false：

selNode.set('leaf', false);

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

如果要附加节点，则新的父级不能是叶。我已经更新了您的代码，为您提供了一个示例，说明如何在正确的位置添加节点，以及如何更改图标，使其看起来不像父文件夹图标，我认为这是您试图避免的。

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或iconCl以使用CSS。尽管CSS方式有一个错误。由于某种原因，它保留了x-tree-icon-parent类。

相关文章：