Extjs 5.0 grid paging with static data

Question

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);
            }
        });

    }
    });

Krzysztof · Accepted Answer · 2014-09-21T09:07:35.797

0

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/

edited Sep 21 '14 at 09:07

answered Sep 21 '14 at 08:59

Krzysztof

15,900
2
46
76

I have a question. If I want to achieve the same thing by adding a column and its data dynamically by using grid.reconfigure() as done above, how can I do it – ASR Sep 24 '14 at 10:06
I meant suppose the grid columns and model fields were to be added dynamically using grid.reconfigure() how can paging be achieved – ASR Sep 24 '14 at 10:22

Extjs 5.0 grid paging with static data

1 Answers1