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

 Ext.define("AM.store.deptStore",{
     extend:'Ext.data.TreeStore',
     defaultRoodId:'root',
     proxy:{
         type:'ajax',
         url:'/extjs/extjs!getDept.action',
         reader:'json',
         autoLoad:true
     }
 });

4.app/controller/deptController

 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 == ){
                         var node = nodes[];
                         node.appendChild({
                             checked:true,
                             text:'技术架构组',
                             id : '',
                             leaf:true
                         });
                     }else{
                         alert("请您选择一个节点");
                     }
                 }
             },
             "deptTree":{
                 itemclick:function(tree,record,item,index,e,options){
                     alert(record.get('id'));
                 }
             }
         });
     },
     views:[
         'deptView'
     ],
     stores :[
         'deptStore'
     ],
     models :[
     ]
 });