Search code examples
paginationgridextjs5static-data

Extjs 5.0 grid paging with static data


Pagination is not working for my grid. Could somebody please let me know why. Am making use of static data which is got by reading the xml from controller. I want to display 10 records per page.

Model.js

Ext.define('Mymodel.model.settingModel', {
    extend: 'Ext.data.Model'
});    

Store.js

Ext.define('Mymodel.store.settingStore', {
    extend: 'Ext.data.Store',
    requires:['Mymodel.model.settingModel'],
    model: 'Mymodel.model.settingModel',
    pageSize:10,
     lastOptions: {params: {start: 0, limit: 10}}
 });

View.js

Ext.define('Mymodel.view.graphPanel', {
    extend: 'Ext.grid.Panel',
    layout:'border',
    alias: 'widget.graphPanel',
    name:'graphPanel',
    title: 'Tests',
    store: 'Mymodel.store.settingStore',
    pageSize:10,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'Mymodel.store.settingStore',   // same store GridPanel is using
        dock: 'bottom',
        pageSize: 10,
        displayInfo: true
    }]
 });

Controller.js

Ext.define('Mymodel.controller.myController', {
extend:'Ext.app.Controller',
models:['Mymodel.model.settingModel'],
stores:['Mymodel.store.settingStore'],
init: function() {
Ext.Ajax.request({
            url: 'Sample.xml',
            success: function(response, opts) {
                var txt = response.responseText;
                parser=new DOMParser();
                xmlDoc=parser.parseFromString(txt,"text/xml");

                // I now build the modelField Array, Data Array and column array based on the xml      
                got and give it to the stores.

                var store = Ext.data.StoreManager.lookup('Mymodel.store.settingStore');
                store.setFields(modelfieldArr);
                store.setData(completeDataArr);
                store.setPageSize(10);
                store.load({
                  params: {
                    start: 0,
                    limit: 10
                 }
                 });

                var gridview = Ext.ComponentQuery.query('graphPanel')[0];
                gridview.reconfigure(store,columnarr);
            }
        });

    }
    });

Solution

  • You should set proxy to memory and set enablePaging: true.

    Ext.define('Mymodel.store.settingStore', {
        extend: 'Ext.data.Store',
        config: {
            proxy: {
                type: 'memory',
                enablePaging: true,
                reader: 'array'
            }
        },
        requires: ['Mymodel.model.settingModel'],
        model: 'Mymodel.model.settingModel',
        pageSize: 10
    });
    

    To load data use this code:

    store.getProxy().setData(data);
    store.read();
    

    Example: http://jsfiddle.net/z2x074n0/3/