如何在运行时更改任何树库的根节点?

时间:2011-06-02 10:21:51

标签: extjs tree extjs4 extjs-mvc

如何在运行时更改treestore的rootNode?

以下是我目前的树店:

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

目前,我可以在我的treepanel中显示来自根节点的整个树。

现在在上面存储我想在用户点击项目1时将“Project 1”作为我的根节点 当用户点击项目2时,“project 2”作为我的根节点。

这可能吗?如果是这样,怎么样?如果您需要我的任何信息,请告诉我。

1 个答案:

答案 0 :(得分:3)

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的相应数据模型。

因为您尝试替换root,所以您肯定需要使用setRootNode()。以下是替换root的示例代码:

//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()中有small bug导致破坏此代码。论坛上提供了一个临时解决方案(我不建议修改库文件)(参见上面的链接)。

另一种方法是编写自己的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.