1. #1
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Question How to select a treeNode?

    How to select a treeNode?


    hi together,

    in the api-docs, i found 2 methods for selecting a treeNode:
    Code:
    treeNode.select();  
    tree.getSelectionModel().select(node);
    i built an example, where both of them did not work. maybe i am using them not as intended or it is because the tree is static -> no ajax-children-loading. with console.log firebug says for a node, that the properties rendered and childrenRendered are false.

    here are the important parts of the code:

    Code:
    var treeNodes = {};
    ...
               var adminTree = new Ext.tree.TreePanel({ 
                    title       : 'Menü',
                    region      : 'west',
                    border      : true,
                    margins     : '-1 -1 -1 -1',
                    cmargins    : '-1 4 -1 -1',
                    width       : 200,
                    minSize     : 100,
                    maxSize     : 300,
                    collapsible : true,
                    split       : true,   
                    rootVisible:false,
                    lines:true,
                    autoScroll:true,
                    tools:[{
                        id:'minus',
                        qtip: 'Alle Knoten schließen',
                        handler: function(event, toolEl, panel){
                            panel.collapseAll();                                            
                        }
                    },{
                        id:'plus',
                        qtip: 'Alle Knoten öffnen',
                        handler: function(event, toolEl, panel){
                            panel.expandAll();                                            
                        }
                    }],
                    root: new Ext.tree.AsyncTreeNode({
                        text:'Online',
                        children:[treeNodes.manageUser = {
                            text:'<b>Benutzerverwaltung</b>',                        
                            expanded:true,
                            children:[{
                                text:'Neuen Benutzer anlegen',
                                id:'hhhasfd',
                                iconCls:'add',
                                leaf:true
                            },{
                                text:'&Uuml;bersicht',
                                iconCls:'application_form_magnify',
                                leaf:true
                            }]
                        },{
                            text:'<b>Rollen und Rechte</b>',
                            expanded:true,
                            children:[{
                                text:'Neue Rolle anlegen',
                                iconCls:'add',
                                leaf:true
                            },{
                                text:'&Uuml;bersicht',
                                iconCls:'application_form_magnify',
                                leaf:true
                            }]
                        },{
                            text:'<b>Design</b>',
                            expanded:true,
                            children:[treeNodes.design = new Ext.tree.TreeNode({
                                 text    : '&Uuml;bersicht'
                                ,iconCls : 'application_form_magnify'
                                ,leaf    : true
                                ,listeners : {
                                    click:function(){
                                        return; 
                                    }
                                }                            
                            })]
                        },{
                            text:'<b>Animation</b>',
                            expanded:true,
                            children:[{
                                text:'Neuen Animateur anlegen',
                                iconCls:'add',
                                leaf:true
                            },{
                                text:'&Uuml;bersicht',
                                iconCls:'application_form_magnify',
                                leaf:true
                            }]
                        },{
                            text:'<b>K&uuml;chenliste</b>',
                            expanded:true,
                            children:[{
                                text:'Neues Gericht anlegen',
                                iconCls:'add',
                                leaf:true
                            },{
                                text:'&Uuml;bersicht',
                                iconCls:'application_form_magnify',
                                leaf:true
                            }]
                        },{
                            text:'<b>Statistiken</b>',
                            expanded:true,
                            children:[{
                                text:'Auslastung der Pl&auml;tze',
                                iconCls:'application_form_magnify',
                                leaf:true
                            },{
                                text:'Buchungen pro Monat',
                                iconCls:'application_form_magnify',
                                leaf:true
                            },{
                                text:'Neukunden pro Monat',
                                iconCls:'application_form_magnify',
                                leaf:true
                            }]
                        }]
                    })
                })
    in other functions i tried things like:
    Code:
    adminTree.getSelectionModel().select(treeNodes.design);
    treeNodes.design.select();
    i hope somebody has an idea!


    thanks, tobiu

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    ok, an update, which does not make things clearer for me:

    Code:
    adminTree.getSelectionModel().select(treeNodes.design);
    does clear other selections visually. after using that function, the function:

    Code:
    adminTree.getSelectionModel().isSelected(treeNodes.design)
    returns true.
    when clicking a node with the mouse, the clicked node gets a light-blue background-color. with my call, all nodes are visually unselected afterwards...


    any ideas? thanks, tobiu

  3. #3
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    has really nobody else problems with this?

  4. #4
    Ext User
    Join Date
    Oct 2008
    Posts
    4
    Vote Rating
    0
    airoctive is on a distinguished road

      0  

    Default


    I have the same issue trying to select a node. Wow I can't believe I have to consult the forums to find an answer to this. Anyone?

  5. #5
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    19
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    Try to work with node ids.
    Code:
    		text:'&Uuml;bersicht',
    		iconCls:'application_form_magnify',
    		leaf:true
    	}]
    },{
    	text:'<b>Design</b>',
    	expanded:true,
    	children:[{
    		id: 'design',
    		text: '&Uuml;bersicht',
    		iconCls: 'application_form_magnify',
    		leaf: true,
    		listeners : {
    			click:function(){
    				return;
    			}
    		}
    	}]
    },{
    	text:'<b>Animation</b>',
    	expanded:true,
    	children:[{
    		text:'Neuen Animateur anlegen',
    and

    Code:
    adminTree.getNodeById('design').select();
    worked for me.
    On AsyncTreeNodes make sure that the node has been loaded before you select it.

    Further I would use
    HTML Code:
    <style type="text/css">
    .x-tree-node .x-tree-node-expanded,
    .x-tree-node .x-tree-node-collapsed {
    	font-weight: bold;
    }
    </style>
    instead of
    Code:
    text:'<b>Design</b>'
    but that's not the problem...
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by makana View Post
    On AsyncTreeNodes make sure that the node has been loaded before you select it.
    That is why I would recommend using:
    Code:
    node.ensureVisible(function(){
    	node.select();
    });

  7. #7
    Sencha User
    Join Date
    Dec 2010
    Posts
    14
    Vote Rating
    0
    kingk is on a distinguished road

      0  

    Default Solved?

    Solved?


    Hi all,
    i see this thread is more then four years old, but did anyone solve it?

    My problem is, my "trees" always worked fine, but suddenly i have issues if the name of the tree-node contains stuff like "&uuml;" - and no, i'm not using an "ü", i'm really using "&uuml;" instead. As soon as there is a "&uuml;" in the name the click ins't recogniced any more. The node acts like a ordinary text.