Extjs3.4 Get all data from grid store which more than 1 page

Question

How to get all data from a grid which have more than 1 page?

I set only to display 50 records in a page, but my total data is up to 52 records which store into 2 pages.

enter image description here

May i know how to get all data from this 2 pages?

Below is the code which only can get 1 page data...

ExportButtonTestJS = Ext.extend(One.Report, {
    reportName: 'ExportButtonTestRpt',
    autoExecute: true,
    isDetailPage: false,
    listeners: {
        bbarconfig: function(report, bbarConfig) {
          bbarConfig.items.push({
            xtype: 'button',
            text: 'Export',
            disabled: false,
            onClick : function () {
                console.log(report.grid.getStore().data.items);
                }
          });
        }
    }
});

score 6 · Accepted Answer · answered Nov 07 '13 at 10:13

Default page size is 50 for Ext.data.store. So even the data in store is more than 50 records (like for example 400) only 50 records will be stored in a Ext.store at any time. Once we go to next page next records from 51 to 100 records will be stored in store.

Two solutions for your requirement:

Increase pageSize as you want -- Eg: pageSize:500
Set buffered:true in Ext.data.store

On setting buffered:true, you can get all records of store at a time by using grid.store.getRange(start, end). But in this case you need to load the store once for the first time.

score 2 · Answer 2 · answered Oct 26 '15 at 16:11

Got accross this same problem, this is what i had to do in order to get data from all pages:

var grid = Ext.getCmp('myGrid');    

//store current pageSize
var currentPageSize = grid.getBottomToolbar().pageSize;

var store = grid.getStore();     // store from grid 

//reload store with total nº of records     
store.reload({params:{start:0,limit:store.getTotalCount()}});

//once the grid is reloaded with all records, then do whatever you need.
store.on('load', function(store, recs, opt){

      var selected = store.getRange();  // getRange = get all records

      //this iterates over all records
      Ext.each(selected, function(item) {
           process here;
      }, this);

      //once you finished processing, reload grid with previous pageSize
      store.reload({params:{start:0,limit:currentPageSize}});
}, this, {single: true}); //single:true says this event will only trigger once

Hope this helps anyone, took me some time to get this working.

score 1 · Answer 3 · answered Nov 07 '13 at 07:25

1

Don't try to access items directly. Use the store methods for that.

Try report.grid.getStore().getRange()

See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Store-method-getRange

answered Nov 07 '13 at 07:25

BillyTom

2,519
2
17
25

i tried report.grid.getStore().getRange(1,52) but it only able display until 50 records, am i did something wrong? – Kim Nov 07 '13 at 07:48
Does your server side implement paging ? Is it returning 50 items or all ? – Lorenz Meyer Nov 07 '13 at 11:58

Extjs3.4 Get all data from grid store which more than 1 page

3 Answers3