How can I change the rootnode of any treestore at runtime?

How can I change the rootNode of my treestore at runtime?

Following is my current tree store:

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,
   开发者_Go百科             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
                }]
            }]
        }]
    }
});

Currently I am able to show whole tree from root Node in my treepanel.

Now in store above I want to make "Project 1" as my root node when user click on project 1 and "project 2" as my root node when user click on project 2.

Is this possible? If so, how? Let me know if you need anything from me.

1. If you are trying to modify some part of the existing root first you need to get hold of the root node. You can get hold of your root node using getRootNode() available with your TreeStore. example:

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

Now, to modify the data, you can make use of data property. For example, if you need to change the root node's text, you can:

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

2. If you need to replace the entire node you can make use of the setRootNode() which is also available with your TreeStore. You will have to pass the appropriate data model used for your TreeStore.

Since, you are trying to replace your root, you definitly need to use setRootNode(). Here is an example code replacing the 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);                   
}

Ideally, this code should work. but there is a small bug in copy() that causes to break this code. A temporary solution (I would not recommend modifying library files) is available at the forum (refer the above link).

Another way would be to code your own copy code like:

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.