ExtJs2.0学习系列(12)--Ext.TreePanel之第一式

2、Ext.onReady(function(){  var mytree=new Ext.tree.TreePanel({       el:"container",//应用到的html元素id       animate:true,//以动画形式伸展,收缩子节点       title:"Extjs静态树",       collapsible:true,       rootVisible:true,//是否显示根节点       autoScroll:true,       autoHeight:t

3、rue,       width:150,       lines:true,//节点之间连接的横竖线       loader:new Ext.tree.TreeLoader(),//       root:new Ext.tree.AsyncTreeNode({           id:"root",           text:"根节点",//节点名称           expanded:true,//展开           leaf:false,//是否为叶子节点           c

4、hildren:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]       })   });   mytree.render();//不要忘记render()下,不然不显示哦})在这里,我谈一个问题:/*只有loader和AsyncTreeNode才能使children显示出来,为什么?*/    我在api中没有找到答案,甚至连children都没有看到,但是在原代码中,我们可以确定这个事实,只有l

5、oader实例后,AsyncTreeNode的children才会被递归的添加(appendChild)到它的父节点下,所以象示例中的代码,一定要注意条件.    其他的子节点问题不受此限制!TreePanel基本配置参数://TreePanel配置参数1.animate:true//展开,收缩动画,false时,则没有动画效果2.autoHeight:true//自动高度,默认为false3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable4.enab

6、leDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)5.enableDrop:true//仅仅drop6.lines:true//节点间的虚线条7.loader:Ext.tree.TreeLoader//加载节点数据8.root:Ext.tree.TreeNode//根节点9.rootVisible:false//false不显示根节点,默认为true10.trackMouseOver:false//false则mouseover无效果11.useArrows:

7、true//小箭头2.通过TreeNode自定义静态树例子1其实很受数据的限制，必须先要准备好数组对象，我们用另外的方式再写个例子，在写例子前，我们来学习下TreeNode的基本配置参数://TreeNode常用配置参数1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框2.expanded:fasle//展开,默认不展开3.href:"http:/www.cnblogs.com"//节点的链接地址4.hrefTarget:

8、"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开5.leaf:true//叶子节点,看情况设置6.qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下7.text:"节点文本"//节点文本8.singleClickExpand:true//用单击文本展开,默认为双击效果图:html代码: