How to Re-selecting row after store.load()

Question

I have grid panel and a button.
when i click button it will transfer data via ajax and after finish grid will reload.
I try to re-selected row (in here i give u example is first row), but anyway it's not working

Ext.Ajax.request({
    url: ...,
    params: {
        v: ...                  
    },
    success: function(response){
        grid.store.load();                                            
        grid.getSelectionModel().select(0, true); // example first row

    }
})  

Esparto

See also https://mcmap.net/q/721952/-remember-after-refresh-selected-row-in-extjs-grid/539048 – Bobbobb

Answer 1

try selecting row in callback

grid.store.load({
  scope:this,
  callback:function(records, operation, success){
     grid.getSelectionModel().select(0, true); 
  }
});

or

grid.store.load(function(records, operation, success){
  grid.getSelectionModel().select(0, true); 
});

Greggrega

Answer 2

You can make your row selections survive across store reloads by applying the following overrides:

Ext.override(Ext.view.View, {
    preserveSelectionOnRefresh: true,
    constructor: function() {
        this.callOverridden(arguments);
        if (this.preserveSelectionOnRefresh) {
            this.mon(this.getStore(), {
                beforeload: this.beforeStoreLoadPreserveSelectionRoutine,
                scope: this
            });
        }
    },
    beforeStoreLoadPreserveSelectionRoutine: function() {
        var sm = this.getSelectionModel(),
            selection = sm.getSelection(),
            i = 0,
            l = selection.length,
            savedSelection = [];
        delete sm.savedSelection;
        for (; i < l; i++) {
            savedSelection.push(selection[i].getId());
        }
        if (savedSelection.length) {
            sm.savedSelection = savedSelection;
        }
    }
});
Ext.override(Ext.selection.Model, {
    refresh: function() {
        // include selections saved across store reloads        
        if (this.savedSelection && this.savedSelection.length) {
            var rs = [],
                r,
                j = 0,
                l = this.savedSelection.length;
            for (; j < l; j++) {
                r = this.store.getById(this.savedSelection[j]);
                if (r) {
                    rs.push(r);
                }
            }
            if (rs.length) {
                this.select(rs, false, true);
            }
        }
        this.callOverridden();
        delete this.savedSelection;
    }
});

What they do is just saving what was selected before reloading the store and ensuring those records are selected again after the view is refreshed. Tested on Ext JS 4.1.2.

Diathermic

Actually in Ext4 it was possible to simply do var savedRecords = selModel.getSelection() and then simply use selModel.select(savedRecords)... But since Ext 5 or 6 you need to re-get all records from store (as in above override) before selecting them. So your solution is more forward-compatible. – Dystopia

Answer 3

... and if you are using a buffered store and Ext JS 4.2+, you could use the scrollTo function, which selects AND scrolls the view to your selection:

grid.store.load(function(records, operation, success){
  grid.view.bufferedRenderer.scrollTo(0, true);
});

Griqua

the 4.2 scrollTo takes over the responsibility to load pages if they are not in the PageMap of the store. I think there is no such feature in 4.1, so you would have to load pages by your own. – Griqua

Answer 4

select row after loading the store by adding a callback:

grid.store.load(function(records, operation, success) {
    grid.getView().select(0);
});

Shiri

Answer 5

grid.store.load ==> grid.store.on

http://bit.ly/1iBwb2i

Billyebilobate

Answer 6

On response, maybe you can use a field to differentiate it :

Sencha 4.0.7: store finde

store.find(fieldName, value);

Another way, but I think it isn't work after load store, it's use:

Sencha: getLastSelected

grid.getSelectionModel().getLastSelected()

Tudela

thanks u but it's not working for me. @MMT's answer working :) – Esparto

Answer 7

Here is a plugin the takes care of that for you:

https://github.com/roberto-rodriguez/ExtJs_GridMultipageSelectionPlugin

The plugin keeps the selection across the pages in the pagination grid. Also includes a function named: getSelection() to the grid, which returns the an array with the ids of the selected rows.

The plugin assumes there is a column with dataIndex: 'id'

Mahmoud

Answer 8

In case you want to select whatever was last selected (not just the first row as shown in the accepted answer) this is the simplest I think:

grid.store.load(function() {
    var view = grid.getView(),
        selModel = grid.getSelectionModel(),
        lastSelected = selModel.getLastSelected();

    view.select(lastSelected);
});

or better, a listener for all loading done by the store in the future:

grid.store.on('load', function() {
    var view = grid.getView(),
        selModel = grid.getSelectionModel(),
        lastSelected = selModel.getLastSelected();

    view.select(lastSelected);
});

grid.store.load();

Jaynajayne

Answer 9

We were having the same issue on Sencha 5.0.1. We found out this can be solved by adding an idProperty to your model. After that you can just call the reload() function on the store.

In your model:

idProperty: 'yourIdentifyingProperty',

Then

yourGrid.getStore().reload();

I'm not sure if you also have to bind the selection of the grid, but if the above doesn't work you could also try that.

Seamark