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

    }
})

See also http://stackoverflow.com/q/9111084/539048 – GreenGiant Oct 30 '14 at 16:47 — GreenGiant, Oct 30 '14 at 16:47

score 11 · Accepted Answer · answered Jun 10 '13 at 09:01

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

score 3 · Answer 2 · answered Jun 10 '13 at 09:24

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.

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. — Nux, Jul 15 '16 at 16:51

score 2 · Answer 3 · answered Jun 11 '13 at 15:45

2

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

answered Jun 11 '13 at 15:45

Christoph

1,023
11
23

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. – Christoph Jun 12 '13 at 04:27

score 2 · Answer 4 · answered Jun 28 '13 at 02:08

2

select row after loading the store by adding a callback:

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

answered Jun 28 '13 at 02:08

vvns

3,548
3
41
57

score 2 · Answer 5 · answered Mar 19 '14 at 05:57

2

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

http://bit.ly/1iBwb2i

answered Mar 19 '14 at 05:57

freegians Gwon

21
1

score 0 · Answer 6 · answered Jun 10 '13 at 09:02

0

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

answered Jun 10 '13 at 09:02

mfruizs

770
14
20

thanks u but it's not working for me. @MMT's answer working :) – DeLe Jun 10 '13 at 09:23

score 0 · Answer 7 · answered Jul 13 '16 at 01:44

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'

score 0 · Answer 8 · answered Jun 04 '17 at 04:43

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

score 0 · Answer 9 · answered Aug 05 '20 at 09:59

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.

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

9 Answers9