将选择保留在列表中

Question

我有这两个改变列表顺序的家伙

buttons and selected item

但是当位置改变时，我就失去了选择的注意力

new order

我需要在发生此更改时选择保留在项目上。

这是按钮的代码。

{
    xtype: 'use-icon',
    clsIcone: 'x-mi mi-keyboard-arrow-up font-size-20 cursor-pointer',
    toolTipText: 'Subir etapa',
    reference: 'btnSubirEtapa',
    cbOnClick: 'onClickSubirEtapa'
}, {
    xtype: 'use-icon',
    clsIcone: 'x-mi mi-keyboard-arrow-down font-size-20 cursor-pointer',
    toolTipText: 'Descer etapa',
    reference: 'btnDescerEtapa',
    cbOnClick: 'onClickDescerEtapa'
}

这里是控制器

    onClickSubirEtapa: function() {
    var me = this,
        $vw = me.getView(),
        $grid = $vw.down('fichatecnica-sequenciaoperacional-operacoes-window-lista'),
        selection = $grid.getSelection();

    if($grid.getController().validarSelecao(selection, 1, 1)) {
        me.subirOperacao(selection[0]);
    }
},

subirOperacao:function(record) {
    var me = this,
        vwm = me.getViewModel(),
        modelFichaTecnica = vwm.get('FichaTecnica'),
        codigoFichaTecnica = vwm.get('CodigoFichaTecnica'),
        rep = me.getRepositorio();

    rep.subirOperacao(codigoFichaTecnica, vwm.get('CodigoEtapa'), record.data.Id, Use.Callback.padrao(function() {
        me.recuperarOperacoes(codigoFichaTecnica);
    }));
},

如果需要更多细节，我可以添加。

编辑。分机版本：6.5.3。工具包经典。

Answer 1

问题是商店重新加载。服务器端订购后，商店会加载新数据，网格会重置选择。在这种情况下，您必须存储所选的 recordId（我希望您使用的是服务器端记录 ID），并在加载存储后按记录 ID 重新选择行。

类似于以下 fiddle 示例：

Ext.define('SampleGrid', {
    extend: 'Ext.grid.Panel',
    title: 'Simpsons',
    store: {
        fields: ['fieldOne', 'fieldTwo'],
        proxy: {
            type: 'ajax',
            url: 'data.json',
            reader: {
                type: 'json',
                rootProperty: 'root'
            }
        },
        autoLoad: true
    },
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: "Reload",
            handler: function () {
                var grid = this.up('grid'),
                    store = grid.getStore();
                store.load();
            }
        }]
    }],
    columns: [{
        text: 'Field One',
        dataIndex: 'fieldOne',
        flex: 1
    }, {
        text: 'Field Two',
        dataIndex: 'fieldTwo',
        flex: 1
    }],

    initComponent: function () {
        this.callParent();
        this.addRememberSelectionFeature();
    },

    addRememberSelectionFeature: function () {
        // Store record id on select
        this.on('select', function (grid, selectedRecord) {
            this.storedSelectedRecordId = selectedRecord.getId();
        }, this);

        // Select records after reload
        this.getStore().on('load', function (store) {
            var lastSelectedRecord = store.getById (this.storedSelectedRecordId);
            if (lastSelectedRecord) {
                this.getSelectionModel().select(this.storedSelectedRecords);
            }
        }, this);
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('SampleGrid', {
            renderTo: Ext.getBody()
        });
    }
});

具有服务器端 ID 的数据（不是由 extjs 自动生成的）：

{
    "root": [{
        "id": 0,
        "fieldOne": 1,
        "fieldTwo": 4
    }, {
        "id": 1,
        "fieldOne": 2,
        "fieldTwo": 3
    }, {
        "id": 2,
        "fieldOne": 3,
        "fieldTwo": 2
    }, {
        "id": 3,
        "fieldOne": 4,
        "fieldTwo": 1
    }]
}

如果您使用多选模型，则必须更改代码，只需将所选记录的 ID 保存在一个数组中即可。

将选择保留在列表中

Remain the selection in a list

extjs