Ext json tree

 

  树的理解： 

 

<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
    }]
}]