Вставить узел в определенном месте в Ext.tree.panel - PullRequest
Новая
       5

Вставить узел в определенном месте в Ext.tree.panel

5 голосов
/ 01 марта 2012

Я пытаюсь изменить этот пример 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
                     });

Не выдает ошибок, но пользовательский интерфейс не обновляется. То же самое с selNode.insertChild(0, .. Он работает без ошибок, но пользовательский интерфейс не обновляется.

Каким-то образом это работает : 

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

Итак, как мне добавить / вставить в определенном месте на основе выбора пользователя .

Воткак выглядит мой полный код: http://jsfiddle.net/4T68s/
Я изменил хранилище на статические данные, потому что междоменный запрос на получение данных json не будет работать.

Ответы [ 2 ]

4 голосов
/ 01 марта 2012

Вы должны изменить свойство leaf на false на узле, прежде чем добавить к нему дочерний элемент: 

selNode.set('leaf', false);

Рабочий образец: http://jsfiddle.net/lolo/4T68s/6/

3 голосов
/ 01 марта 2012

Если вы хотите добавить узлы, новый родитель не должен быть листом.Я обновил ваш код, чтобы дать вам пример того, как вы добавляете узел в нужном месте и как вы меняете значок, чтобы он не выглядел как значок родительской папки, чего, как я полагаю, вы пытаетесь избежать.

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, чтобы установить изображение image src или iconCls, чтобы сделать это с помощью CSS.Хотя есть ошибка с образом CSS.По какой-то причине он сохраняет класс x-tree-icon-parent.

...