Ext.tree.TreePanel(二)

树是由一系列具有层次结构的节点组成，不管是根节点，还是叶子节点，或者是非叶子节点，他们都是节点，区别在于与其他节点的关系。

所以，要创建一棵树，只需要创建一系列节点，并建立各节点的关系就可以了。创建一个节点，我们使用下面的语法：

var node   = new Ext.tree.TreeNode({text: "节点显示文本"})

一般来说，构造一棵树，完全可以通过添加子节点这个操作来完成。添加子节点的方法是appendChild(节点对象或者节点对象数组)，

通过该方法可以为节点添加一个子节点，也可以为节点一次添加多个子节点，参数为节点数组时，该数组中的所有节点都会成为子节点。

node_1_1.appendChild([node_1_1_1,node_1_1_2,node_1_1_3]);

上面的代码表示将 node_1_1_1, node_1_1_2, node_1_1_3 作为子节点添加到node_1_1中。

最后，要特别为TreePanel指定一个根节点，调用 TreePanel的 setRootNode(root)方法完成。

最简单的TreePanel

Ext.onReady(function(){

Ext.QuickTips.init();

//定义根节点
var root = new Ext.tree.TreeNode({text: "根节点", iconCls:"me-iconCls"});
var level_1_1 = new Ext.tree.TreeNode({text: "一级_1", iconCls:"me-iconCls"});
var level_1_2 = new Ext.tree.TreeNode({text: "一级_2", iconCls:"me-iconCls"});

var level_1_1_1 = new Ext.tree.TreeNode({text: "二级_1", iconCls:"me-iconCls"});
var level_1_1_2 = new Ext.tree.TreeNode({text: "二级_2", iconCls:"me-iconCls"});
var level_1_1_3 = new Ext.tree.TreeNode({text: "二级_3", iconCls:"me-iconCls"});

var  level_1_1_3_1  =  new  Ext.tree.TreeNode({text: " 二 级 _3_1", iconCls:"me-iconCls"});
var  level_1_1_3_2  =  new  Ext.tree.TreeNode({text: " 二 级 _3_2", iconCls:"me-iconCls"});
var  level_1_1_3_3  =  new  Ext.tree.TreeNode({text: " 二 级 _3_3", iconCls:"me-iconCls"});

level_1_1.appendChild([level_1_1_1, level_1_1_2, level_1_1_3]);
level_1_1_3.appendChild([level_1_1_3_1,level_1_1_3_2,level_1_1_3_3]);

root.appendChild([level_1_1, level_1_2]);

//定义TreePanel
var tree = new Ext.tree.TreePanel({
width: 200,
height: 300,
title: "树",
lines: true
});
tree.setRootNode(root);
tree.render("a");
tree.expandAll();
})