继续ext3.x，扩展3

这个扩展可以通过插件支持的方式很方便的让表格的行可以拖动排序，下面是预览效果。HTML页面的代码可以看预览效果的框架页的代码

/*
** edit by Dickhead
** goal 让GridPanel的行支持拖动排序的插件 
** 插件方式支持
** time 2011-08-05 22:04:27
*/

//<extension>
(function () {
    //先扩展一个拖放操作的放置区
    Ext.ns('Ext.ux.grid');
    Ext.ux.grid.GridDropZone = Ext.extend(Ext.dd.DropZone, {
        ddGroup: 'GridDD',
        constructor: function (grid, config) {
            this.view = grid.getView();
            Ext.ux.grid.GridDropZone.superclass.constructor.call(this, this.view.scroller.dom, config);
            this.proxyEl = document.createElement('div');
            this.proxyEl.style.cssText = "background:url(http://images.cnblogs.com/cnblogs_com/dickhead/314392/o_arrow_right.png);" +
            "width:16px;height:16px;position:absolute;";
            Ext.fly(this.proxyEl).insertAfter(this.view.scroller).hide();
        },
        getTargetFromEvent: function (e) {
            return e.getTarget(this.view.rowSelector);
        },
        onNodeEnter: function (target, dd, e, data) {
            var rowIndex = this.view.findRowIndex(target);
            data.targetRowIndex = rowIndex;
            if (rowIndex !== false) {
                rowIndex < data.rowIndex && (rowIndex += 1);
                data.targetRowIndex = rowIndex;
                if (rowIndex !== data.rowIndex) {
                    Ext.fly(this.proxyEl).show().alignTo(target, 'br-bl', [16, 9]);
                    return;
                }
            }
            Ext.fly(this.proxyEl).hide();
        },
        onNodeOut: function () {
            Ext.fly(this.proxyEl).hide();
        },
        onNodeOver: function (target, dd, e, data) {
            if (data.targetRowIndex !== false && data.targetRowIndex !== data.rowIndex) {
                return Ext.dd.DropZone.prototype.dropAllowed;
            } else {
                return Ext.dd.DropZone.prototype.dropNotAllowed;
            }
        },
        onNodeDrop: function (target, dd, e, data) {
            if (data.targetRowIndex !== data.rowIndex) {
                var record = data.grid.store.getAt(data.rowIndex);
                data.grid.store.data.removeAt(data.rowIndex);
                data.grid.store.data.insert(data.targetRowIndex, record);
                this.view.refresh();
                return true;
            }
            return false;
        },
        destroy: function () {
            Ext.destroy(this.proxyEl);
            delete this.proxyEl;
            Ext.ux.grid.GridDropZone.destroy.apply(this, arguments);
        }
    });

    //支持行拖动的插件
    //扩展自Ext.util.Observable方便以后添加事件支持
    Ext.ux.grid.RowGragable = Ext.extend(Ext.util.Observable, {
        init: function (grid) {
            grid.enableDragDrop = true;
            var group = Math.random().toString();
            grid.ddGroup = group;
            var dropZone;
            grid.on('afterrender', function () {
                dropZone = new Ext.ux.grid.GridDropZone(grid, { ddGroup: group });
            });
            grid.on('destroy', function () {
                dropZone.destroy();
            });
        }
    })
})();
//</extension>

//sample 使用插件让表格支持行拖动
Ext.onReady(function () {
    Ext.get('loading').remove();
    new Ext.grid.GridPanel({
        height: 130, plugins: [new Ext.ux.grid.RowGragable()],
        columns: [
            new Ext.grid.RowNumberer({ renderer: function () { return '&nbsp;'; } }),
            { header: '书名', dataIndex: 'BookName' },
            { header: '作者', dataIndex: 'Author' },
            { header: '价格', dataIndex: 'Price' },
            { header: '出版日期', dataIndex: 'PublishDate' }
        ],
        store: {
            xtype: 'simplestore', fields: ['BookName', 'Author', 'Price', 'PublishDate'],
            data: [
                ['CLR via C#', 'Jeffrey Richter', '99.0', '2010-04-13'],
                ['北京售楼小姐', '不详', '54.0', '2011-02-13'],
                ['武经七书1', '大概是神', '54.0', '2010-04-13'],
                ['空谷幽兰', 'somebody', '99.0', '2010-04-13']
            ]
        },
        renderTo: 'main'
    });
})