PageSize not working on Grid in ExtJS

Question

I want to limit the records per page to a specific number apply paging in the grid but its failing due to some reason.

Can anyone say why it's failing, or not working? Here's the Fiddle.

My Store

    var myStore=Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['busname', 'time', 'typebus',],
        pageSize:2,
        data: [{
            busname: 'ABCD',
            time: '15:30:00',
            typebus: 'AC Volvo',

        }, {
            busname: 'aaa',
            time: '13:30:00',
            typebus: 'Seater',

        },{
            busname: 'AAAA',
            time: '18:30:00',
            typebus: 'Sleeper',

        },{
            busname: 'ABCD',
            time: '19:30:00',
            typebus: 'AC Volvo',

        },]

Grid panel

Ext.create('Ext.grid.Panel', {
        xtype :'gridpanel',
        itemId:'busTimegrid',
        pageSize:1,
        title: 'BUS DEATILS',
        mapperId:'getBusTime',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Bus Name',
            dataIndex: 'busname',
            editor: 'textfield'
        }, {
            text: 'Bus Time',
                dataIndex: 'time',
            xtype: 'gridcolumn',
            renderer: function (value) {
                if (value instanceof Date)
                    return Ext.util.Format.date(value, 'H:i:s');
                else
                return value;
            },
            flex: 1,
            editor: {
                xtype: 'timefield',
                format: 'H:i:s',
                allowBlank: true,
                maskRe: /[0-9,:]/,
            }
        }, {
            header: 'Bus TYpe',
            dataIndex: 'typebus',
            editable:true,
            renderer: function (value) {
                if (Ext.isNumber(value)) {
                    var store = this.getEditor().getStore();
                    return store.findRecord('id', value).get('name');
                }
                return value;
            },
            editor: {
                xtype: 'combo',
                displayField: 'name',
                valueField: 'id',
                editable:true,
                forceSelection:true,
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [{
                        id: 1,
                        name: 'AC Volvo'
                    }, {
                        id: 2,
                        name: 'Seater'
                    }, {
                        id: 3,
                        name: 'Sleeper'
                    }]
                })

            }
        }],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
        },
        listners: [{
            fn: 'onUsernamefieldBlur',
            event: 'blur',
            delegate: 'busname'
        }],
        onUsernamefieldBlur: function (textfield, e, eOpts) {

        if (textfield.getValue() === '') {
            Ext.Msg.alert("Busname can't be empty");
            textfield.setFocus(true);
        }
    },
        height: 200,
        width: 400,
            dockedItems: [{
            xtype: 'pagingtoolbar',
            store: myStore,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: Ext.getBody()

    });

Added the pageSize but still the paging is not working. I don't seem to find out what's the issue. How can I find out the exact thing I'm missing?

The data of your grid is static or you are getting it from the server? — qmateub, Mar 07 '17 at 14:49
Please note that questions that point elsewhere to show the code are not on topic here, because links break so often they cause a significant amount of repair work. Fiddles are welcome and encouraged, but they are not sufficient for Stack Overflow questions on their own. Would you be able to edit the gist of the code into the question? — halfer, Mar 10 '17 at 20:42
I'm pleased you solved it, but my remark still stands. This question may be put on hold if it doesn't meet the posting guidelines. Remember that questions asked here are for many future readers, not just the original poster. Thank you if you can edit it into shape! — halfer, Mar 13 '17 at 08:31

score 2 · Accepted Answer · answered Mar 07 '17 at 14:35

2

From your question I observed you want to achieve local pagination which is different from actual pagination. To do this first you need to mention memory proxy and enable the pagination , Put my below code in your store.

   proxy: {
           type: 'memory',
          enablePaging: true
    }

I am able to get the pagination by putting the above proxy in your fiddle.

answered Mar 07 '17 at 14:35

Surya Prakash Tumma

2,153
4
27
47

In actual i'm trying to load it from the server database, Same data's are appearing in every page Buddy?? Why.. – Mar 08 '17 at 04:45
1

No it can't happen like we think.. if the data is from remote then pagination should be implemented at server side as well – Surya Prakash Tumma Mar 08 '17 at 05:13
1

http://stackoverflow.com/questions/27501140/paging-in-extjs-4-grid-is-not-working/27501505#27501505 – Surya Prakash Tumma Mar 08 '17 at 05:16
Thanks for making me understand. – Mar 08 '17 at 10:10
Can you please look into this, they are using only a normal pagination and remote data, but still the pagination works.. How?? https://fiddle.sencha.com/fiddle/5s – Mar 09 '17 at 12:46
1

Hi John it is working as expected.. if you open Dev tools network tab up on click on next or prev we can see clearly it is calling the service and getting 50 records note: it is not xhr just click all to view the service call – Surya Prakash Tumma Mar 09 '17 at 14:08
Hai, Surya. can you help me with this issue. I see you an expertised in this. Please.. http://stackoverflow.com/questions/42759544/pagination-with-remote-data-for-the-combobox – Mar 14 '17 at 04:51

score 0 · Answer 2 · answered Mar 13 '17 at 08:28

(Posted on behalf of the OP).

This worked fine, after I followed what Surya prakash suggested a solution.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        run();
        window.show();
    }
});

function run() {
    var myStore=Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['busname', 'time', 'typebus',],
        pageSize:2,
        proxy: {
           type: 'memory',
          enablePaging: true
    },
        data: [{
            busname: 'ABCD',
            time: '15:30:00',
            typebus: 'AC Volvo',

        }, {
            busname: 'aaa',
            time: '13:30:00',
            typebus: 'Seater',

        },{
            busname: 'AAAA',
            time: '18:30:00',
            typebus: 'Sleeper',

        },{
            busname: 'ABCD',
            time: '19:30:00',
            typebus: 'AC Volvo',

        },]
    });

    Ext.create('Ext.grid.Panel', {
        xtype :'gridpanel',
        itemId:'busTimegrid',
        pageSize:1,
        title: 'BUS DEATILS',
        mapperId:'getBusTime',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Bus Name',
            dataIndex: 'busname',
            editor: 'textfield'
        }, {
            text: 'Bus Time',
                dataIndex: 'time',
            xtype: 'gridcolumn',
            renderer: function (value) {
                if (value instanceof Date)
                    return Ext.util.Format.date(value, 'H:i:s');
                else
                return value;
            },
            flex: 1,
            editor: {
                xtype: 'timefield',
                format: 'H:i:s',
                allowBlank: true,
                maskRe: /[0-9,:]/,
            }
        }, {
            header: 'Bus TYpe',
            dataIndex: 'typebus',
            editable:true,
            renderer: function (value) {
                if (Ext.isNumber(value)) {
                    var store = this.getEditor().getStore();
                    return store.findRecord('id', value).get('name');
                }
                return value;
            },
            editor: {
                xtype: 'combo',
                displayField: 'name',
                valueField: 'id',
                editable:true,
                forceSelection:true,
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [{
                        id: 1,
                        name: 'AC Volvo'
                    }, {
                        id: 2,
                        name: 'Seater'
                    }, {
                        id: 3,
                        name: 'Sleeper'
                    }]
                })

            }
        }],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
        },
        listners: [{
            fn: 'onUsernamefieldBlur',
            event: 'blur',
            delegate: 'busname'
        }],
        onUsernamefieldBlur: function (textfield, e, eOpts) {

        if (textfield.getValue() === '') {
            Ext.Msg.alert("Busname can't be empty");
            textfield.setFocus(true);
        }
    },
        height: 200,
        width: 400,
            dockedItems: [{
            xtype: 'pagingtoolbar',
            store: myStore,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: Ext.getBody()

    });
}

PageSize not working on Grid in ExtJS

2 Answers2

Linked