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

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 : columnsDataView115                 };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 overrides135     */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/