extjs4.0的高级组件tree上

类结构
Ext.panel.Panel
Ext.panel.Table
Ext.tree.Panel --- 他是和grid完全一样的
1.快速实现一个DEMO
主要配置项
title 标题
width 宽
height 高
renderTo 渲染到什么地方
root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
animate : Boolean 控制收起和展开是发有动画效果
store: store 数据集合
重要事件
itemclick
重要方法

2.Ext.data.TreeStore

app.js

Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.Loader.setConfig({
		enabled:true
	});
	Ext.application({
		name : 'AM',
		appFolder : "app",
		launch:function(){
	        Ext.create('Ext.container.Viewport', {
	        	layout:'auto',
	            items: {
	            	xtype: 'deptTree'
	            }
	        });
		},
		controllers:[
			'deptController'
		]
	});
})

deptController.js

Ext.define('AM.controller.deptController', {
    extend: 'Ext.app.Controller',
	init:function(){
		this.control({
			"deptTree button[id=allopen]":{
				click:function(b,e){
					var tree = b.ownerCt.ownerCt;
					tree.expandAll();
				}			
			},			
			"deptTree button[id=allclose]":{
				click:function(b,e){
					var tree = b.ownerCt.ownerCt;   //得到上层容器的上层节点
					tree.collapseAll();              //关闭所有
				}			
			},
			"deptTree button[id=add]":{
				click:function(b,e){
					var tree = b.ownerCt.ownerCt;
					var nodes = tree.getChecked();   //得到书上被选中的节点，返回的是一个数组
					if(nodes.length == 1){           //只让选中一个节点
						var node = nodes[0];         //因为只选中了一个节点，所以就是其本身nodes[0]
						node.appendChild({
							checked:true,
							text:'技术架构组',
							id : '0103',
							leaf:true		
						});
					}else{
						alert("请您选择一个节点");
					}
				}
			},
			"deptTree":{ //这个对象的方法，里面的参数itemclick:代表里面的每一个item单击触发的函数
				itemclick:function(tree,record,item,index,e,options){
					alert(record.get('id'));
				}
			}
		});
	},
	views:[              //在Control层必须加上views和stores这是将三者mvc层联合起来
		'deptView'
	],
	stores :[
		'deptStore'
	],
	models :[
	] 
});

3.deptStore.js

Ext.define("AM.store.deptStore",{
	extend:'Ext.data.TreeStore',
	defaultRoodId:'root',  //默认的根节点
	proxy:{
		type:'ajax',      //代理的方式
		url:'/extjs/extjs!getDept.action',
		reader:'json',    //代理读数据
		autoLoad:true  //是否要自动加载数据
	}
});
//树有两种加载的方式，1）同步加载2)异步加载
//同步加载的好处，可以做过滤，但是数据量大的时候读取数据太慢
//异步加载：加载速度快，一个一个.js加载。
//一般情况下，1）第一次读取加载后数据放到Java缓存中，服务器端缓存
//2)读进来，放到浏览器的缓存，甚至放到Session和LocalSession中代替cookie
//第二个人浏览网页的时候，就直接从Java缓存中取数据，传输过来后，放到前台缓存，第二次登陆的时候直接从客户端缓存

4)deptView.js

Ext.define("AM.view.deptView",{
	extend:'Ext.tree.Panel',
	alias: 'widget.deptTree',
	title : '部门树形',
	width : 250,
	height: 300,
	padding : '5 3 3 10',
	rootVisible : false,//控制显隐的属性
	dockedItems:[{
		xtype:'toolbar',
		dock:'left',
		//ui:'footer',
		items:[
			{xtype:'button',text:'add',id:'add'},
			{xtype:'button',text:'copy',id:'copy'},
			{xtype:'button',text:'delete',id:'delete'}
		]
	},{
		xtype:'toolbar',
		items:[{
			xtype:'button',
			id:'allopen',
			text:'展开全部'
		},{
			xtype:'button',
			id:'allclose',
			text:'收起全部'
		}]
	}],
	store:'deptStore'     //在View层必须将store引进来，不然没有数据
//	root:{
//		text:'root',
//		id : '0',
//		leaf:false,
//		children:[{
//			text:'技术部门',
//			checked:false,
//			id : '01',
//			leaf:false,
//			children:[{
//				checked:false,
//				text:'研发部',
//				id : '0101',
//				leaf:true		
//			},{
//				checked:false,
//				text:'实施部',
//				id : '0102',
//				leaf:true		
//			}]
//		},{
//			text:'后勤部门',
//			id : '02',
//			checked:false,
//			leaf:false,
//			children:[{
//				text:'人事部',
//				id : '0201',
//				checked:false,
//				leaf:true		
//			},{
//				text:'行政部',
//				id : '0202',
//				checked:false,
//				leaf:true		
//			}]
//		}]
//	}
});