Saturday, March 12, 2011

ExtJs Grid Page Size Plugin

Hello,

Here is another ExtJs blog. Recently I got a requirement for page size plugin in ExtJs grid. User can control number of records in the grid. It should be displayed in grid bottom toolbar. See the image below.


So we created a plugin for it by extending Ext Combo Box. See the code below.


Ext.ux.PageSizePlugin = function() {
Ext.ux.PageSizePlugin.superclass.constructor.call(this, {
          store: new Ext.data.SimpleStore({
                 fields: ['text', 'value'],
                 data: [['50', 50], ['100', 100],['150', 150]]
          }),
                  mode: 'local',
          displayField: 'text',
          valueField: 'value',
          editable: false,
          allowBlank: false,
          triggerAction: 'all',
          width: 50
    });
};

After this extend Ext combo and add the required listeners.

Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox, {
init: function(paging) {
      paging.on('render', this.onInitView, this);
},

onInitView: function(paging) {
       paging.add('-',
      this,
      'Items per page'
);
this.setValue(paging.pageSize);
        this.on('select', this.onPageSizeChanged, paging);
},

onPageSizeChanged: function(combo) {
       this.pageSize = parseInt(combo.getValue());
       this.doLoad(0);
}
});

So our plugin is ready. Now add it to paging toolbar.

var pager = new Ext.PagingToolbar({
pageSize: 50,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
plugins: [new Ext.ux.PageSizePlugin()],
listeners: {
beforechange : function (pager, params )  {
}
}
});

Add this toolbar in bottom tool bar of the ExtJs grid.

After this we can use page size while reloading grid data store.

store.load({params:{limit: pager.pageSize}});

Use this limit parameter in your database query.

3 comments:

  1. any idea how to automate this to make it persistent?

    ReplyDelete
  2. Hi Robert,

    Thanks for your comment but I did not get what exactly do you mean by persistent? Can you please clarify more.

    ReplyDelete
  3. hello Hiren, what i meant is have ExtJS save the drop-down value automatically using the StateManager, and have it loaded automatically next time the user is viewing the same grid. So, after a selection has been made and the screen closed, next time we open that screen, we should see the combo with the last value and the pagination use that last combo value.
    Thanks

    ReplyDelete