Ext.js树结构

1.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'
		]
	});
})

　　

2.app/view/deptView

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'
//	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		
//			}]
//		}]
//	}
});

　　3.app/store/deptStore

 1 Ext.define("AM.store.deptStore",{
 2     extend:'Ext.data.TreeStore',
 3     defaultRoodId:'root',
 4     proxy:{
 5         type:'ajax',
 6         url:'/extjs/extjs!getDept.action',
 7         reader:'json',
 8         autoLoad:true
 9     }
10 });

4.app/controller/deptController

 1 Ext.define('AM.controller.deptController', {
 2     extend: 'Ext.app.Controller',
 3     init:function(){
 4         this.control({
 5             "deptTree button[id=allopen]":{
 6                 click:function(b,e){
 7                     var tree = b.ownerCt.ownerCt;
 8                     tree.expandAll();
 9                 }            
10             },            
11             "deptTree button[id=allclose]":{
12                 click:function(b,e){
13                     var tree = b.ownerCt.ownerCt;
14                     tree.collapseAll();
15                 }            
16             },
17             "deptTree button[id=add]":{
18                 click:function(b,e){
19                     var tree = b.ownerCt.ownerCt;
20                     var nodes = tree.getChecked();
21                     if(nodes.length == 1){
22                         var node = nodes[0];
23                         node.appendChild({
24                             checked:true,
25                             text:'技术架构组',
26                             id : '0103',
27                             leaf:true        
28                         });
29                     }else{
30                         alert("请您选择一个节点");
31                     }
32                 }
33             },
34             "deptTree":{
35                 itemclick:function(tree,record,item,index,e,options){
36                     alert(record.get('id'));
37                 }
38             }
39         });
40     },
41     views:[
42         'deptView'
43     ],
44     stores :[
45         'deptStore'
46     ],
47     models :[
48     ] 
49 });