recuerde después de actualizar la fila seleccionada en la cuadrícula extjs

I have a problem. I use extjs grid. This grid will be refreshed every seconds.

I refresh with this function:

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


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

But when someone selected a row to highlight it it reset this selection. How can I remember the selected row and highlight it again after refresh?

This is my grid:

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

Gracias chicos

preguntado el 02 de febrero de 12 a las 10:02

What version of Ext do you use? Test code (in JsFiddle) would be nice so we have a starting point to help you in a best possible way. -

Thanks for your reply. I use EXT 4.0.2. i don't know fiddle. How do i need to put it in there? -

5 Respuestas

Escribí simple Ext.grid.Panel extension that automatically selects back rows that were selected before store reload. You can try it in este 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]);
    }
});

Respondido 18 Feb 13, 18:02

hey looking good. I have only two issues. In firefox i get this error: this.selectedRecords[i].getId is not a function. When i use it in chrome it will always select the first row after refresh. Any idea what that could be? THANKS for the help :) - Rick Weller

the error in firefox is fixed. But it is still going to the first row - Rick Weller

jsfiddle.net/ZemWB is where i placed my grid with your code. Can you see what is wrong with it? - Rick Weller

This is great but it should be a plugin, not a base class! - Juan Mendes

@JuanMendes You are probably right, but I guess that answer shows the main idea for solution to a problem it should not be very hard to make plugin out of this. Maybe I'll do it when I get a chance, should be fun thing to do :) - sbgoran

The straightforward solution is just save somewhere in js index of selected row. Then after reload you could easily select this row by index using grid's selection model.

Get selection model: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel

var selectionModel = grid.getSelectionModel()

Get selected rows: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection

var selection = selectionModel.getSelection()

Set selected row back: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select

selectionModel.select(selection)

Respondido 02 Feb 12, 16:02

i think i do something wrong because it isnt working. i use a listener: itemclick: function () { var selectionModel = grid.getSelectionModel(); var selection = selectionModel.getSelection(); selectionModel.select(selection); var data = grid.getSelectionModel().selected.items[0].data; ND.internals.load({ url: ND.url }); - Rick Weller

you should restore selection after your reloading is completed. So it's a good idea call selectionModel.select in grid's store load event. - Andrey Selitsky

Here is another way to select the previously selected record:

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

For some reason the grid.getSelectionModel().select(record) method wasn't working for me, but selecting by index seems to work.

Edit: found out why grid.getSelectionModel().select(record) method wasn't working. Apparently the store is reloaded, the record instances aren't the same (they have different automatically generated Ext IDs). You have to use selectAt() in this case.

respondido 14 mar '13, 21:03

#{GridPanel-ID}.getSelectionModel().select(index, true); Works good for me :-) - Eagle_one

for extjs 4.1.7 users

need a workarround about the statement in

refreshSelection() {

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

}

thus setScrollTop no longer exists

so a working soluction is add me.getView().preserveScrollOnRefresh = true;

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

contestado el 10 de mayo de 13 a las 20:05

In your initComponent you try to use "me" without defining it. - Jerinaw

i have make modification on this code. If you make selection, and aplys a filter on the store and reload it, the selection model have a first empty array in this selected collection ( at index 0 ).

This modification is in the last line of the "refreshSelection" function.

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

Respondido 09 Jul 12, 18:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.