extjs4.0----Grid To Grid拖拽示例

发布时间：2020-12-15 04:50:51 所属栏目：百科来源：网络整理

导读：图示： ? ?js： [javascript] ? view plain copy script?type= "text/javascript" ?? ?????? ????Ext.require([?? ???????? 'Ext.grid.*' ,?? ???????? 'Ext.data.*' ,?? ???????? 'Ext.dd.*' ?? ????]);?? ????Ext.define( 'DataObject' ,?{?? ????????exte

图示：

?js：

[javascript]? 
   view plain 
   copy 
    
   
 <script?type="text/javascript">??
 ??????
 ????Ext.require([??
 ????????'Ext.grid.*',??
 ????????'Ext.data.*',??
 ????????'Ext.dd.*'??
 ????]);??
 ????Ext.define('DataObject',?{??
 ????????extend:?'Ext.data.Model',108); color:inherit; line-height:18px"> ????????fields:?['name',?'column1',?'column2']??
 ????});??
 ??????
 ????Ext.onReady(function(){??
 ????????var?myData?=?[??
 ????????????{?name?:?"娜姐",?column1?:?"25",?column2?:?"3"?},248); line-height:18px"> ????????????{?name?:?"船长",?column1?:?"24",?column2?:?"2"?},108); color:inherit; line-height:18px"> ????????????{?name?:?"傻妞",?column1?:?"23",248); line-height:18px"> ????????????{?name?:?"阿呆",108); color:inherit; line-height:18px"> ????????????{?name?:?"猫猫",?column2?:?"3"?}??
 ????????];??
 ????????//?create?the?data?store??
 ????????var?firstGridStore?=?Ext.create('Ext.data.Store',248); line-height:18px"> ????????????model:?'DataObject',108); color:inherit; line-height:18px"> ????????????data:?myData??
 ????????});??
 ????????//?Column?Model?shortcut?array??
var?columns?=?[??
 ????????????{text:?"姓名",?flex:?1,?sortable:?true,?dataIndex:?'name'},248); line-height:18px"> ????????????{text:?"年龄",?width:?70,?dataIndex:?'column1'},108); color:inherit; line-height:18px"> ????????????{text:?"水龄",?dataIndex:?'column2'}??
//?declare?the?source?Grid??
var?firstGrid?=?Ext.create('Ext.grid.Panel',248); line-height:18px"> ????????????multiSelect:? ????????????viewConfig:?{??
 ????????????????plugins:?{??
 ????????????????????ptype:?'gridviewdragdrop',248); line-height:18px"> ????????????????????dragGroup:?'firstGridDDGroup',108); color:inherit; line-height:18px"> ????????????????????dropGroup:?'secondGridDDGroup'??
 ????????????????},??
 ????????????????listeners:?{??
 ????????????????????drop:?function(node,?data,?dropRec,?dropPosition)?{??
 ????????????????????????var?dropOn?=?dropRec???'?'?+?dropPosition?+?'?'?+?dropRec.get('name')?:?'?on?empty?view';??
 ????????????????????????//Ext.example.msg("Drag?from?right?to?left",?'Dropped?'?+?data.records[0].get('name')?+?dropOn);??
 ????????????????????}??
 ????????????????}??
 ????????????},??
 ????????????store????????????:?firstGridStore,108); color:inherit; line-height:18px"> ????????????columns??????????:?columns,248); line-height:18px"> ????????????stripeRows???????:? ????????????title????????????:?'待选',248); line-height:18px"> ????????????margins??????????:?'0?2?0?0'??
 ????????});??
var?secondGridStore?=?Ext.create('Ext.data.Store',248); line-height:18px"> ????????????model:?'DataObject'??
//?create?the?destination?Grid??
var?secondGrid?=?Ext.create('Ext.grid.Panel',?{??
 ????????????????????dragGroup:?'secondGridDDGroup',108); color:inherit; line-height:18px"> ????????????????????dropGroup:?'firstGridDDGroup'??
//Ext.example.msg("Drag?from?left?to?right",248); line-height:18px"> ????????????store????????????:?secondGridStore,108); color:inherit; line-height:18px"> ????????????title????????????:?'已选',248); line-height:18px"> ????????????margins??????????:?'0?0?0?3'??
//Simple?'border?layout'?panel?to?house?both?grids??
var?displayPanel?=?Ext.create('Ext.Panel',108); color:inherit; line-height:18px"> ????????????width????????:?650,248); line-height:18px"> ????????????height???????:?300,108); color:inherit; line-height:18px"> ????????????layout???????:?{??
 ????????????????type:?'hbox',108); color:inherit; line-height:18px"> ????????????????align:?'stretch',248); line-height:18px"> ????????????????padding:?5??
 ????????????renderTo:?Ext.getBody(),108); color:inherit; line-height:18px"> ????????????defaults?????:?{?flex?:?1?},?//auto?stretch??
 ????????????items????????:?[??
 ????????????????firstGrid,248); line-height:18px"> ????????????????secondGrid??
 ????????????],248); line-height:18px"> ????????????dockedItems:?{??
 ????????????????xtype:?'toolbar',248); line-height:18px"> ????????????????dock:?'bottom',108); color:inherit; line-height:18px"> ????????????????items:?['->',?//?Fill??
 ????????????????{??
 ????????????????????text:?'全选',248); line-height:18px"> ????????????????????handler:? ????????????????????????firstGridStore.removeAll();??
 ????????????????????????secondGridStore.loadData(myData);??
 ????????????????????}??
 ????????????????},{??
 ????????????????????text:?'取消',108); color:inherit; line-height:18px"> ????????????????????handler:?function(){??
 ????????????????????????firstGridStore.loadData(myData);??
 ????????????????????????secondGridStore.removeAll();??
 ????????????????}]??
 ????????????}??
 ??
 ????</script>??

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!