Extjs: Tree, Selecting node after creating the tree

extjs treepanel example
extjs docs
extjs kitchen sink

I have a simple TreePanel. I would like to select a particular node upon loading it. The nodes are from a remote file (json).

The tree is loading as expected. However, the node is not being selected. Firebug shows node as undefined. This perhaps because of the async property. But, I an unable to configure this other wise, or specify the node be selected.

Any suggestions welcomed, and thank you.

    LeftMenuTree = new Ext.tree.TreePanel({
    renderTo: 'TreeMenu',
    collapsible: false,
    height: 450,
    border: false,
    userArrows: true,
    animate: true,
    autoScroll: true,
    id: 'testtest',
    dataUrl: fileName,
    root: {
  nodeType: 'async',    
     iconCls:'home-icon',
     expanded:true,
       text: rootText
    },
    listeners: {
        "click": {
    fn: onPoseClick,
                 scope: this
               }
        },
          "afterrender": {
       fn: setNode,
       scope: this 
      }  
 });
function setNode(){
 alert (SelectedNode);
  if (SelectedNode == "Orders"){
    var treepanel = Ext.getCmp('testtest');
    var node = treepanel.getNodeById("PendingItems");
    node.select();
  }
} 

This is because the node isn't really selectable until the tree has been rendered. Try adding your node selection to an event listener listening for the render event.

Trees, Appending to the tree. Also useful is the ability to define children inline when creating the new parent nodes. The following code gives us the same result. Trees. The Tree Panel Component is one of the most versatile Components in ExtJS and is an excellent tool for displaying hierarchical data in an application.Tree Panel extends from the same class as Grid Panel, so, most all of the benefits of Grid Panels - features, extensions, and plugins can also be used on Tree Panels.

I use this code in the TreeGrid to select a node

_I.treeGrid.getSelectionModel().select(_I.treeGrid.getRootNode());

I haven't tried this in a TreePanel but since the TreeGrid is based on it I'll just assume this works. I used the load event of the loader to plugin similar code after the XHR request was done, so try to write your setNode function like this:

var loader = LeftMenuTree.getLoader();
loader.on("load", setNode);    
function setNode(){
     alert (SelectedNode);
      if (SelectedNode == "Orders"){
        var treepanel = Ext.getCmp('testtest');
        treepanel.getSelectionModel().select(treepanel.getNodeById("PendingItems"));
      }
    }

Trees, Appending to the tree. Also useful is the ability to define children inline when creating the new parent nodes. The following code gives us the same result. Trees. The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying hierarchical data in an application.Tree Panel extends from the same class as Grid Panel, so, most all of the benefits of Grid Panels - features, extensions, and plugins can also be used on Tree Panels.

this work for me...

var loader  = Ext.getCmp('testtest').getLoader();
loader.on("load", function(a,b,c){ 
   b.findChild("id",1, true).select(); // can find by any parameter in the json
}); 

Ext.tree.Panel, Many classes have shortcut names used when creating (instantiating) a class with a For the tree node config options (like text , leaf , expanded ), see the documentation of Ext.data. Model of your choosing, nodes in the Ext.data.​TreeStore TreeModel ) this will have no knowledge of creation of special child node types. I have a treeview where i want to create the nodes by getting data from a database, but i don't want to create all the nodes, i want to create the nodes of the first level, and when i click a node its children will be added to the tree by code, so i did all this but the problem is, i want to display a "plus" beside the node that i know that will have children even if it doesn't have for now

I have documented a way to accomplish something very similar here:

http://www.sourcepole.ch/2010/9/28/understanding-what-s-going-on-in-extjs

what you'll need to make sure is that the node that you are selecting is visible. You can accomplish that by traversing the tree and node.expand()ing all the nodes parents (from the root down).

Chapter 9. Taking root with trees, In this chapter you'll learn about the Ext JS tree panel, which is used to display After getting comfortable with this component, you'll set up CRUD operations by to select the node that was right-clicked and create an instance of Ext.menu. The data fields used to render a tree node are: text, leaf, children, and expanded. Once a node is loaded to the tree store you can use get() to fetch the value of a given field name (provided there is not a convenience accessor on the Node for that field).

If you're using a recent enough version of ExtJS then I find using ViewModels and the Selection config far easier for this kind of thing.

Something like:

LeftMenuTree = new Ext.tree.TreePanel({
renderTo: 'TreeMenu',
collapsible: false,
height: 450,
border: false,
userArrows: true,
animate: true,
autoScroll: true,
id: 'testtest',
dataUrl: fileName,
bind: {
    Selection: '{SelectedNode}'
}, 
root: {
   nodeType: 'async',    
   iconCls:'home-icon',
   expanded:true,
   text: rootText
},
listeners: {
    "click": {
       fn: onPoseClick,
       scope: this
    }
    "afterrender": {
       fn: setNode,
       scope: this 
    }  
 });

(You'll need to either have a ViewModel set up in the TreePanel or the owning view)

Then assuming you're using a ViewController and setNode is a member:

setNode: function(){
 var nodeToSelect = // code to find the node object here
 this.getViewModel().set('Selection', nodeToSelect);
} 

The nice thing about the ViewModel approach is that it seems to just handle all of the rendering / data loading issues automatically.

Ext.tree.Panel, For the tree node config options (like text , leaf , expanded ), see the Unless the TreeStore is configured with a model of your choosing, nodes in the Ext.data. TerritoryRoot', // Needs to be this so it knows to create 'Country' child nodes root: true to animate the transition when the panel is collapsed, false to skip the  Is it possible to hide the expand icon in a TreePanel If this is your first visit, you may have to register before you can post. To start viewing messages, select the forum that you want to visit from the selection below.

Class Ext.tree.TreePanel, A TreePanel must have a root node before it is rendered. An example of this might be to create a child Panel containing a custom content, such as a header, While some ExtJs Component classes export selected DOM events (e.g. "click",​  jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.

Ext.tree.Panel, Model of your choosing, nodes in the Ext.data.TreeStore are by default, instances of Ext.data.TreeModel. Heterogeneous node types. If the tree needs to use  This option specifies the behavior of the tree when a parent of a selected node is closed. The options are "select_parent" - which deselects the selected node and selects the closed one (similar to windows explorer), "deselect" - only deselects the selected node or false - does nothing. Default is "select_parent".

Ext.tree.TreePanel, A TreePanel must have a root node before it is rendered. auto create TreeLoader dataUrl: 'get-nodes.php', root: { nodeType: 'async', true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.. A tree selection model to use with this TreePanel (defaults to an Ext.tree. PHP demos for jstree. Contribute to vakata/jstree-php-demos development by creating an account on GitHub.

Comments
  • I tried your suggestion. I thought it will work. But, the same error, node not defined.
  • It fires before children are rendered.
  • +1 works for me.Also how can i make the selected node font bold as it becomes on hover?
  • To select a first child node, this would work with ExtJs4 tree_dir.getSelectionModel().select(tree_dir.getRootNode().childNodes[0]);
  • somehow my setNode function was never called. Instead, I had to add a listener to my window and wait for the window to render, then I called the treepanel.getSelectionModel().select(treepanel.getNodeById(...) snippet and that worked wonderfully.
  • treepanel.getSelectionModel().select(treepanel.getNodeById("PendingItems")); does not fire the select event of the tree panel. What needs to be done in order to fire select event ?