add/delete/rename tree nodes?

[snod0g]

how can i implement a button that will delete a selected node, add a node to the tree, or do an inline rename of a node?


also how could i access the changed datamodel so i can send back to server as xml or json or whatever?

[humpdi]

i would like to know that too..

[BernardChhun]

hey guys,

to access the selected node of a tree:

var selectedNode = myTree.selModel.selNode;

adding a new node to the same directory as the selectedNode:

var newNode = new Ext.tree.TreeNode({id: "foo", text: "foo", leaf: true});
myTree.selModel.selNode.parentNode.appendChild(newNode);

removing the selectedNode:

var delNode = myTree.selModel.selNode;
myTree.selModel.selNode.parentNode.removeChild(delNode);

to implement a button doing these operations, you just need to attach a handler to the onClick event of the button doing what I just wrote. Don't forget to watch for the selectedNode being null or not as a user might click on the button without selecting a node.

[BernardChhun]

edit: arrgg I pressed too fast on the edit button and hitted the quote button instead...

As for the renaming of the selectedNode, I'd use an inlineEditor but it will be deprecated soon.

Concerning telling the server side about the changes, I make a XHR call to the server side for each of these operations using the id of the selectedNode and the selected operations. Be sure to have unique IDs if you want to go down that path.

[bharatkarthik]

I'm defining a function to build a static tree using json.
I need to write a function to get a node by id, appeend, expand collapse and do some similar kind of operations.

How do i do that?

Totally confused with Extjs.. is there any good documentation that gives step up step example?

function doOperation()
{
// How do i get a tree here??



}

[evant]

Read the documentation:

http://extjs.com/deploy/ext/docs/index.html
http://extjs.com/deploy/ext/docs/out...ml#getNodeById
http://extjs.com/deploy/ext/docs/out....html#collapse
http://extjs.com/deploy/ext/docs/out...de.html#expand
http://extjs.com/deploy/ext/docs/out...ml#appendChild
http://extjs.com/deploy/ext/docs/out...e.html#setText

[RedFrog]

Hi,

I've read the documentation, but I can not seem to figure out how from a button to access the tree in order to call getNodeById, collapse, expand, etc.

Nevermind. Sorry to bother. I haven't worked with Javascript in several years and this simple problem just threw me for a loop.

[barboul]

When I am trying to delete a node I use this method:
button in the HTML file:

<button id="button_remove" onClick="Remove_node_and_childs(tree.selModel.selNode)">Remove node and child nodes</button>

Code in the reoder.js file:

     function Remove_node_and_childs(node){
        tree.selModel.selNode.parentNode.removeChild(node);
    }

unfortunately firebug tell me that tree is not defined, how come?
tree is the name of my tree...
I defined it in the

Ext.onReady(function(){

like that:

     var tree = new Tree.TreePanel({
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader({
            preloadChildren:true,
            dataUrl:'get-nodes.php'
        })
    });

Thanks for your help.
Ludo

[akhildmx]

Were you able to find out the answer to this problem,I came across similar problem of tree not defined.

[vcraescu]

you have to define var tree = null; outside Ext ready function. As you did, tree variable is only visible within Ext ready scope, so it's not global.

<script type="text/javascript">
    var tree = null;
    Ext.onReady(function() {
        tree = new Tree.TreePanel(....
        ...
    });
</script>

Havent tried, but that's what i see wrong at first sight.