tree demo

by spydmobile

HTML

<!doctype html>
<html>
<head>
<title>MessageBox</title>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script> 
<link href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
</head>
<body>
  
  <div id="toolbar" />
  
  <div id="btn" />
</body>
</html>

JavaScript

Ext.onReady( function() {
    var viewport = new Ext.tree.TreePanel( {
        title : "tree demo",
        width : 200,
        height : 500,
        rootVisible : true, 
        root : new Ext.tree.AsyncTreeNode( {
            text : 'tree root',
            id:'r',
 
            children : [ {
                text : 'parent1',
                id:'c1',
                children : [ {
                    text : 'p1child1',
                    id:'c1c1',
                    leaf : true
                    
                }, {
                    text : 'p1child2',
                    myid:'c1c2',
                    leaf : true
                } ]
            }, {
                text : 'parent2',
                id:'c2',
                children : [ {
                    text : 'p2child1',
                    leaf : true,
                    id:'c2c1'
                }, {
                    text : 'p2child1',
                    leaf : true,
                    id:'c2c2'
                } ]
            } ]
        })
 
    });
 
    viewport.render('toolbar');
    viewport.doLayout();
    
    var btn=new Ext.Button({
        renderTo:"btn",
        id:'test',
        text:'test',
        handler:function(){

            viewport.selectPath('/r/c2/c2c1');
            
            alert(viewport.root.findChild( 'id', 'c1c1', true ));
            
            viewport.expandPath('/r/c1/c1c1');
            
            alert(viewport.root.findChild( 'id', 'c1c1', true ));
            viewport.root.findChild( 'id', 'c1c1', true ).select();
            alert("wait3");
            viewport.root.findChild( 'myid', 'c1c2', true ).select();
        }
    });

});