Запомнить после обновления выделенной строки в сетке extjs

У меня проблема. Я использую 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'
     }]
 });

Спасибо, ребята,

Ответ 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]);
    }
});

Ответ 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)

Ответ 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). Вы должны использовать selectAt() в этом случае.

Ответ 4

для пользователей extjs 4.1.7

нужен рабочий стол вокруг инструкции в

refreshSelection() {

...
Ext.defer(this.setScrollTop, 30, это, [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);
    }
});

Ответ 5

Я внес изменения в этот код. Если вы делаете выбор и выбираете фильтр в хранилище и перезагружаете его, модель выбора имеет первый пустой массив в этой выбранной коллекции (по индексу 0).

Эта модификация находится в последней строке функции refreshSelection.

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