Think of Ext2.0 (3)

xiang588

5.         Tree

直接使用Ext例子
Tree所需要的json字符串

[{id:300,text:'01',cls:'task-folder',children:[{id:'2',text:'01-01',leaf:true,cls:'task'},{id:'3',text:'01-02',children:[{id:'4',text:'01-02-01',leaf:true},{id:'5',text:'01-02-02',leaf:true}]},{id:'6',text:'01-03',leaf:true}]},{id:'7',text:'02',leaf:true}] 

text”-->显示的文本
"id"-->id值 ，单击事件时可以使用
“leaf”-->Boolean值，如果“叶子”是真的话，则不能包含子节点Children nodes
"cls"-->选用的样式，通常在这里选定图标
”href“-->指定的url，还有一个”hrefTarget“的属性
children –〉表示子节点信息
<span style="" /><strong /> 
在Record.css中自定了两个定义的css，task和task-folder 

.task .x-tree-node-icon {

<span style="" />    background-image:url(icons/cog.png) ;

}

.task-folder .x-tree-node-icon{

    background-image:url(icons/folder_go.png) !important;

} 
Json字符串中就使用了这个值 
Tree使用如下，相对比较简单<span style="" />
<div style="padding: 4px 5.4pt; width: 95%;">    var Tree = Ext.tree;
    
    var tree = new Tree.TreePanel(...{
        el:'tree-div',
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader(...{
            dataUrl:'record.jsp'
        })
    });

    // set the root node
    var root = new Tree.AsyncTreeNode(...{
        text: 'Ext JS',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render();
    root.expand();