Extjs树控件

rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/resources/css/ext-all.css" /> <script type="text/javascript" src="http://www.extjs.com/deploy/dev/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="http://www.extjs.com/deploy/dev/ext-all.js"></script> <script language="javascript"> Ext.onReady(function(){ var mytree=new Ext.tree.TreePanel({ el:"container",//应用到的html元素id animate:true,//以动画形式伸展,收缩子节点 title:"人月神话", collapsible:true, rootVisible:true,//是否显示根节点 autoScroll:false, autoHeight:true, width:300, lines:true,//节点之间连接的横竖线 loader:new Ext.tree.TreeLoader(),// root:new Ext.tree.AsyncTreeNode({ id:"root", text:"分类列表",//节点名称 expanded:true,//展开 leaf:false,//是否为叶子节点 children: [ { id:'ywrj', text:'业务软件', children: [ { id:'PowerHR', text:'人力资源管理系统', leaf:true, listeners:{ "click":function(node,e){ alert(node.text); } } }, { id:'sc', text:'销售业绩统计', leaf:true, listeners:{ "click":function(node,e){ alert(node.text); } } } ] }, { id:'child2', text:'硬件', children: [ { id:'tyy', text:'投影仪', children: [ { id:'tyy1', text:'EMP-1', leaf:true, listeners:{ "click":function(node,e){ alert(node.text); } } }, { id:'TYY2', text:'EMP-2', leaf:true, listeners:{ "click":function(node,e){ alert(node.text); } } } ] }, /*******************************************************/ { id:'printer', text:'打印机', children: [ { id:'qd1', text:'HP-1', leaf:true, listeners:{ "click":function(node,e){ alert(node.text); } } }, { id:'qd2', text:'HP-2', leaf:true, listeners:{ "click":function(node,e){ alert(node.text+"人月神话"); } } } ] } ] } ] }) }); mytree.render(); }) </script>

显示效果如下：        

树也是一个panel，可以布局在页面的任何位置。最常见的是布局在west，做功能导航。