記住刷新后在extjs網格中選擇的行

Question

我有個問題。 我使用extjs grid 。 該網格將每刷新seconds 。

我用此功能刷新：

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


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

但是，當某人選中某行使其突出顯示時，它將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'
     }]
 });

多謝你們

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.Model-method-select

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用戶

需要圍繞

refreshSelection（）{

...
Ext.defer（this.setScrollTop，30，this，[this.getView（）。scrollState.top]）

}

因此setScrollTop不再存在

所以一個有效的解決方案是添加me.getView（）。preserveScrollOnRefresh = true;

在initComponent中

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