Как я могу изменить корневой узел любого дерева хранилищ во время выполнения?

Question

Как я могу изменить корневой узел моего дерева хранилищ во время выполнения?

Ниже указано мое текущее хранилище деревьев:

Ext.define('rt.store.userinproject', {
    extend: 'Ext.data.TreeStore',
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }],
    root: {
        expanded: true,
        text: "",
        user: "",
        status: "",
        children: [{
            text: "Project 1",
            pid: 1,
            expanded: true,
            children: [{
                text: "Department 1",
                did: 1,
                cls: "folder",
                children: [{
                    text: "User 1",
                    uid: 1,
                    leaf: true
                }, {
                    text: "User 2",
                    uid: 2,
                    leaf: true
                }, {
                    text: "User 3",
                    uid: 3,
                    leaf: true
                }, {
                    text: "User 4",
                    uid: 4,
                    leaf: true
                }, {
                    text: "User 5",
                    uid: 5,
                    leaf: true
                }]
            }, {
                text: "Department 2",
                did: 2,
                cls: "folder",
                children: [{
                    text: "User 6",
                    uid: 6,
                    leaf: true
                }, {
                    text: "User 7",
                    uid: 7,
                    leaf: true
                }, {
                    text: "User 8",
                    uid: 8,
                    leaf: true
                }, {
                    text: "User 9",
                    uid: 9,
                    leaf: true
                }, {
                    text: "User 10",
                    uid: 10,
                    leaf: true
                }]
            }, {
                text: "Department 3",
                did: 3,
                cls: "folder",
                children: [{
                    text: "User 11",
                    uid: 11,
                    leaf: true
                }, {
                    text: "User 12",
                    uid: 12,
                    leaf: true
                }, {
                    text: "User 13",
                    uid: 13,
                    leaf: true
                }, {
                    text: "User 14",
                    uid: 14,
                    leaf: true
                }, {
                    text: "User 15",
                    uid: 15,
                    leaf: true
                }]
            }]
        }, {
            text: "Project 2",
            pid: 2,
            expanded: true,
            children: [{
                text: "Department 1",
                did: 1,
                cls: "folder",
                children: [{
                    text: "User 1",
                    uid: 1,
                    leaf: true
                }, {
                    text: "User 2",
                    uid: 2,
                    leaf: true
                }, {
                    text: "User 3",
                    uid: 3,
                    leaf: true
                }, {
                    text: "User 4",
                    uid: 4,
                    leaf: true
                }, {
                    text: "User 5",
                    uid: 5,
                    leaf: true
                }]
            }, {
                text: "Department 2",
                did: 2,
                cls: "folder",
                children: [{
                    text: "User 16",
                    uid: 16,
                    leaf: true
                }, {
                    text: "User 17",
                    uid: 17,
                    leaf: true
                }, {
                    text: "User 18",
                    uid: 18,
                    leaf: true
                }, {
                    text: "User 19",
                    uid: 19,
                    leaf: true
                }, {
                    text: "User 20",
                    uid: 20,
                    leaf: true
                }]
            }, {
                text: "Department 3",
                did: 3,
                cls: "folder",
                children: [{
                    text: "User 21",
                    uid: 21,
                    leaf: true
                }, {
                    text: "User 22",
                    uid: 22,
                    leaf: true
                }, {
                    text: "User 23",
                    uid: 23,
                    leaf: true
                }, {
                    text: "User 24",
                    uid: 24,
                    leaf: true
                }, {
                    text: "User 25",
                    uid: 25,
                    leaf: true
                }]
            }]
        }]
    }
});

В настоящее время я могу показать все дерево из корневого узла в моемдревовидная панель.

Теперь в магазине выше я хочу сделать «Проект 1» моим корневым узлом, когда пользователь щелкает по проекту 1, и «Проект 2» моим корневым узлом, когда пользователь щелкает по проекту 2.

Возможно ли это?Если так, то как?Дайте мне знать, если вам что-нибудь понадобится от меня.

Answer 1

1. Если вы пытаетесь сначала изменить какую-то часть существующего корня, вам нужно завладеть корневым узлом.Вы можете получить доступ к своему корневому узлу, используя getRootNode(), доступный с вашим TreeStore.пример:

 var node = treeObject.getStore().getRootNode();

Теперь, чтобы изменить данные, вы можете использовать свойство data.Например, если вам нужно изменить текст корневого узла, вы можете:

node.data.text = 'New Root';   // You can access any other property of your node's data model the same way

2. Если вам нужно заменить весь узел, вы можете использовать setRootNode()который также доступен с вашим TreeStore.Вам нужно будет передать соответствующую модель данных, используемую для вашего TreeStore.

Поскольку вы пытаетесь заменить свой корень, вам определенно необходимо использовать setRootNode().Вот пример кода, заменяющего корень:

//your tree click handler...
itemclick : function(view,rec,it,inx,ev) {

    var root = view.getTreeStore().getRootNode();
    var newRoot = root.getChildAt(inx).copy('xx',true);                 
    view.getTreeStore().setRootNode(newRoot);                   
}

В идеале этот код должен работать.но есть небольшая ошибка в copy(), которая приводит к нарушению этого кода.Временное решение (я бы не рекомендовал изменять библиотечные файлы) доступно на форуме (см. Ссылку выше).

Другим способом было бы написать собственный код copy, например:

var root = view.getTreeStore().getRootNode();
var newRoot = root.getChildAt(inx);
view.getTreeStore().setRootNode(newRoot); 
// for each child in newRoot, create child for the newly assigned root.