Ext.TreePanel

     原文地址 点这里
 
js代码:

ext.onready(function(){　 varmytree=newext.tree.treepanel({　　　el:"container",//应用到的html元素id　　　animate:true,//以动画形式伸展,收缩子节点　　　title:"extjs静态树",　　　collapsible:true,　　　rootvisible:true,//是否显示根节点　　　autoscroll:true,　　　autoheight:true,　　　width:150,　　　lines:true,//节点之间连接的横竖线　　　loader:newext.tree.treeloader(),//　　　root:newext.tree.asynctreenode({　　　　　id:"root",　　　　　text:"根节点",//节点名称　　　　　expanded:true,//展开　　　　　leaf:false,//是否为叶子节点　　　　　children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]　　　})　});　mytree.render();//不要忘记render()下,不然不显示哦})

 
<span style="color: #ff00ff;">treepanel基本配置参数:</span>
<span style="font-family: courier new;">//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//小箭头</span>
 
 
<span style="color: #ff00ff;">treenode的基本配置参数:</span>
 <span style="font-family: courier new;">//treenode常用配置参数
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hreftarget:"mainframe"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要ext.quicktips.init();下
7.text:"节点文本"//节点文本
8.singleclickexpand:true//用单击文本展开,默认为双击</span>
 
<span style="font-family: courier new;">js代码：</span>

ext.onready(function(){　　ext.quicktips.init();　varmytree=newext.tree.treepanel({　　　el:"container",　　　animate:true,　　　title:"extjs静态树",　　　collapsible:true,　　　enabledd:true,　　　enabledrag:true,　　　rootvisible:true,　　　autoscroll:true,　　　autoheight:true,　　　width:150,　　　lines:true　});　　//根节点　varroot=newext.tree.treenode({　　　id:"root",　　　text:"控制面板",　　　expanded:true　});　　//第一个子节点及其子节点　varsub1=newext.tree.treenode({　　　id:"news",　　　text:"新闻管理",　　　singleclickexpand:true　});　sub1.appendchild(newext.tree.treenode({　　　id:"addnews",　　　text:"添加新闻",　　　href:"http://www.baidu.com",　　　hreftarget:"mainframe",　　　qtip:"打开百度",　　　listeners:{//监听　　　　　"click":function(node,e){　　　　　　　　　　　alert(node.text)　　　　　　　　　}　　　}　}));　sub1.appendchild(newext.tree.treenode({　　　id:"editnews",　　　text:"编辑新闻"　}));　sub1.appendchild(newext.tree.treenode({　　　id:"delnews",　　　text:"删除新闻"　}));　　root.appendchild(sub1);　　root.appendchild(newext.tree.treenode({　　　　id:"sys",　　　　text:"系统设置"　}));　　mytree.setrootnode(root);//设置根节点　　mytree.render();//不要忘记render()下,不然不显示哦})

 
 
html代码:

<bodystyle="margin:10px;">　　<divid="container">　　</div>　　<iframename="mainframe"id="mainframe"height="100px"width="200px"src="jstest.htm"></iframe></body>