Ext.ux.data.PagingStore [v0.5]

[ash4aque]

Thanks a lot!!!

[perseusy]

PagingMemoryProxy really limited every operation in "current page".....
Why not just enhance the MemoryStore to support paging?

[Hisamitsu]

Ignore my previous question. I've found the functionality I was looking for. PagingMemoryProxy is just what I needed. It allows Ext.toolbar.Paging to control paging of local data contained in an Ext.data.Store. Very helpful! The code behind the Sliding Pager example under the Extjs4 Grid Examples clearly demonstrates usage.

Thank you!!

[makiavelli]

Has anyone example for PagingJsonStore for ExtJs 4?
I need to store all remote data in local store with paging.
Ang use this store for grid with filtering and reloading.
But I cant find any solution with remote data.

[perseusy]

Grid definition:

Ext.define('myGrid', {
    extend: 'Ext.panel.Panel',
 alias: 'widget.mygrid',
    layout: {
        type: 'border'
    },
 requires: [
  'Ext.grid.*',
  'Ext.data.*',
  'Ext.toolbar.Paging',
  'Ext.ux.grid.FiltersFeature'
 ],
 
 defaults: {
  split: true
 },
 
 initComponent: function() {
  Ext.log({
   msg: Ext.getClassName(this) + '.initComponent: ' + 'start',
   level: 'info',
   stack: false
  });
  
  this.items = [{
   xtype: 'gridpanel',
   itemId: 'grdSearchResult',
   region: 'center',
   forceFit: false,
   selType: 'cellmodel',
   columns: [{
    xtype: 'gridcolumn',
    itemId: 'colNameSpace',
    text: 'Name Space',
    sortable: true,
    hideable: false,
    menuDisabled: false,
    draggable: true,
    groupable: false,
    dataIndex: 'name_space',
    minWidth: 100,
    filter: {
     type: 'string'
    },
    editor: {
     xtype: 'textfield',
     readOnly : true
    }
   }],
   plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
     clicksToEdit: 2
    })
   ],
   features: [{
    ftype: 'filters',
    encode: false,  // json encode the filter query
    local: true  // defaults to false (remote filtering)
   }],
   dockedItems: [{
    xtype: 'pagingtoolbar',
    itemId: 'tbrPaging',
    dock: 'bottom',
    displayInfo: true,
    displayMsg: 'Displaying {0} - {1} of {2}',
    emptyMsg : 'No data to display',
    items: [
    '-',
    {
     xtype: 'numberfield',
     itemId: 'nbfPageSize',
     fieldLabel: 'Records Per Page',
     labelAlign: 'right',
     value: 20,
     size: 5,
     minValue: 1,
     allowDecimals: false
    },
    '-',
    {
     xtype: 'button',
     itemId: 'btnClearFilter',
     text: 'Clear All Filters'
    }]
   }],
   viewConfig: {
   }
  }];
  
  this.callParent(arguments);
    }
});

My controller definition:

Ext.define('myController', {
    extend: 'Ext.app.Controller',
 
    init: function() {
  var me = this;
  
        this.control({
           '.mygrid > #grdSearchResult > #tbrPaging > #nbfPageSize': {
    'change': {fn: this.setPageSize, scope: this, single: false}
            },
            '.mygrid > #grdSearchResult > #tbrPaging > #btnClearFilter': {
                'click': {fn: this.clearFilter, scope: this, single: false}
            }
         });
    },
    
 doSearch: function(grdResult) {
  var me = this;
  var tbrPaging = grdResult.child('#tbrPaging');
  var nbfPageSize = tbrPaging.child('#nbfPageSize');
  
  var arrayTable = new Array();
  
  //get all data in arrayTable
  
  var pagingStore = grdResult.getStore();
  if (pagingStore) pagingStore.removeAll(false);
  
  pagingStore = Ext.create('myStore');
  grdResult.reconfigure(pagingStore);
  tbrPaging.bindStore(pagingStore);
  
  pagingStore.getProxy().data = arrayTable;
  pagingStore.pageSize = nbfPageSize.getValue();
  pagingStore.load();
 },
  setPageSize: function(fieldThis, newValue, oldValue, eOpts) {
  var grdSearchResult = fieldThis.up('#tbrPaging').up('#grdSearchResult');
  var store = grdSearchResult.getStore();
  if (store) store.pageSize = fieldThis.getValue();
 },
 
   clearFilter: function(fieldThis, event, eOpts) {
  var grdSearchResult = fieldThis.up('#tbrPaging').up('#grdSearchResult');
  grdSearchResult.filters.clearFilters();
 }
});

The store:

Ext.define('myStore', {
    extend: 'Ext.data.Store',
    model: 'myModel',
 
 requires: [
  'Ext.ux.data.PagingMemoryProxy'
 ],
 
 autoLoad: false,
 pageSize: 20,
 proxy: {
  type: 'pagingmemory',
  reader: {
   type: 'json'
  }
 }
});

The Model:

Ext.define('myModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name_space', type: 'string'}
    ]
});

[theWalli]

Thanks for this example.
I tried to rebuild your code but i can't get it working.
The toolbar is visible and shows the correct numbers. eg.
at the moment I have 21 records and a page size of 10.
It shows that there are 3 pages etc. but on every page I can see all of my 21 records...

Can you post a snippet where the data is loaded too?

[makiavelli]

I also tried without any result. Can you provie snippet?

[perseusy]

I am on my vacation right now and will post later.


--- I had updated the post adding the definition of store and model.

[PrashanthShetty]

Hi,

We are using Extjs 4.1 pagingMemoryProxy for one of our requirements.

Presently we see issue in Grid filtering in the same.

1. Load Grid with 10 items per page of 50 records
2. Try Filtering in the First column, with the textvalue which is there in last page of store
3. Filtered data is not paginated correctly, meaning if the filtered record is in 5th Page, Then user has to navigate to 5th page to see the records & all the other 4 pages says No Records in Grid.

Please let us know if any fix/work arround for this issue.

Thanks,
Prashanth

[hensor]

I'm loading rows into my gridpanel via several loads, where I add the new rows to the excisting store. This does not play well with PagingStore. Are there some sort of fix/hack for this to be supported as well?

I'm using v0.5 and ExtJS 3.3.1.