学步园

1.树形的拖拽
Ext.tree.ViewDDPlugin
alias: 'plugin.treeviewdragdrop',
需要
viewConfig:{
plugins :{
ptype:'treeviewdragdrop'
}
},
事件
listeners: {
        drop: function(node, data, dropRec, dropPosition) {
        },
        beforedrop:function(node,data,overModel,dropPosition,dropFunction,options ){
        }
    }
2.模拟拷贝和黏贴
3.删除操作
4.多列树
5.网友要求

单击树形根节点子节点也被选中

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

deptControl.js

Ext.define('AM.controller.deptController', {
    extend: 'Ext.app.Controller',
	init:function(){
		this.control({
			'deptTree':{
				checkchange : function(node,checked,options){  
					if(node.data.leaf == false){//不是叶子    单击后子节点全部选中
						if(checked){
							//打开节点
							node.expand();
							//遍历孩子
							node.eachChild(function(n){
								n.data.checked = true;
								n.updateInfo({checked:true});
							})
						}else{       //不是叶子    单击后子节点选中全部取消
							node.expand();
							node.eachChild(function(n){
								n.data.checked = false;
								n.updateInfo({checked:false});
							})							
						}
					}else{//单击叶子
						if(!checked){
							node.parentNode.data.checked = false;
							node.parentNode.updateInfo({checked:false});
						}
					}
				}
			},
			'deptTree button[id=delete]':{           //删除
				click:function(b,e){
					var tree = b.ownerCt.ownerCt;
					var nodes = tree.getChecked();
					for(i=0;i<nodes.length;i++){
						nodes[i].remove(true);
					}
				}
			},
			'deptTree button[id=copy]':{           //实现copy的黏贴板
				click:function(b,e){
					var tree = b.ownerCt.ownerCt;
					//得到数据集合
					var nodes = tree.getChecked();
					if(nodes.length>0){
						//把数据放到剪切板中
						tree.setCopyNodes(Ext.clone(nodes));      //数据设置到剪切板中
						alert("拷贝"+nodes.length+"个节点");
						for(i=0;i<nodes.length;i++){
							nodes[i].data.checked = false;
							nodes[i].updateInfo();
						}
					}
				}					
			},
			"deptTree button[id=paste]":{             //s实现黏贴
				click:function(b,e){
					var tree = b.ownerCt.ownerCt;
					//被追加孩子的节点集合
					var checkednodes = tree.getChecked();     //从剪切板中拿数据
					if(checkednodes.length == 1){
						//被追加孩子的节点
						var node = checkednodes[0];
						//去剪切板中取数据
						var nodes = tree.getCopyNodes();
						if(nodes.length>0){
							for(i=0;i<nodes.length;i++){
								var n = nodes[i].data;
								n['id'] = n['id']+'1';
								node.appendChild(n);
							}
						}
					}else{
						alert("剪切板中无数据或者你没有选择要追加孩子的节点");
					}
				}				
			},
			"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 :[
		'deptModel'
	] 
});

deptModel.js

Ext.define('AM.model.deptModel', {
    extend: 'Ext.data.Model',
	fields: [
		{name: 'text',  type: 'string',sortable : true},
	    {name: 'id',   type: 'string',sortable : true}
	]
});

deptStore.js

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

deptView.js

Ext.define("AM.view.deptView",{
	extend:'Ext.tree.Panel',
	alias: 'widget.deptTree',
	title : '部门树形',
	width : 350,
	height: 300,
	padding : '5 3 3 10',
	rootVisible : false,//控制显隐的属性
	config:{
		copyNodes:''//他充当剪切板的作用
	},
	columns:[                      //配置列模式
		{
			xtype:'treecolumn',
			text:'text',
			writh:150,
			dataIndex:'text'
		},{
			text:'info',
			dataIndex:'id'
		}
	],
	viewConfig:{
		plugins :{
			ptype:'treeviewdragdrop',  //这个地方时ptype,tree中的拖放
			appendOnly : true    //加上这个之后，叶子节点才可以拖放成功，不然可以拖但是拖放不成功。这只是前台拖拽，后台数据没有拖放成功
		},
		listeners:{
			drop:function( node,  data,  overModel,  dropPosition,  options){
				//ajax的操作把数据同步到后台数据库
				alert("把: "+data.records[0].get('text')+" 移动到: "+overModel.get('text'));			
			},
			beforedrop:function( node,  data,  overModel,  dropPosition,  dropFunction,  options){    //落下之前触发，没有意义
//				if(overModel.get("leaf")){
//					overModel.set('leaf',false)
//				}
			}
		}
	},	
	dockedItems:[{
		xtype:'toolbar',
		dock:'left',
		items:[
			{xtype:'button',text:'add',id:'add'},
			{xtype:'button',text:'copy',id:'copy'},
			{xtype:'button',text:'delete',id:'delete'},
			{xtype:'button',text:'paste',id:'paste'}
		]
	},{
		xtype:'toolbar',
		items:[{
			xtype:'button',
			id:'allopen',
			text:'展开全部'
		},{
			xtype:'button',
			id:'allclose',
			text:'收起全部'
		}]
	}],
	store:'deptStore'
});