关于Ext从Tree向Tree拖拽的问题将TreePanel的数据向GridPanel中拖拽的功能！Ext.onReady(function(){//创建
关于Ext从Tree向Tree拖拽的问题
将TreePanel的数据向GridPanel中拖拽的功能！
Ext.onReady(function(){//创建tree var tree = new Ext.tree.TreePanel({ddGroup : 'gridDDGroup',title:'全部的组织机构', animate:true, autoScroll:true, loader:new Ext.tree.TreeLoader({dataUrl: apppath+'/back/jsp/organise/findalldepartment.html',listeners:{ 'beforeload':function(treeloader,node){ this.baseParams.depparentid = node.attributes.depid; }}}),root: new Ext.tree.AsyncTreeNode({depid:157,iconCls:'depicon',text:'利星行集团',id:'157'}), enableDD:true, containerScroll: true, border : true, width : 250, height : 300, region : 'west', listeners:{'nodedrop':function(e){}}, dropConfig: {appendOnly:true}});tree.getRootNode().expand();//创建GridPanel var myData = [];var fields = [ {name: 'deplevel',mapping : 'deplevel'}, {name: 'depid' ,mapping : 'depid'}, {name: 'depparentid',mapping : 'depparentid'}, {name: 'depparentname',mapping : 'depparentname'}, {name: 'text', mapping:'depname'}]; // create the data store var gridStore = new Ext.data.JsonStore({ fields : fields, url : 'findallorgrolesbyroleid.html',baseParams : {ids:roledepid},autoLoad : true});window.delRecord = function(value){var _sel = grid.getSelectionModel().getSelections();gridStore.remove(_sel[0]);}// Column Model shortcut arrayvar cols = [{id : 'text', header: "单位名称", width: 100, sortable: true, dataIndex: 'text'},{header: "上级单位名称", width: 150, sortable: true, dataIndex: 'depparentname'},{header: "单位编号", width: 100, sortable: true, dataIndex: 'depid'},{header:"删除",width:100,sorttable:true,dataIndex:'depid',renderer:function(value){return '<a href="#" onClick="delRecord('+value+')">删除</a>';}}];// declare the source Grid var grid = new Ext.grid.GridPanel({ store : gridStore, columns : cols,enableDragDrop : true, stripeRows : true, autoExpandColumn : 'text', width : 325,region : 'center', title : '所管理的单位',selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) });//Simple 'border layout' panel to house both gridsvar displayPanel = new Ext.Panel({title:'"'+rolename+'"-主管部门管理',width : 650,height : 300,layout : 'border',tbar:['->','-',{text:'保存',iconCls:'db-icn-add',handler:function(){var _ids = new Array();for (var i = 0; i < grid.getStore().getCount(); i++) {var _rec = grid.getStore().getAt(i);_ids.push(_rec.get('depid'));}Ext.Ajax.request({url:'updateorgroles.html',params:{ids:_ids.join(','),rid:roleid},method:'POST',success:function(option,response){var _obj = Ext.decode(option.responseText);if(_obj.success){Ext.example.msg('系统提示', '保存管理单位权限成功! ');}else{Ext.example.msg('系统提示', '保存管理单位权限失败! ');}},failure:function(option,response){Ext.example.msg('系统提示', '保存管理单位权限失败! ');}});}},'-',{text:'树形列表方式查看',iconCls:'tree',handler:function(){var _form = document.createElement('form');document.body.appendChild(_form);_form.action = 'organiserolestree.jsp';_form.method = 'POST'var _ids = document.createElement('input');_ids.value = roledepid;_ids.name = 'depids';_ids.type = 'hidden';var _id = document.createElement('input');_id.value = roleid;_id.name = 'id';_id.type = 'hidden';var _name = document.createElement('input');_name.value = rolename;_name.name = 'name';_name.type = 'hidden';_form.appendChild(_ids);_form.appendChild(_id);_form.appendChild(_name);_form.submit();}},'-',{text:'返回权限管理',iconCls:'btn-login-reset',handler:function(){location.href = apppath+'/back/jsp/roles/roles.html';}}],items : [tree,grid],bbar : ['->', // Fill{text : '清除重新选择',iconCls: 'bin_empty',handler : function() {gridStore.loadData(myData);}},'-',{text : '刷新列表',iconCls: 'refresh',handler : function() {gridStore.reload();}}]});var _view = new Ext.Viewport({items:[displayPanel],renderTo:Ext.getBody(),layout:'fit'});// used to add records to the destination storesvar blankRecord = Ext.data.Record.create(fields);/***** Setup Drop Targets***/// This will make sure we only drop to the view containervar formPanelDropTargetEl = grid.body.dom;//var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {ddGroup : 'gridDDGroup',notifyEnter : function(ddSource, e, data) {grid.body.stopFx();grid.body.highlight();},notifyDrop : function(ddSource, e, data){//这里添加选择的数据将选择的数据make a record 加到数据集里面var node = ddSource.dragData.node;//判断是否选择了同一个部门,不允许选择同一个部门!var _ishave = false;for (var i = 0; i < grid.getStore().getCount(); i++) {var _rec = grid.getStore().getAt(i);if(_rec.get('depid')==node.attributes.depid){_ishave = true;break;}}if(_ishave){Ext.example.msg('系统提示', '您已经有管理这个" {0} "部门(单位)的权限了! ', node.attributes.text);return;}var Department = grid.getStore().recordType; var dep = new Department({ deplevel: node.attributes.deplevel, depid: node.attributes.depid, depparentid: node.attributes.depparentid, depparentname: node.attributes.depparentname, text: node.attributes.text }); gridStore.insert(0,dep);return(true);}});}); <script type="text/javascript">Ext.onReady(function(){var tree = new Ext.tree.TreePanel({title:'全部的组织机构', animate:true, el:"tree", autoScroll:true, loader: new Ext.tree.TreeLoader(), enableDD:true, containerScroll: true, border: true, width: 250, height: 300,ddGroup:"xx" //,dropConfig: {appendOnly:true} });var root = new Ext.tree.TreeNode({ text: 'Ext JS1', draggable:false, // disable root node dragging id:'src' }); var node1 = new Ext.tree.TreeNode({ text: 'Ext JS2', draggable:true, // disable root node dragging id:'src' }); var node2 = new Ext.tree.TreeNode({ text: 'Ext JS', draggable:true, // disable root node dragging id:'src' }); root.appendChild(node1);root.appendChild(node2); var grid = new Ext.grid.GridPanel( { store:new Ext.data.JsonStore({ data:[{id:'1',name:'aa'},{id:'2',name:'bb'}], autoLoad:true, fields:['id','name'] }),renderTo:"g",ddGroup:"xx", enableDragDrop: true, //draggable:true, cm:new Ext.grid.ColumnModel([{dataIndex:'id',header:'编号'},{dataIndex:'name',header:'名称'}]), width:250, height:300 } );tree.setRootNode(root);var f = Ext.data.Record.create([{name: 'id', type: 'string'},{name: 'name', type: 'name'}]);var dropZone = new Ext.dd.DropZone(grid.getEl(),{ ddGroup: 'xx', notifyDrop: function(source, e, obj) { var r = new f({"id":obj.node.id,"name":obj.node.text}); grid.store.add(r) } }); tree.render(); root.expand(true, true);}); </script> </head> <body> <div id="tree" style="height:300px;"></div><div id="g" style="height:300px;"></div> </body></html>/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */Ext.onReady(function(){//创建tree var tree = new Ext.tree.TreePanel({ddGroup : 'gridDDGroup',title:'全部的组织机构', animate:true, autoScroll:true, loader:new Ext.tree.TreeLoader({dataUrl: apppath+'/back/jsp/organise/findalldepartment.html',listeners:{ 'beforeload':function(treeloader,node){ this.baseParams.depparentid = node.attributes.depid; }}}),root: new Ext.tree.AsyncTreeNode({depid:157,iconCls:'depicon',text:'集团',id:'157'}), enableDD:true, containerScroll: true, border : true, width : 250, height : 300, region : 'west', listeners:{'nodedrop':function(e){}}, dropConfig: {appendOnly:true}});tree.getRootNode().expand();//创建GridPanel var myData = [];var fields = [ {name: 'deplevel',mapping : 'deplevel'}, {name: 'depid' ,mapping : 'depid'}, {name: 'depparentid',mapping : 'depparentid'}, {name: 'depparentname',mapping : 'depparentname'}, {name: 'text', mapping:'depname'}]; // create the data store var gridStore = new Ext.data.JsonStore({ fields : fields, url : 'findallorgrolesbyroleid.html',baseParams : {ids:roledepid},autoLoad : true});window.delRecord = function(value){var _sel = grid.getSelectionModel().getSelections();gridStore.remove(_sel[0]);}// Column Model shortcut arrayvar cols = [{id : 'text', header: "单位名称", width: 100, sortable: true, dataIndex: 'text'},{header: "上级单位名称", width: 150, sortable: true, dataIndex: 'depparentname'},{header: "单位编号", width: 100, sortable: true, dataIndex: 'depid'},{header:"删除",width:100,sorttable:true,dataIndex:'depid',renderer:function(value){return '<a href="#" onClick="delRecord('+value+')">删除</a>';}}];// declare the source Grid var grid = new Ext.grid.GridPanel({ store : gridStore, columns : cols,enableDragDrop : true, stripeRows : true, autoExpandColumn : 'text', width : 325,region : 'center', title : '所管理的单位',selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) });//Simple 'border layout' panel to house both gridsvar displayPanel = new Ext.Panel({title:'"'+rolename+'"-主管部门管理',width : 650,height : 300,layout : 'border',tbar:['->','-',{text:'保存',iconCls:'db-icn-add',handler:function(){var _ids = new Array();for (var i = 0; i < grid.getStore().getCount(); i++) {var _rec = grid.getStore().getAt(i);_ids.push(_rec.get('depid'));}Ext.Ajax.request({url:'updateorgroles.html',params:{ids:_ids.join(','),rid:roleid},method:'POST',success:function(option,response){var _obj = Ext.decode(option.responseText);if(_obj.success){Ext.example.msg('系统提示', '保存管理单位权限成功! ');}else{Ext.example.msg('系统提示', '保存管理单位权限失败! ');}},failure:function(option,response){Ext.example.msg('系统提示', '保存管理单位权限失败! ');}});}},'-',{text:'树形列表方式查看',iconCls:'tree',handler:function(){var _form = document.createElement('form');document.body.appendChild(_form);_form.action = 'organiserolestree.jsp';_form.method = 'POST'var _ids = document.createElement('input');_ids.value = roledepid;_ids.name = 'depids';_ids.type = 'hidden';var _id = document.createElement('input');_id.value = roleid;_id.name = 'id';_id.type = 'hidden';var _name = document.createElement('input');_name.value = rolename;_name.name = 'name';_name.type = 'hidden';_form.appendChild(_ids);_form.appendChild(_id);_form.appendChild(_name);_form.submit();}},'-',{text:'返回权限管理',iconCls:'btn-login-reset',handler:function(){location.href = apppath+'/back/jsp/roles/roles.html';}}],items : [tree,grid],bbar : ['->', // Fill{text : '清除重新选择',iconCls: 'bin_empty',handler : function() {gridStore.loadData(myData);}},'-',{text : '刷新列表',iconCls: 'refresh',handler : function() {gridStore.reload();}}]});var _view = new Ext.Viewport({items:[displayPanel],renderTo:Ext.getBody(),layout:'fit'});// used to add records to the destination storesvar blankRecord = Ext.data.Record.create(fields);/***** Setup Drop Targets***/// This will make sure we only drop to the view containervar formPanelDropTargetEl = grid.body.dom;//var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {ddGroup : 'gridDDGroup',notifyEnter : function(ddSource, e, data) {grid.body.stopFx();grid.body.highlight();},notifyDrop : function(ddSource, e, data){//这里添加选择的数据将选择的数据make a record 加到数据集里面var node = ddSource.dragData.node;//判断是否选择了同一个部门,不允许选择同一个部门!var _ishave = false;for (var i = 0; i < grid.getStore().getCount(); i++) {var _rec = grid.getStore().getAt(i);if(_rec.get('depid')==node.attributes.depid){_ishave = true;break;}}if(_ishave){Ext.example.msg('系统提示', '您已经有管理这个" {0} "部门(单位)的权限了! ', node.attributes.text);return;}var Department = grid.getStore().recordType; var dep = new Department({ deplevel: node.attributes.deplevel, depid: node.attributes.depid, depparentid: node.attributes.depparentid, depparentname: node.attributes.depparentname, text: node.attributes.text }); gridStore.insert(0,dep);return(true);}});});
