extjs实现treepanel到panel布局的拖拽




一下是树的实现代码：

var mytree=new Ext.tree.TreePanel({
			
		   　animate:true,// 以动画形式伸展,收缩子节点
		   enableDD: true,
		   ddGroup:'mygroup',
		   rootVisible:true,// 是否显示根节点
		   autoScroll:true,
		   bodyStyle: 'background-color: #dfe8f6;',
		   height:300,
		   width:180,
		   renderTo : 'treePanel',
		   lines:true,// 节点之间连接的横竖线
		   dataUrl:getWebRoot()+"/jsp/splitScreen/getAppuserStations.faces",
		   root:{
				nodeType: 'async',
				draggable: false,
				expand:true,
		　　　id:"root",
		   　　  text:"台站功能"
			}
		    
	});

以下是panel布局的实现代码：

var tablePanel = new Ext.Panel({
		
		id: 'splitScreenPanel',
		border: false,
		renderTo:'tablePanel',
		layout: {
			type: 'vbox',
			align: 'stretch'
		},
		defaults: {
			bodyStyle: 'background-color: #dfe8f6;'
			
		},
		frame:true,
		height:300,
		width:300,
		items: [{
			flex:0.3,
			layout: {
				type: 'hbox',
				align: 'stretch'
			},
			defaults: {
				frame:true
			},	
			items:[myForm]
			},{
			flex: 1,
			layout: {
				type: 'hbox',
				align: 'stretch'
			},
			margins: '0 0 5 0',
			defaults: {
				ddGroup: 'mygroup',
				tools:getTools,
				listeners: {
					render:renderHander
				},	
				frame:true
			},
			items: [{
				id: 'Screen1',
				title: '一',
				flex: 1,
				margins: '0 5 0 0',
				html : "<div id='div1'></div>"
			}, {
				id: 'Screen2',
				title: '二',
				flex: 1,
				html : "<div id='div2'></div>"
			}]
		}]
	});
	if(splitNum==4){
		tablePanel.add({
			flex: 1,
			layout: {
				type: 'hbox',
				align: 'stretch'
			},
			defaults: {
				ddGroup: 'mygroup',
				tools:getTools,
				listeners: {
					render:renderHander
				},	
				frame:true
			},
			items: [{
				id: 'Screen4',
				title: '三',
				flex: 1,
				margins: '0 5 2 0',
				html : "<div id='div4'></div>"
			}, {
				id: 'Screen5',
				title: '四',
				flex: 1,
				margins: '0 0 2 0',
				html : "<div id='div5'></div>"
			}]
		});
	}else{
		tablePanel.add({
				flex: 1,
				layout: {
				type: 'hbox',
				align: 'stretch'
			},
			defaults: {
				ddGroup: 'mygroup',
				tools:getTools,
				listeners: {
				render:renderHander
			},	
			frame:true
			},
			items: [{
				id: 'Screen3',
				title: '三',
				flex: 1,
				margins: '0 0 2 0',
				html : "<div id='div3'></div>"
			}]
		});
	}
	tablePanel.doLayout();

动态实现了分几块。
分屏上的按钮：

var getTools= [{
				id: 'search',
				qtip: '编辑',
				handler: function(event, toolEl, panel) {
										searchConditionWin.show();	
				}	
			},{	id: 'close',
				qtip: '删除',
				handler: function(event, toolEl, panel) {
					getDefault(panel.id);
			    }
			 }
		];

拖动处理函数：

var renderHander = function(cmp) {
		new Ext.dd.DropTarget(cmp.body.dom, {
			ddGroup: 'mygroup',
			notifyDrop: function(ddSource, e, data) {
				if (!data.node.hasChildNodes()) {
					cmp.setTitle(data.node.parentNode.attributes.text);
									}
				return true;
			}
		});
	};

主要实现就是把要拖动的东西放到一个组里，然后加上一个拖动处理函数