树的理解:
<div id="tree-div"></div> </body> <script type="text/javascript"> Ext.onReady(function(){ var tree = new Ext.tree.TreePanel({ renderTo:'tree-div', //树放在 页面的那个元素上 title:'tree', height:500, width:300, collapsed:false, animate:true, //展开的时候是否 显示动画 useArrows:true, //是否用箭头的 下拉 enableDD:true, //是否可以拖动 frame:true, //填充 面板背景颜色 autoScroll: true, //树超过容器 是否有滚动条 containerScroll:true, rootVisible:true, //是否显示根节点 root:{ nodeType:'async', text:'根节点', //根显示的名称 id:'root', expended:true }, // auto create TreeLoader dataUrl:'/test/tree/data/check-nodes.json', listeners:{ 'checkchange':function( node , checked ){ //被选中的时候 if(checked ){ //alert(node.text); //node.getUI().addClass('complete') }else{ //node.getUI().removeClass('complete'); } }, 'click':function(node ,event ){ //alert(node.text); //取出节点显示的名称 //node.setText('名称改变'); //改变节点显示的名称 //node.expand(true);//将节点展开 动作带有动画 Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + node.attributes.text + '"'); //弹出框的使用 } }, tbar:new Ext.Toolbar({ items:[{ text:'工具栏' }] }), bbar:new Ext.Toolbar({ items:[{ text:'状态栏' }] }), fbar: [{ text: 'fbar Left' },'->',{ text: 'fbar Right' }] }); tree.getRootNode().expand( true ); //树初始化的时候完全展开 }); </script>
数据:
[{ text: 'To Do', cls: 'folder', children: [{ text: 'Go jogging', leaf: true, checked: false },{ text: 'Take a nap', leaf: true, checked: false },{ text: 'Climb Everest', leaf: true, checked: false }] },{ text: 'Grocery List', cls: 'folder', children: [{ text: 'Bananas', leaf: true, checked: false },{ text: 'Milk', leaf: true, checked: false },{ text: 'Cereal', leaf: true, checked: false },{ text: 'Energy foods', cls: 'folder', children: [{ text: 'Coffee', leaf: true, checked: false },{ text: 'Red Bull', leaf: true, checked: false }] }] },{ text: 'Remodel Project', cls: 'folder', children: [{ text: 'Finish the budget', leaf: true, checked: false },{ text: 'Call contractors', leaf: true, checked: false },{ text: 'Choose design', leaf: true, checked: false }] }]