EXT tree 树入门学习

学习EXT中tree的入门笔记。
EXT代码:
Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({el:'test'});            //建造树    test与页面div的id对应  el 为EL,而不是E一
    var root = new Ext.tree.TreeNode({text:'我是祖先'});        //根节点
    var node1 = new Ext.tree.TreeNode({text:'我是爷爷'});
    var node2 = new Ext.tree.TreeNode({text:'我是爷爷的兄弟'});
    var node3 = new Ext.tree.TreeNode({text:'我是父亲'});    
    var node4 = new Ext.tree.TreeNode({text:'我是孙子'});    
    node3.appendChild(node4);        //添加相应的子节点
    root.appendChild(node1); 
    node1.appendChild(node3);
    root.appendChild(node2);   
    tree.setRootNode(root);         //设置根节点
    tree.render();
   root.expand(true,true);        //是否自动展开,不需要点击子节点
});


页面代码:
    <body>
        <div id="test" style="height:300px;"></div>
        //一定要设置高度,要然看不到效果 style="height:300px"
    </body>


效果如下:
EXT tree 树入门学习

你可能感兴趣的:(ext)