запомнить после обновления выбранную строку в сетке 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]);
    }