EXTJS DataView 元素排序事例

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