Ext.ux.grid.DemonPageSizer

[demon222]

Ext.namespace('Ext.ux.grid');
Ext.ux.grid.DemonPageSizer = Ext.extend(Ext.form.ComboBox, {
limitText: this.limitText || ' Limit: ',
pageSizes: this.pageSizes || [[5, 5], [10, 10], [25, 25], [50, 50], [100, 100], [200, 200], [500, 500]],
displayField: 'name',
valueField: 'value',
typeAhead: true,
mode: 'local',
width: 60,
forceSelection: true,
triggerAction: 'all',
selectOnFocus: true,
initComponent: function () {

Ext.apply(this, {
store: new Ext.data.SimpleStore({
fields: ['value', 'name'],
data: this.pageSizes
})
});

this.on({
scope: this,
render: {
fn: this.setDefault
}
});

Ext.ux.grid.DemonPageSizer.superclass.initComponent.apply(this, arguments);
},

init: function (pagingToolbar) {
pagingToolbar.on('render', this.onInitView, this);
},

onInitView: function (pagingToolbar) {

pagingToolbar.insert(12, '-');
pagingToolbar.insert(12, this);
pagingToolbar.insert(12, this.limitText);

this.on('select', this.onPageSizeChanged, pagingToolbar);
},
onPageSizeChanged: function (combos) {
this.pageSize = parseInt(combos.value);
this.doLoad(0);
},

setDefault: function () {
this.setValue( ((parseInt(this.initialSize) > 0) ? this.initialSize : 25) );
}

});


use:




...
pagingToolbar: function(){
return {
xtype:'paging',
store:this.store,
displayInfo:true,
plugins: [new Ext.ux.grid.DemonPageSizer()]
};
},
...

[mitchellsimoens]

Maybe tell us what it does and/or post screenshots so we don't have to go through you code to find out.

[tobiu]

hi demon,

it seems a bit similar to the andrie pageSize plugin, but more lightweight.
http://www.extjs.com/forum/showthread.php?70557-Ext.ux.Andrie.pPageSize

tipp: you only need 1 store field for display / value (displaying pairs of identical values atm).


kind regards,
tobiu