在 Ext.grid.Panel 中交换行答案

【问题标题】：swap rows in Ext.grid.Panel在 Ext.grid.Panel 中交换行
【发布时间】：2014-04-04 11:34:17
【问题描述】：

我有两个按钮的网格：“上行”和“下行”。

Ext.define('OrionWebClient.controller.Request', {
    extend: 'Ext.app.Controller',
    refs:[
        {ref:'list',selector:'requestlist'}
    ],
    init: function() {
        this.control('requestlist',{
            itemclick: this.OnItemClick,
        });
        this.control('requestlist toolbar button[iconCls=btnUp]',{
            click: this.OnButtonUpRequest
        });
        this.control('requestlist toolbar button[iconCls=btnDown]',{
            click: this.OnButtonDownRequest
        });

        this._cur_index=-1;
    },

    OnItemClick:function (grid,rec,item,index) {
        this.SetCurrentIndex(index,false);
    },

    OnButtonUpRequest:function () {
        var index=this.GetCurrentIndex();
        if (index==-1){
            var max_i=this.GetMaxIndex();
            this.SetCurrentIndex(max_i,true);
            return;
        }
        if (index==0){
            return;
        }
        this.SwapRow(index,index-1);
        this.SetCurrentIndex(index-1,true);
    },

    OnButtonDownRequest:function () {
        var index=this.GetCurrentIndex()
        if (index==-1){
            //var max_i=GetMaxIndex();
            this.SetCurrentIndex(0,true);
            return;
        }
        if (index==this.GetMaxIndex()){
            return;
        }
        this.SwapRow(index,index+1);
        this.SetCurrentIndex(index+1,true);
        //console.log("down");
    },

    GetCurrentIndex:function (){
        return this._cur_index;        
    },
    SetCurrentIndex:function (index,visual) {
        if (visual){
            var list=this.getList();
            list.getSelectionModel().select(index);
        }
        this._cur_index=index;
    },
    GetMaxIndex:function () {
        var store=this.getList().getStore();
        return store.count()-1;
    },
    SwapRow:function (cur_index,new_index){
        var store=this.getList().getStore();
        var rec=store.getAt(cur_index).copy();

        console.log(store.data); 
        //store.removeAt(cur_index);
        //store.insert(new_index,[rec]);

    }

});

Ext.define('OrionWebClient.view.RequestList',{
    extend: 'Ext.grid.Panel',
    id:'rqstlst',
    title:'Request List',
    alias:'widget.requestlist',
    border:true,
    requires:['OrionWebClient.model.Request'],    
    columns:{
        defaults:{
            draggable:false,
            sortable:false,
            hideable:false,
            resizable:false
        },
        items:[
            { text: '#', xtype:'rownumberer',width:30 },
            { text: 'command', dataIndex: 'cmd',width:250},
            { text: 'params', dataIndex: 'args',width:250},
            { text: '*', dataIndex: 'check',xtype: 'checkcolumn',width:30 }
        ]
    },
    store:{
        model: 'OrionWebClient.model.Request',
        autoLoad:true
    },
    dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'bottom',
            defaults: {
                maxWidth: 90, 
                type:'button',
                margin:'1 5 1 5'
            },
            items: [
                { text: 'Up',iconCls:'btnUp'},
                { text: 'Down',iconCls:'btnDown'},
                '-',
            ]
        }
    ]
});

但我不明白如何在商店中操作订单行并交换两行。我不喜欢使用：

var store=getList().getStore();
var rec=store.getAt(index).copy();
store.removeAt(index);
store.insert(index,rec);

我认为这是不好的解决方案。附：对不起，我的英语不好。

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

首先你是对的：网格中的行顺序只能在商店中更改。查看 Store 的所有方法，除了删除一条记录并重新插入之外，您别无选择。

但是如果你有store.autoLoad = true，那么在交换之前调用store.suspendAutoSync() 和在交换之后调用store.resumeAutoSync() 很重要，这样就不会向服务器发送任何内容。

您也可以试试这个不错的插件：Ext.grid.plugin.DragDrop 用于 Drag'n'Drop 重新排序行。

PS：使用store.remove(rec) 而不是store.removeAt(index)，因为 removeAt 会在内部调用 remove。

【讨论】：