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 代码如下：

Ext.onReady(function(){
    
    var columnData = [  
        ["Consignee", "1001"],["PO#", "1002"],["Cargo Origin", "1003"],["Cargo Origin Country", "1004"],
        ["Cargo Dest.", "1005"],["Cargo Destination Country", "1006"],["PO Status", "1007"],
        ["PO Vendor", "1008"],["Buyers", "1009"],["Bill to", "1010"],["Earliest Ship Date", "1011"],
        ["Latest Ship Date", "1012"]
    ];  

    var columnStore = new Ext.data.ArrayStore({  
        fields: ['fieldName','fieldOid'],  
        data: columnData  
    });  

    var columnsView = Ext.create('Ext.view.View', {
        store: columnStore,
        id: 'columnsViewOid',
        xtype: 'dataview',
        layout:'fit',
        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap1" id="{fieldOid}">',
                '<div style="padding-left: 3px;">{fieldName}</div></div>',
            '</tpl>',
            '<div class="x-clear"></div>',
        ],
        trackOver: true,
        itemSelector: '.thumb-wrap1'
    });

    Ext.create('Ext.Panel', {
        id: 'columnsDispPanelOid',
        autoScroll:true,
        width: 850,
        height:150,
        renderTo: 'columnsDispPanel',
        bodyPadding: 5,
        defaults: {
            split: true
        },
        items: columnsView, 
        tbar:[
            {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'},
            '-',
            {
                xtype: 'button',
                icon: 'images/rpt_reset.png',
                text: 'Reset',
                id: 'selectedColumnResetID',
                textAlign: 'right',

                listeners:{
                    click: function() {
                        Ext.getCmp('columnsViewOid').getStore().sort('fieldName', 'ASC');
                    }
                }
           }
        ]
    });


    /**
    * Drag zone overrides
    */
    var dragZoneOverrides = {
        containerScroll : true,
        scroll          : false,
        getDragData     : function(evtObj) {
            var columnsDataView = Ext.getCmp('columnsViewOid');
            var sourceEl = evtObj.getTarget(columnsDataView.itemSelector, 10);
            if (sourceEl) {
                var selectedNodes = columnsDataView.getSelectedNodes();
                var dragDropEl = document.createElement('div');
                if (selectedNodes.length < 1) {
                    selectedNodes.push(sourceEl);
                }
                Ext.each(selectedNodes, function(node) {
                    dragDropEl.appendChild(node.cloneNode(true));
                });
                return {
                    ddel           : dragDropEl,
                    repairXY       : Ext.fly(sourceEl).getXY(),
                    dragRecords    : columnsDataView.getRecord(sourceEl),
                    sourceDataView : columnsDataView
                };
            }

        },
        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    };


    var onDragZoneCfg = Ext.apply({}, {
        ddGroup     : 'columnDDGrp',
        dataView    : Ext.getCmp('columnsViewOid')
    }, dragZoneOverrides);

    new Ext.dd.DragZone(Ext.getCmp('columnsViewOid').getEl(), onDragZoneCfg);

    
    /**
    * Drop zone overrides
    */
    var dropZoneOverrides = {
        onContainerOver : function() {
          return this.dropAllowed;
        },
        onContainerDrop : function(dropZone, evtObj, dragData) {
            var dataView = Ext.getCmp('columnsViewOid');
            var dragRecords = dragData.dragRecords;
            var store = dataView.store;
            dataView.store.removeAt(dataView.store.find('fieldOid', dragRecords.data.fieldOid));
            if (evtObj.getTarget(dataView.itemSelector, 10)) {
                dataView.store.insert(evtObj.getTarget(dataView.itemSelector, 10).viewIndex, dragRecords.data);
            } else {
                dataView.store.insert(dataView.store.count(), dragRecords.data);
            }
            return true;
        }
    };

    var onDropZoneCfg = Ext.apply({}, {
        ddGroup          : 'columnDDGrp',
        dataView         : Ext.getCmp('columnsViewOid')
    }, dropZoneOverrides);

    var onDropZone = new Ext.dd.DropZone(Ext.getCmp('columnsViewOid').ownerCt.el, onDropZoneCfg);

});