ExtJS/Sencha Paging Event Handling and Custom Parameters

Sencha ( formerly ExtJS ) has a cool paging toolbar at the bottom of their Grid List component. There are sometimes scenarios that I want to pass values, lets say ID or search terms, for the next/previous page to retrieve. Sadly the buttons ( First, Previous, Next, Last and Refresh ) does not have any onClick event handlers to initialize the parameters before sending to the database. The only thing close to handling this requirement that I found is that you have to set a listener for the beforechange event under Ext.PagingToolbar to initialize the parameters and values before the component sends the data to the server. This way any variables can be set before sending.

The variables that are sent to the server is normally start and limit, what if I want to add a filter to the query? One way is adding baseParams to your data store and change their value using setBaseParam when the beforechange event is fired.

Sample code below.

 
var userStore = new Ext.data.JsonStore({
    root: 'users',
    totalProperty: 'totalCount',
    idProperty: 'uId',
 
    baseParams: {
        param1: "",
        param2: ""
    },
 
    fields: ['userId', 'username'],
 
    proxy: new Ext.data.HttpProxy({
        url:    'url_address.php',
        method: 'POST'
    })
 
});
 
var grid = new Ext.grid.GridPanel({
    width: 600,
    height: 800,
    store: userStore,
 
    loadMask: true,
    selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
 
    columns:[{
        header: "Username",
        dataIndex: 'username',
        width: 100,
        sortable: true
    }],
 
 
    viewConfig: {
        forceFit:true,
        enableRowBody:true
    },
 
    ...
    ...
    ...
 
    bbar: new Ext.PagingToolbar({
        pageSize: 21,
        store: userStore,
        displayInfo: true,
        displayMsg: 'Displaying users {0} - {1} of {2}',
        emptyMsg: "No users to display",
        listeners: {
            beforechange: function() {
                userStore.setBaseParam( 'param1', "val1"); // You can change "val1" to a function call for a more dynamic value update
                userStore.setBaseParam( 'param2', "val2" );
            }
        }
 
    })
});

There you have it. Hope this helps those who want to have more control on Sencha’s paging mechanism

One Reply to “ExtJS/Sencha Paging Event Handling and Custom Parameters”

Leave a Reply

Your email address will not be published. Required fields are marked *