EXTJS DataView 元素排序事例-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

Extjs的DataView组件似乎没有排序的功能（针对View中的Item进行拖拽实现位置变化来达到排序的目的），下面的代码实现则是对这个功能的补充：

1. 拖拽任意的ITEM来实现位置切换（如将ITEMA拖至ITEMB上方，然后放开，则ITEMA会插入到ITEMB的前面一个位置）。

2. 如果将一个ITEM拖放的位置不是在某个ITEM的区域，而是空白的某个区域，则这个ITEM会自动排到最后一个位置。

3. ToolBar中的reset是对view中的所有ITEM按照首字母的升序排列。

拖放前：

将PO#放在第一位，然后将Consignee拖放至最后一位：

点击reset进行升序排列：

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 columnsView = Ext.create('Ext.view.View', {
 16         store: columnStore,
 17         id: 'columnsViewOid',
 18         xtype: 'dataview',
 19         layout:'fit',
 20         tpl: [
 21             '<tpl for=".">',
 22                 '<div class="thumb-wrap1" id="{fieldOid}">',
 23                 '<div style="padding-left: 3px;">{fieldName}</div></div>',
 24             '</tpl>',
 25             '<div class="x-clear"></div>',
 26         ],
 27         trackOver: true,
 28         itemSelector: '.thumb-wrap1'
 29     });
 30 
 31     Ext.create('Ext.Panel', {
 32         id: 'columnsDispPanelOid',
 33         autoScroll:true,
 34         width: 850,
 35         height:150,
 36         renderTo: 'columnsDispPanel',
 37         bodyPadding: 5,
 38         defaults: {
 39             split: true
 40         },
 41         items: columnsView, 
 42         tbar:[
 43             {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'},
 44             '-',
 45             {
 46                 xtype: 'button',
 47                 icon: 'images/rpt_reset.png',
 48                 text: 'Reset',
 49                 id: 'selectedColumnResetID',
 50                 textAlign: 'right',
 51 
 52                 listeners:{
 53                     click: function() {
 54                         Ext.getCmp('columnsViewOid').getStore().sort('fieldName', 'ASC');
 55                     }
 56                 }
 57            }
 58         ]
 59     });
 60 
 61 
 62     /**
 63     * Drag zone overrides
 64     */
 65     var dragZoneOverrides = {
 66         containerScroll : true,
 67         scroll          : false,
 68         getDragData     : function(evtObj) {
 69             var columnsDataView = Ext.getCmp('columnsViewOid');
 70             var sourceEl = evtObj.getTarget(columnsDataView.itemSelector, 10);
 71             if (sourceEl) {
 72                 var selectedNodes = columnsDataView.getSelectedNodes();
 73                 var dragDropEl = document.createElement('div');
 74                 if (selectedNodes.length < 1) {
 75                     selectedNodes.push(sourceEl);
 76                 }
 77                 Ext.each(selectedNodes, function(node) {
 78                     dragDropEl.appendChild(node.cloneNode(true));
 79                 });
 80                 return {
 81                     ddel           : dragDropEl,
 82                     repairXY       : Ext.fly(sourceEl).getXY(),
 83                     dragRecords    : columnsDataView.getRecord(sourceEl),
 84                     sourceDataView : columnsDataView
 85                 };
 86             }
 87 
 88         },
 89         getRepairXY: function() {
 90             return this.dragData.repairXY;
 91         }
 92     };
 93 
 94 
 95     var onDragZoneCfg = Ext.apply({}, {
 96         ddGroup     : 'columnDDGrp',
 97         dataView    : Ext.getCmp('columnsViewOid')
 98     }, dragZoneOverrides);
 99 
100     new Ext.dd.DragZone(Ext.getCmp('columnsViewOid').getEl(), onDragZoneCfg);
101 
102     
103     /**
104     * Drop zone overrides
105     */
106     var dropZoneOverrides = {
107         onContainerOver : function() {
108           return this.dropAllowed;
109         },
110         onContainerDrop : function(dropZone, evtObj, dragData) {
111             var dataView = Ext.getCmp('columnsViewOid');
112             var dragRecords = dragData.dragRecords;
113             var store = dataView.store;
114             dataView.store.removeAt(dataView.store.find('fieldOid', dragRecords.data.fieldOid));
115             if (evtObj.getTarget(dataView.itemSelector, 10)) {
116                 dataView.store.insert(evtObj.getTarget(dataView.itemSelector, 10).viewIndex, dragRecords.data);
117             } else {
118                 dataView.store.insert(dataView.store.count(), dragRecords.data);
119             }
120             return true;
121         }
122     };
123 
124     var onDropZoneCfg = Ext.apply({}, {
125         ddGroup          : 'columnDDGrp',
126         dataView         : Ext.getCmp('columnsViewOid')
127     }, dropZoneOverrides);
128 
129     var onDropZone = new Ext.dd.DropZone(Ext.getCmp('columnsViewOid').ownerCt.el, onDropZoneCfg);
130 
131 });

View Code