Grid Paging

[fractorr]

I came up with this to be able to change the number of records per page in a grid. Not sure if this is the best method to do it but it works.

    var gridFoot = grid.getView().getFooterPanel(true);

    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: 25,
        displayInfo: true,
        displayMsg: 'Displaying {0} - {1} of {2}',
        emptyMsg: "No information to display"
    });

    PerPageData = [
        ['10', 	'10'],
        ['25', 	'25'],
        ['50', 	'50'],
        ['100', '100'],
        ['0', 	'ALL']
    ];
    var ppstore = new Ext.data.SimpleStore({
        fields: ['num', 'txt'],
        data : PerPageData
    });

    var perPage = new Ext.form.ComboBox({
        store: ppstore,
        displayField:'txt',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        selectOnFocus:true,
        resizable:true,
        listWidth: 50,
        width: 50,
        value: '25'
    });

    function setPerPage()
    {
    	if (perPage.getValue() != 'ALL')
    	{
	    	paging.pageSize = parseInt(perPage.getValue());
    	}
    	else
    	{
    		paging.pageSize = ds.getTotalCount();
    	}

		paging.cursor = 0;
		ds.load({params:{start: paging.cursor, limit: paging.pageSize}});
    }
    perPage.on("select", setPerPage);

	paging.addSeparator();
	paging.addText("Per Page");
	paging.addField(perPage);

[Mark]

Thank you ver much for sharing this code snippet! Works great!

Greets,
Mark

[HeathT]

Very nice! Great snippet!

Thanks for sharing,
Heath

[fractorr]

Good to know someone actually found it useful.

[odpsoft]

the method great!these code is fine in work!

[vibez]

Fantastic code, cheers!

[sottwell]

Can you please clarify how to use this code? If I have

    var grid = new Ext.grid.GridPanel({
        el:'topic-grid',
        width:985,
        height:500,
        title:'View Data',
        store: store,
        cm: cm,
        trackMouseOver:false,
        loadMask: true,
        enableHdMenu: false,
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying rows {0} - {1} of {2}',
            emptyMsg: "No data to display",
            paramNames: {start: 'start', limit: 'limit'}
        })
    });

    grid.render();

where would I use this? Or can I use it at all with this format?

[santiago]

Sweet!!

[nagalla038]

Thank you ver much for sharing this code snippet! Works great!

Greets,
Mark

Hi Mark,

Can you tell me how to add an option of selecting number of records to be displayed in a grid when my code is like this:


var grid = new Ext.grid.GridPanel({ el:'topic-grid', width:985, height:500, title:'View Data', store: store, cm: cm, trackMouseOver:false, loadMask: true, enableHdMenu: false, bbar: new Ext.PagingToolbar({ pageSize: 25, store: store, displayInfo: true, displayMsg: 'Displaying rows {0} - {1} of {2}', emptyMsg: "No data to display", paramNames: {start: 'start', limit: 'limit'} }) }); grid.render