2012/02/18

[ExtJS] Keeping Grid Selections After a Store Reload in Grid

In some cases, we have no idea what time the data in grid is out of date. In order to get the last data in server, it’s necessary reload store in grid periodically. However, after a single/multiple slelection grid reload, the selection state will be lost (i.e., No records are selected).

image

A checkbox selection example

To slove this probelm, firstly, we have to push each selected records into grid’s variable selectedRecords whenever 'selectionchange' event is fired from grid. Something like this:

Ext.each(selecteds, function(selected) {
     me.selectedRecords.push(selected.index); 
});

Secondly, restore the selection state by selecting the records recored in selectedRecords whenever 'datachanged' event is fired from store (i.e., data is reloaded from server) is fired.

Ext.each(me.selectedRecords, function(r) { 
     me.getSelectionModel().select(r, true);
});
The complete example code is shown below. It’s tested under ExtJS4.0.

SelectionStatefulGrid.js

Ext.define('Vos.view.SelectionStatefulGrid', {
    extend : 'Ext.grid.Panel',
    selType : 'checkboxmodel',
    selModel : {
        mode : 'MULTI'
    },
    store : 'myStore',
    columns : [
        {
            header : 'my date',
            dataIndex : 'data'
        }
    ],
    initComponent : function() {
        var me = this;
        me.callParent();  
        me.selectedRecords = [];
        me.unlockState = false;
        // Push the the selection state into selectedRecords
        me.on('selectionchange', function(selectionModel, selecteds) {
            if (me.selectedRecords != null && me.unlockState) {
                me.selectedRecords = [];
                Ext.each(selecteds, function(selected) {
                    me.selectedRecords.push(selected.index);
                });
            }
        });
         // Select the records in selectedRecords
         me.getStore().on('datachanged', function(store, records) {
            Ext.each(me.selectedRecords, function(r) {
                me.unlockState = false;
                me.getSelectionModel().select(r, true);
            });
            me.unlockState = true;
        });        
    }
});

沒有留言:

4種PDF轉Word的免費方法(pdf to word, pdf to doc, pdf2word, pdf2doc)

本文將介紹4種 將PDF轉Word檔 的方法,分別分析其效能、方便性、精確性等指標。 1. nitropdf提供的線上 Convert PDF to Word (DOC) 這是一個 線上免費PDF轉Word檔 的服務,網址: http://www.pdftoword.com...