刷新 extjs 网格中选定的行后记住

Question

我有一个问题。我使用 extjs grid。该网格将每秒刷新一次。

我用这个函数刷新：

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


var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);

但是当有人选择一行来突出显示它时，它会重置此选择。 如何记住所选行并在刷新后再次突出显示它？

这是我的网格：

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'
     }]
 });

谢谢大家

Answer 1

我编写了简单的 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]);
    }
});

Answer 2

最简单的解决方案就是将所选行的 js 索引保存在某处。然后重新加载后，您可以使用网格的选择模型通过索引轻松选择此行。

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

var selectionModel = grid.getSelectionModel()

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

var selection = selectionModel.getSelection()

将所选行设置回来：http://docs.sencha.com/ext-js /4-0/#!/api/Ext.selection.模型方法选择

selectionModel.select(selection)

Answer 3

这是选择先前选择的记录的另一种方法：

var selectionModel = grid.getSelectionModel()

// get the selected record
var selectedRecord = selectionModel.getSelection()[0]

// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);

// select by index
grid.getSelectionModel().select(selectedIdx);

由于某种原因， grid.getSelectionModel().select(record) 方法对我不起作用，但按索引选择似乎有效。

编辑：找出为什么 grid.getSelectionModel().select(record) 方法不起作用。显然，商店已重新加载，记录实例不相同（它们具有不同的自动生成的 Ext ID）。在这种情况下，您必须使用 selectAt()。

Answer 4

对于 extjs 4.1.7 用户

需要一个关于以下语句的解决方法

刷新选择(){

<块引用>

...
Ext.defer(this.setScrollTop, 30, 这个,
[this.getView().scrollState.top])

}

因此 setScrollTop 不再存在，

因此添加了一个工作解决方案
me.getView().preserveScrollOnRefresh = true;

在初始化组件中

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

        //-------------------------------------------
        me.getView().preserveScrollOnRefresh = true;
        //-------------------------------------------
    },
    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);
    }
});

Answer 5

我已经对此代码进行了修改。
如果您进行选择，并在存储上应用过滤器并重新加载它，则选择模型在此选定集合中具有第一个空数组（位于索引 0 处）。

此修改位于“refreshSelection”函数的最后一行。

if (newRecordsToSelect.length >= 1){
        this.getSelectionModel().select(newRecordsToSelect);
        Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
    }