Question

我有两个按钮的网格：＆＃34;向上行＆＃34;和＃34;下行＆＃34;。

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);

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

Answer 1

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

但是，如果您有store.autoLoad = true，那么在交换之后和store.suspendAutoSync()之间调用store.resumeAutoSync()是重要的，所以没有任何内容可以发送到服务器。

你也可以试试这个漂亮的插件：Ext.grid.plugin.DragDrop用于Drag'n'Drop重排行。

PS：使用store.remove(rec)代替store.removeAt(index)因为removeAt会在内部调用remove。

在Ext.grid.Panel中交换行

1 个答案: