extjs兑现treepanel到panel布局的拖拽

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:"台站功能"}    });

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