Extjs4 实现两个DataView之间元素的拖拽添加及删除

最近项目接到一个需求,要求用拖拽实现在两个Panel之间实现拖拽添加和删除元素的功能.

首先想到的是EXTJS提供的View组件,View组件绑定一个Store和Template就可以得到预期的UI显示效果,再加上EXTJS提供的DD(Drag and Drop)功能，则可以实现两个View组件之前的元素拖拽添加以及删除.

效果如下：

Demo代码实例如下：

 

  1 Ext.onReady(function(){
  2     
  3     var columnData = [  
  4         ["Consignee", "1001"],["PO#", "1002"],["Cargo Origin", "1003"],["Cargo Origin Country", "1004"],
  5         ["Cargo Dest.", "1005"],["Cargo Destination Country", "1006"],["PO Status", "1007"],
  6         ["PO Vendor", "1008"],["Buyers", "1009"],["Bill to", "1010"],["Earliest Ship Date", "1011"],
  7         ["Latest Ship Date", "1012"]
  8     ];  
  9 
 10     var columnStore = new Ext.data.ArrayStore({  
 11         fields: ['fieldName','fieldOid'],  
 12         data: columnData  
 13     });  
 14 
 15     var selectedColumnStore = new Ext.data.ArrayStore({  
 16         fields: ['fieldName','fieldOid'],  
 17         data: []  
 18     });  
 19 
 20     var columnsView = Ext.create('Ext.view.View', {
 21         store: columnStore,
 22         id: 'columnsViewOid',
 23         xtype: 'dataview',
 24         tpl: [
 25             '<tpl for=".">',
 26                 '<div class="thumb-wrap1" id="{fieldOid}">',
 27                 '<div style="padding-left: 3px;">{fieldName}</div></div>',
 28             '</tpl>',
 29             '<div class="x-clear"></div>',
 30         ],
 31         trackOver: true,
 32         itemSelector: '.thumb-wrap1'
 33     });
 34 
 35     var selectedColumnsView = Ext.create('Ext.view.View', {
 36         store: selectedColumnStore,
 37         id: 'selectedColumnsViewOid',
 38         xtype: 'dataview',
 39         tpl: [
 40             '<tpl for=".">',
 41                 '<div class="thumb-wrap1" id="{fieldOid}">',
 42                 '<div style="padding-left: 3px;">{fieldName}  <img border="0" src="images/del.gif" onclick = "deleteViewItem({fieldOid})"/></div></div>',
 43             '</tpl>',
 44             '<div class="x-clear"></div>',
 45         ],
 46         trackOver: true,
 47         itemSelector: '.thumb-wrap1'
 48     });
 49  
 50     
 51     Ext.create('Ext.Panel', {
 52         id: 'columnsDispPanelOid',
 53         autoScroll:true,
 54         width: 600,
 55         height:350,
 56         renderTo: 'columnsDispPanel',
 57         bodyPadding: 5,
 58         layout:'border',
 59         defaults: {
 60             split: true
 61         },
 62         items:[
 63             {
 64                 xtype:'panel', region:'west', margin: '0 2 0 0', flex:1, items: columnsView,
 65                 tbar:[
 66                     {xtype:'displayfield', value:'<span style="color:#04408c;font-weight:bolder;height:20px;line-height:19px;margin-left:3px"> Columns </span>', margin: '0 2 0 0'}
 67                 ]
 68             },
 69             {
 70                 xtype:'panel', region:'center', items: selectedColumnsView,
 71                 tbar:[
 72                     {xtype:'displayfield', value:'<span style="color:#04408c;font-weight:bolder;height:20px;line-height:15px;margin-left:3px"> Selected Columns </span>', margin: '0 2 0 0'},
 73                     '-',
 74                     {
 75                         xtype: 'button',
 76                         icon: 'images/rpt_reset.png',
 77                         text: 'Reset',
 78                         id: 'selectedColumnResetID',
 79                         textAlign: 'right',
 80                         listeners:{
 81                             click: function() {
 82                                 Ext.getCmp('selectedColumnsViewOid').getStore().loadData([]);
 83                             }
 84                         }
 85                    }
 86                 ],
 87             }
 88         ]
 89     });
 90 
 91 
 92     /**
 93     * Drag zone overrides
 94     */
 95     var dragZoneOverrides = {
 96         containerScroll : true,
 97         scroll          : false,
 98         getDragData     : function(evtObj) {
 99             var columnsDataView = Ext.getCmp('columnsViewOid');
100             var sourceEl = evtObj.getTarget(columnsDataView.itemSelector, 10);
101             if (sourceEl) {
102                 var selectedNodes = columnsDataView.getSelectedNodes();
103                 var dragDropEl = document.createElement('div');
104                 if (selectedNodes.length < 1) {
105                     selectedNodes.push(sourceEl);
106                 }
107                 Ext.each(selectedNodes, function(node) {
108                     dragDropEl.appendChild(node.cloneNode(true));
109                 });
110                 return {
111                     ddel           : dragDropEl,
112                     repairXY       : Ext.fly(sourceEl).getXY(),
113                     dragRecords    : columnsDataView.getRecord(sourceEl),
114                     sourceDataView : columnsDataView
115                 };
116             }
117 
118         },
119         getRepairXY: function() {
120             return this.dragData.repairXY;
121         }
122     };
123 
124 
125     var onDragZoneCfg = Ext.apply({}, {
126         ddGroup     : 'columnDDGrp',
127         dataView    : Ext.getCmp('columnsViewOid')
128     }, dragZoneOverrides);
129 
130     new Ext.dd.DragZone(Ext.getCmp('columnsViewOid').getEl(), onDragZoneCfg);
131 
132     
133     /**
134     * Drop zone overrides
135     */
136     var dropZoneOverrides = {
137         onContainerOver : function() {
138           return this.dropAllowed;
139         },
140         onContainerDrop : function(dropZone, evtObj, dragData) {
141             var selectedColumnDataView = Ext.getCmp('selectedColumnsViewOid');
142             var dragRecords = dragData.dragRecords;
143             var store = selectedColumnDataView.store;
144             var dupFound = false;
145             Ext.each(dragRecords, function(record) {
146                 var found = store.findBy(function(r) {
147                    return r.data.fieldName === record.data.fieldName;
148                 });
149                 if (found > -1 ) {
150                     dupFound = true;
151                 }
152             });
153 
154             if (!dupFound) {
155                 selectedColumnDataView.store.add(dragRecords.data);
156             } else {
157                 Ext.MessageBox.alert('Warning', dragRecords.data.fieldName + ' already exist.');
158             }
159             return true;
160         }
161     };
162 
163     var onDropZoneCfg = Ext.apply({}, {
164         ddGroup          : 'columnDDGrp',
165         dataView         : Ext.getCmp('selectedColumnsViewOid')
166     }, dropZoneOverrides);
167 
168     var onDropZone = new Ext.dd.DropZone(Ext.getCmp('selectedColumnsViewOid').ownerCt.el, onDropZoneCfg);
169 
170     deleteViewItem = function (oid) {
171         var viewName = 'selectedColumnsViewOid';
172         var delItems = [];
173         var currentSelectedColumns = Ext.getCmp(viewName).store.data.items;
174         Ext.Array.forEach (currentSelectedColumns, function(currentSelectedColumn, index) {
175             if (currentSelectedColumn.data.fieldOid == oid) {
176                 delItems.push(currentSelectedColumn);
177                 Ext.getCmp(viewName).store.remove(delItems);
178             }
179         })
180     }
181 
182 });

jsfiddle 预览： http://jsfiddle.net/8L0keqd7/