EXTJS 3.3.3 Grid

Question

I am developing a checkbox grid list with pagination using the EXTJS grid. I need to remember the selected record when the page navigation is performed.

Details: 1) Go to page:1 and selected rows 1,2 and 3. 2) Now navigate to page:2 3) Come back to page:1 4) The rows 1,2 and 3 which are already selected should be shown as selected

Is there is any api in grid which handles this kind of function?

Thanks in advance.

AJJ AJJ · Accepted Answer · 2012-01-21T11:02:40

Thanks for your responses. I have achieved my design by implementind a plugin for grid. The plugin looks as,

Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.CheckBoxMemory = Ext.extend(Object,
{
   constructor: function(config)
   {
      if (!config)
         config = {};

      this.prefix = 'id_';
      this.items = {};
      this.idProperty = config.idProperty || 'id';
   },

   init: function(grid)
   {
      this.view = grid.getView()
      this.store = grid.getStore();
      this.sm = grid.getSelectionModel();
      this.sm.on('rowselect', this.onSelect, this);
      this.sm.on('rowdeselect', this.onDeselect, this);
      this.store.on('clear', this.onClear, this);
      this.view.on('refresh', this.restoreState, this);
   },

   onSelect: function(sm, idx, rec)
   {
      this.items[this.getId(rec)] = true;
   },

   onDeselect: function(sm, idx, rec)
   {
      delete this.items[this.getId(rec)];
   },

   restoreState: function()
   {
      var i = 0;
      var sel = [];
      this.store.each(function(rec)
      {
         var id = this.getId(rec);
         if (this.items[id] === true)
            sel.push(i);

         ++i;
      }, this);
      if (sel.length > 0)
         this.sm.selectRows(sel);
   },

   onClear: function()
   {
      var sel = [];
      this.items = {};
   },

   getId: function(rec)
   {
      return rec.get(this.idProperty);
   }
});

This plugin was called from gird as,

Ext.grid.Gridpanel({
store: 'someStore',
plugins: [new Ext.ux.plugins.CheckBoxMemory({idProperty: "recordID"})]

});

Hope this helps some one.

EXTJS 3.3.3 Grid

3 Answers