请记住在刷新extjs网格中的所选行之后

Ric*_*ler 14 grid extjs refresh row selection

我有个问题.我用extjs grid.此网格将每次刷新seconds.

我用这个函数刷新:

ND.refresh = function() {
    ND.commList.load();
}


var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);
Run Code Online (Sandbox Code Playgroud)

但当有人选择一行来突出显示它时,reset这个选择.如何记住所选行并在刷新后再次突出显示?

这是我的网格:

var grid = Ext.create('Ext.grid.Panel', {
     autoscroll: true,
     region: 'center',
     store: ND.dashBoardDataStore,
     stateful: true,
     forceFit: true,
     loadMask: false,
     stateId: 'stateGrid',

     viewConfig: {
         stripeRows: true
     },
     columns: [{
         text: 'Vehicle',
         sortable: true,
         flexible: 1,
         width: 60,
         dataIndex: 'vehicle'
     }, {
         text: 'CCU',
         sortable: true,
         flexible: 0,
         width: 50,
         renderer: status,
         dataIndex: 'ccuStatus'
     }]
 });
Run Code Online (Sandbox Code Playgroud)

多谢你们

sbg*_*ran 20

我编写了简单的Ext.grid.Panel扩展,可以自动选择在重新加载之前选择的后退行.你可以在这个jsFiddle中试试

Ext.define('PersistantSelectionGridPanel', {
    extend: 'Ext.grid.Panel',
    selectedRecords: [],
    initComponent: function() {
        this.callParent(arguments);

        this.getStore().on('beforeload', this.rememberSelection, this);
        this.getView().on('refresh', this.refreshSelection, this);
    },
    rememberSelection: function(selModel, selectedRecords) {
        if (!this.rendered || Ext.isEmpty(this.el)) {
            return;
        }

        this.selectedRecords = this.getSelectionModel().getSelection();
        this.getView().saveScrollState();
    },
    refreshSelection: function() {
        if (0 >= this.selectedRecords.length) {
            return;
        }

        var newRecordsToSelect = [];
        for (var i = 0; i < this.selectedRecords.length; i++) {
            record = this.getStore().getById(this.selectedRecords[i].getId());
            if (!Ext.isEmpty(record)) {
                newRecordsToSelect.push(record);
            }
        }

        this.getSelectionModel().select(newRecordsToSelect);
        Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
    }
});
Run Code Online (Sandbox Code Playgroud)

  • 这很棒,但它应该是一个插件,而不是基类! (2认同)

And*_*sky 6

直接的解决方案是保存在所选行的js索引中的某个位置.然后在重新加载后,您可以使用网格的选择模型轻松地按索引选择此行.

获取选择模型:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel

var selectionModel = grid.getSelectionModel()
Run Code Online (Sandbox Code Playgroud)

获取选定的行:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection

var selection = selectionModel.getSelection()
Run Code Online (Sandbox Code Playgroud)

设置选定的行:http://docs.sencha.com/ext-js/4-0/#!/ api/Ext.selection.Model-method-select

selectionModel.select(selection)
Run Code Online (Sandbox Code Playgroud)