ExtJs2.0学习系列（12）--Ext.TreePanel之第一式

ExtJs2.0学习系列（12）--Ext.TreePanel之第一式2010-04-21 博客园谦虚的天下今天开始,我们就开始一起学习TreePanel了，道个歉，的代码很乱阿.

我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰！

TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列（2）--Ext.Panel

1.第一个静态树--最简单的树

效果图:

html代码:

<div id="container">
  </div>

js代码:

Ext.onReady（function（）{
 var mytree=new Ext.tree.TreePanel（{
 el:"container",//应用到的html元素id
 animate:true,//以动画形式伸展,收缩子节点
 title:"Extjs静态树",
 collapsible:true,
 rootVisible:true,//是否显示根节点
 autoScroll:true,
 autoHeight:true,
 width:150,
 lines:true,//节点之间连接的横竖线
 loader:new Ext.tree.TreeLoader（）,//
 root:new Ext.tree.AsyncTreeNode（{
 id:"root",
 text:"根节点",//节点名称
 expanded:true,//展开
 leaf:false,//是否为叶子节点
 children:[{text:"子节点一",leaf:true},{id:"child2",text:"子节点二",children:[{text:"111"}]}]
 }）
 }）;
 mytree.render（）;//不要忘记render（）下,不然不显示哦
}）

在这里,我谈一个问题:

/*只有loader和AsyncTreeNode才能使children显示出来,为什么？*/
我在api中没有找到答案,甚至连children都没有看到,但是在原代码中,我们可以确定这个事实,只有loader实例后,AsyncTreeNode的children才会被递归的添加（appendChild）到它的父节点下,所以象示例中的代码,一定要注意条件.
其他的子节点问题不受此限制！

TreePanel基本配置参数:

//TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag（效果上是）,注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构（drap和drop）
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头