进阶篇(7)-ExtJs中的TreePanel详解2.pptVIP

总结 第一个静态树--最简单的树 通过TreeNode自定义静态树 用TreeLoader加载数据生成树 解决IE下非正常加载节点问题 使用TreeNodeUI 带有checkbox的树 编辑树 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,//节点之间连接的横竖线??????? 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()下,否则不显示 TreePanel基本配置参数: //TreePanel配置参数1.animate:true//展开,收缩动画,false时,则没有动画效果2.autoHeight:true//自动高度,默认为false3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable4.enableDD: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:true//小箭头 通过TreeNode自定义静态树 TreeNode的基本配置参数: //TreeNode常用配置参数1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框2.expanded:fasle//展开,默认不展开3.href:http:///节点的链接地址4.hrefTarget:mainFrame//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开5.leaf:true//叶子节点,看情况设置6.qtip:提示//提示信息,不过要?Ext.QuickTips.init();下7.text:节点文本//节点文本8.singleClickExpand:true//用单击文本展开,默认为双击 html代码: body?style=margin:10px;????div?id=container/div ????iframe?name=mainFrame?id=mainFrame?height=100px?width=200px?src=jstest.htm/iframe /body js代码: Ext.onReady(function(){????Ext.QuickTips.init();???var?mytree=new?Ext.tree.TreePanel({???????el:container,???????animate:true,???????title:Extjs静态树,???????collapsible:true,???????enableDD:true,???????enableDrag:true,???????rootVisible:true,???????a