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