PDA

View Full Version : Ext.ux.Andrie.pPageSize



tobiu
6 Jun 2009, 4:00 PM
hi together,

i made some minor fixes about the position of this ux inside the toolbar, to make it work with ext3.0. without these, the item appears on the right end of the toolbar. changes marked red.

original topic:http://extjs.com/forum/showthread.php?t=17257

kind regards, tobiu



Ext.namespace('Ext.ux.Andrie');

/**
* @class Ext.ux.Andrie.pPageSize
* @extends Ext.PagingToolbar
* A combobox control that glues itself to a PagingToolbar's pageSize configuration property.
* @constructor
* Create a new PageSize plugin.
* @param {Object} config Configuration options
* @author Andrei Neculau - andrei.neculau@gmail.com / http://andreineculau.wordpress.com
* @version 0.6
*/
Ext.ux.Andrie.pPageSize = function(config){
Ext.apply(this, config);
};

Ext.extend(Ext.ux.Andrie.pPageSize, Ext.util.Observable, {
/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Show',

/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'items',

/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',

/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,

/**
* @cfg {Bool} dynamic
* True for dynamic variations, false for static ones
*/
dynamic: false,

/**
* @cfg {Array} variations
* Variations used for determining pageSize options
*/
variations: [5, 10, 20, 50, 100, 200, 500, 1000],

/**
* @cfg {Object} comboCfg
* Combo config object that overrides the defaults
*/
comboCfg: undefined,

/**
* @cfg {int} position
* The starting position inside the toolbar
*/
position: 11,

init: function(pagingToolbar){
this.pagingToolbar = pagingToolbar;
this.pagingToolbar.pageSizeCombo = this;
this.pagingToolbar.setPageSize = this.setPageSize.createDelegate(this);
this.pagingToolbar.getPageSize = function(){
return this.pageSize;
}
this.pagingToolbar.on('render', this.onRender, this);
},

//private
addSize:function(value){
if (value>0){
this.sizes.push([value]);
}
},

//private
updateStore: function(){
if (this.dynamic) {
var middleValue = this.pagingToolbar.pageSize, start;
middleValue = (middleValue > 0) ? middleValue : 1;
this.sizes = [];
var v = this.variations;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue - v[v.length - 1 - i]);
}
this.addToStore(middleValue);
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
}else{
if (!this.staticSizes){
this.sizes = [];
var v = this.variations;
var middleValue = 0;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
this.staticSizes = this.sizes.slice(0);
}else{
this.sizes = this.staticSizes.slice(0);
}
}
this.combo.store.loadData(this.sizes);
this.combo.collapse();
this.combo.setValue(this.pagingToolbar.pageSize);
},

setPageSize:function(value, forced){
var pt = this.pagingToolbar;
this.combo.collapse();
value = parseInt(value) || parseInt(this.combo.getValue());
value = (value>0)?value:1;
if (value == pt.pageSize){
return;
}else if (value < pt.pageSize){
pt.pageSize = value;
var ap = Math.round(pt.cursor/value)+1;
var cursor = (ap-1)*value;
var store = pt.store;
if (cursor > store.getTotalCount()) {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(cursor-value);
}else{
store.suspendEvents();
for (var i = 0, len = cursor - pt.cursor; i < len; i++) {
store.remove(store.getAt(0));
}
while (store.getCount() > value) {
store.remove(store.getAt(store.getCount() - 1));
}
store.resumeEvents();
store.fireEvent('datachanged', store);
pt.cursor = cursor;
var d = pt.getPageData();
pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);
pt.field.dom.value = ap;
pt.first.setDisabled(ap == 1);
pt.prev.setDisabled(ap == 1);
pt.next.setDisabled(ap == d.pages);
pt.last.setDisabled(ap == d.pages);
pt.updateInfo();
}
}else{
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(Math.floor(this.pagingToolbar.cursor/this.pagingToolbar.pageSize) * this.pagingToolbar.pageSize);
}
this.updateStore();
},

//private
onRender: function(){
this.combo = Ext.ComponentMgr.create(Ext.applyIf(this.comboCfg||{}, {
store:new Ext.data.SimpleStore({
fields:['pageSize'],
data:[]
}),
displayField:'pageSize',
valueField:'pageSize',
mode:'local',
triggerAction:'all',
width:50,
xtype:'combo'
}));
this.combo.on('select', this.setPageSize, this);
this.updateStore();

if (this.addBefore){
//this.pagingToolbar.add(this.addBefore);
this.pagingToolbar.insert(this.position, this.addBefore);
this.position++;
}
if (this.beforeText){
//this.pagingToolbar.add(this.beforeText);
this.pagingToolbar.insert(this.position, this.beforeText);
this.position++;
}
//this.pagingToolbar.add(this.combo);
this.pagingToolbar.insert(this.position, this.combo);
this.position++;

if (this.afterText){
//this.pagingToolbar.add(this.afterText);
this.pagingToolbar.insert(this.position, this.afterText);
this.position++;
}
if (this.addAfter){
//this.pagingToolbar.add(this.addAfter);
this.pagingToolbar.insert(this.position, this.addAfter);
}
}
})

tobiu
22 Jun 2009, 7:55 AM
2 more minor changes made, because shortening the amount of shown pages threw an error.

kind regards, tobiu



Ext.namespace('Ext.ux.Andrie');

/**
* @class Ext.ux.Andrie.pPageSize
* @extends Ext.PagingToolbar
* A combobox control that glues itself to a PagingToolbar's pageSize configuration property.
* @constructor
* Create a new PageSize plugin.
* @param {Object} config Configuration options
* @author Andrei Neculau - andrei.neculau@gmail.com / http://andreineculau.wordpress.com
* @version 0.6
*/
Ext.ux.Andrie.pPageSize = function(config){
Ext.apply(this, config);
};

Ext.extend(Ext.ux.Andrie.pPageSize, Ext.util.Observable, {
/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Show',

/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'items',

/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',

/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,

/**
* @cfg {Bool} dynamic
* True for dynamic variations, false for static ones
*/
dynamic: false,

/**
* @cfg {Array} variations
* Variations used for determining pageSize options
*/
variations: [5, 10, 20, 50, 100, 200, 500, 1000],

/**
* @cfg {Object} comboCfg
* Combo config object that overrides the defaults
*/
comboCfg: undefined,

/**
* @cfg {int} position
* The starting position inside the toolbar
*/
position: 11,

init: function(pagingToolbar){
this.pagingToolbar = pagingToolbar;
this.pagingToolbar.pageSizeCombo = this;
this.pagingToolbar.setPageSize = this.setPageSize.createDelegate(this);
this.pagingToolbar.getPageSize = function(){
return this.pageSize;
}
this.pagingToolbar.on('render', this.onRender, this);
},

//private
addSize:function(value){
if (value>0){
this.sizes.push([value]);
}
},

//private
updateStore: function(){
if (this.dynamic) {
var middleValue = this.pagingToolbar.pageSize, start;
middleValue = (middleValue > 0) ? middleValue : 1;
this.sizes = [];
var v = this.variations;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue - v[v.length - 1 - i]);
}
this.addToStore(middleValue);
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
}else{
if (!this.staticSizes){
this.sizes = [];
var v = this.variations;
var middleValue = 0;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
this.staticSizes = this.sizes.slice(0);
}else{
this.sizes = this.staticSizes.slice(0);
}
}
this.combo.store.loadData(this.sizes);
this.combo.collapse();
this.combo.setValue(this.pagingToolbar.pageSize);
},

setPageSize:function(value, forced){
var pt = this.pagingToolbar;
this.combo.collapse();
value = parseInt(value) || parseInt(this.combo.getValue());
value = (value>0)?value:1;
if (value == pt.pageSize){
return;
} else if (value < pt.pageSize){
pt.pageSize = value;
var ap = Math.round(pt.cursor/value)+1;
var cursor = (ap-1)*value;
var store = pt.store;
if (cursor > store.getTotalCount()) {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(cursor-value);
}else{
store.suspendEvents();
for (var i = 0, len = cursor - pt.cursor; i < len; i++) {
store.remove(store.getAt(0));
}
while (store.getCount() > value) {
store.remove(store.getAt(store.getCount() - 1));
}
store.resumeEvents();
store.fireEvent('datachanged', store);
pt.cursor = cursor;
var d = pt.getPageData();
//pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);
pt.afterTextItem.setText(String.format(pt.afterPageText, d.pages));
//pt.field.dom.value = ap;
pt.field.value = ap;
pt.first.setDisabled(ap == 1);
pt.prev.setDisabled(ap == 1);
pt.next.setDisabled(ap == d.pages);
pt.last.setDisabled(ap == d.pages);
pt.updateInfo();
}
} else {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(Math.floor(this.pagingToolbar.cursor/this.pagingToolbar.pageSize) * this.pagingToolbar.pageSize);
}
this.updateStore();
},

//private
onRender: function(){
this.combo = Ext.ComponentMgr.create(Ext.applyIf(this.comboCfg||{}, {
store:new Ext.data.SimpleStore({
fields:['pageSize'],
data:[]
})
,displayField : 'pageSize'
,valueField : 'pageSize'
,mode : 'local'
,triggerAction : 'all'
,width : 50
,xtype : 'combo'
}));
this.combo.on('select', this.setPageSize, this);
this.updateStore();

if (this.addBefore){
this.pagingToolbar.insert(this.position, this.addBefore);
this.position++;
}
if (this.beforeText){
this.pagingToolbar.insert(this.position, this.beforeText);
this.position++;
}
this.pagingToolbar.insert(this.position, this.combo);
this.position++;

if (this.afterText){
this.pagingToolbar.insert(this.position, this.afterText);
this.position++;
}
if (this.addAfter){
this.pagingToolbar.insert(this.position, this.addAfter);
}
}
})

novahokie
23 Jun 2009, 12:13 PM
Thanks. One question. I am also allowing the user to do custom queries with

var params = { term: 'whatever' };
store.reload({params : params});

After this call then the pagesize will have switched back to the default page size.

How can i do this and persist the page size selection into this load call?

Thanks!

tobiu
24 Jun 2009, 12:34 AM
hi novahokie,

a store has the public property paramNames.
look at http://extjs.com/deploy/ext-3.0-rc2/docs/source/Store.html#prop-Ext.data.Store-paramNames for details.

there you have things like "start" and "limit". start 40, limit 20 would mean showing 20 rows a page and that you are on page 3 (looking into the request-params via firebug also helps to see all sended params).

kind regards, tobiu

dke01
2 Jul 2009, 4:38 PM
Thanks for the prompt updates for this Plugin I was just getting stuck with the above error and you saved me lots of time.:D

dke01
12 Jul 2009, 4:12 PM
This line gives an error in ie8
pt.field.value = ap;

Also still when I decrease the row count the current page number is not being updated? In both IE and Firefox?

tobiu
14 Jul 2009, 10:47 AM
hi dke01,

i am quite short in time at the moment, maybe i can take a look at it in about two weeks. though i am only developing for firefox at the moment ;)

kind regards, tobiu

YYSAM
15 Jul 2009, 4:42 PM
hi tobiu:
Thanks your updated, this plugin is very useful for me. in last day, I was thinking whether extjs3 have something plugins like your updated.
Whatever, I will try it in our project. thanks!

ClausThaler
12 Aug 2009, 5:28 AM
This line gives an error in ie8
pt.field.value = ap;

Also still when I decrease the row count the current page number is not being updated? In both IE and Firefox?

I've came across the same error in Firefox.

Change the line to
pt.inputItem.value = ap;
that seems to fix it.

Jul
28 Oct 2009, 3:58 PM
I made some additional tweaks to allow the user to type an arbitrary value for the page size into the combo box. It refreshes the grid when Enter is typed.

I also patched the code as suggested by ClausThaler.

There is still a small problem with the page # sometimes not updating correctly when you make the page size smaller. I suspect an update event needs to be added to change the page value.



Ext.namespace('Ext.ux.Andrie');

/**
* @class Ext.ux.Andrie.pPageSize
* @extends Ext.PagingToolbar
* A combobox control that glues itself to a PagingToolbar's pageSize configuration property.
* @constructor
* Create a new PageSize plugin.
* @param {Object} config Configuration options
* @author Andrei Neculau - andrei.neculau@gmail.com / http://andreineculau.wordpress.com
* @version 0.6
*/
Ext.ux.Andrie.pPageSize = function(config){
Ext.apply(this, config);
};

Ext.extend(Ext.ux.Andrie.pPageSize, Ext.util.Observable, {
/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Show',

/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'items',

/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',

/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,

/**
* @cfg {Bool} dynamic
* True for dynamic variations, false for static ones
*/
dynamic: false,

/**
* @cfg {Array} variations
* Variations used for determining pageSize options
*/
variations: [5, 10, 20, 50, 100, 200, 500, 1000],

/**
* @cfg {Object} comboCfg
* Combo config object that overrides the defaults
*/
comboCfg: undefined,

/**
* @cfg {int} position
* The starting position inside the toolbar
*/
position: 11,

init: function(pagingToolbar){
this.pagingToolbar = pagingToolbar;
this.pagingToolbar.pageSizeCombo = this;
this.pagingToolbar.setPageSize = this.setPageSize.createDelegate(this);
this.pagingToolbar.getPageSize = function(){
return this.pageSize;
}
this.pagingToolbar.on('render', this.onRender, this);
},

//private
addSize:function(value){
if (value>0){
this.sizes.push([value]);
}
},

//private
updateStore: function(){
if (this.dynamic) {
var middleValue = this.pagingToolbar.pageSize, start;
middleValue = (middleValue > 0) ? middleValue : 1;
this.sizes = [];
var v = this.variations;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue - v[v.length - 1 - i]);
}
this.addToStore(middleValue);
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
}else{
if (!this.staticSizes){
this.sizes = [];
var v = this.variations;
var middleValue = 0;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
this.staticSizes = this.sizes.slice(0);
}else{
this.sizes = this.staticSizes.slice(0);
}
}
this.combo.store.loadData(this.sizes);
this.combo.collapse();
this.combo.setValue(this.pagingToolbar.pageSize);
},

setPageSize:function(value, forced){
var pt = this.pagingToolbar;
this.combo.collapse();
value = parseInt(value) || parseInt(this.combo.getValue());
value = (value>0)?value:1;
if (value == pt.pageSize){
return;
} else if (value < pt.pageSize){
pt.pageSize = value;
var ap = Math.round(pt.cursor/value)+1;
var cursor = (ap-1)*value;
var store = pt.store;
if (cursor > store.getTotalCount()) {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(cursor-value);
}else{
store.suspendEvents();
for (var i = 0, len = cursor - pt.cursor; i < len; i++) {
store.remove(store.getAt(0));
}
while (store.getCount() > value) {
store.remove(store.getAt(store.getCount() - 1));
}
store.resumeEvents();
store.fireEvent('datachanged', store);
pt.cursor = cursor;
var d = pt.getPageData();
//pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);
pt.afterTextItem.setText(String.format(pt.afterPageText, d.pages));
//pt.field.dom.value = ap;
// pt.field.value = ap;
pt.inputItem.value = ap;
pt.first.setDisabled(ap == 1);
pt.prev.setDisabled(ap == 1);
pt.next.setDisabled(ap == d.pages);
pt.last.setDisabled(ap == d.pages);
pt.updateInfo();
}
} else {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(Math.floor(this.pagingToolbar.cursor/this.pagingToolbar.pageSize) * this.pagingToolbar.pageSize);
}
this.updateStore();
},

//private
onRender: function(){
this.combo = Ext.ComponentMgr.create(Ext.applyIf(this.comboCfg||{}, {
store:new Ext.data.SimpleStore({
fields:['pageSize'],
data:[]
})
,displayField : 'pageSize'
,valueField : 'pageSize'
,mode : 'local'
,triggerAction : 'all'
,selectOnFocus : false
,enableKeyEvents: true
,width : 60
,xtype : 'combo'
}));
this.combo.on('select', this.setPageSize, this);
this.combo.on('keyup', function(cmb,e) {
if (e.getKey() == Ext.EventObject.ENTER)
this.setPageSize(cmb.getRawValue());
}, this);

this.updateStore();

if (this.addBefore){
this.pagingToolbar.insert(this.position, this.addBefore);
this.position++;
}
if (this.beforeText){
this.pagingToolbar.insert(this.position, this.beforeText);
this.position++;
}
this.pagingToolbar.insert(this.position, this.combo);
this.position++;

if (this.afterText){
this.pagingToolbar.insert(this.position, this.afterText);
this.position++;
}
if (this.addAfter){
this.pagingToolbar.insert(this.position, this.addAfter);
}
}
})

art.home.ext
30 Oct 2009, 12:45 AM
When changing pagesize, the inputItem shows an invalid page number (even if its internal value is correct)

Here is a fix :

setPageSize:function(value, forced){
...
//pt.inputItem.value = ap;
pt.inputItem.setValue(ap);
...}

I think I also found another bug :
- Display the result list
- Change page size to 5 => watch total page count (=15)
- Change page size to 10
- Change page size to 5 => watch total page count (=14)
- Change page size to 10
- Change page size to 5 => watch total page count (=13)
- Change page size to 10

Is the Math.round valid ?

Jul
6 Nov 2009, 1:21 AM
Thanks for the page size fix. Works great here.

I can't replicate the new bug you saw. I can change the page size between several of the sizes and it works fine for me every time.

art.home.ext
17 Nov 2009, 8:03 AM
This may be due to my local data. I'll try to find what's wrong in my code.

EDIT : I did not manage to find what was wrong. I just changed some code in this plugin.
Here is the complete version I use :


// WARNING : updates by art.home.ext
// - fix wrong displayed page number value (internal value is correct but not the displayed one) in setPageSize method
// - use of store.allData and store.data to show/hide elements (Got it from Ext.ux.data.PagingStore for Ext 3 - v0.4.1)
//
Ext.namespace('Ext.ux.Andrie');

/**
* @class Ext.ux.Andrie.pPageSize
* @extends Ext.PagingToolbar
* A combobox control that glues itself to a PagingToolbar's pageSize configuration property.
* @constructor
* Create a new PageSize plugin.
* @param {Object} config Configuration options
* @author Andrei Neculau - andrei.neculau@gmail.com / http://andreineculau.wordpress.com
* @version 0.6
*/
Ext.ux.Andrie.pPageSize = function(config){
Ext.apply(this, config);
};

Ext.extend(Ext.ux.Andrie.pPageSize, Ext.util.Observable, {
/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Show',

/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'items',

/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',

/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,

/**
* @cfg {Bool} dynamic
* True for dynamic variations, false for static ones
*/
dynamic: false,

/**
* @cfg {Array} variations
* Variations used for determining pageSize options
*/
variations: [5, 10, 20, 50, 100, 200, 500, 1000],

/**
* @cfg {Object} comboCfg
* Combo config object that overrides the defaults
*/
comboCfg: undefined,

/**
* @cfg {int} position
* The starting position inside the toolbar
*/
position: 11,

init: function(pagingToolbar){
this.pagingToolbar = pagingToolbar;
this.pagingToolbar.pageSizeCombo = this;
this.pagingToolbar.setPageSize = this.setPageSize.createDelegate(this);
this.pagingToolbar.getPageSize = function(){
return this.pageSize;
}
this.pagingToolbar.on('render', this.onRender, this);
},

//private
addSize:function(value){
if (value>0){
this.sizes.push([value]);
}
},

//private
updateStore: function(){
if (this.dynamic) {
var middleValue = this.pagingToolbar.pageSize, start;
middleValue = (middleValue > 0) ? middleValue : 1;
this.sizes = [];
var v = this.variations;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue - v[v.length - 1 - i]);
}
this.addToStore(middleValue);
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
}else{
if (!this.staticSizes){
this.sizes = [];
var v = this.variations;
var middleValue = 0;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
this.staticSizes = this.sizes.slice(0);
}else{
this.sizes = this.staticSizes.slice(0);
}
}
this.combo.store.loadData(this.sizes);
this.combo.collapse();
this.combo.setValue(this.pagingToolbar.pageSize);
},

setPageSize:function(value, forced){
var pt = this.pagingToolbar;
this.combo.collapse();
value = parseInt(value) || parseInt(this.combo.getValue());
value = (value>0)?value:1;
if (value == pt.pageSize){
return;
} else if (value < pt.pageSize){
pt.pageSize = value;
var ap = Math.round(pt.cursor/value)+1;
var cursor = (ap-1)*value;
var store = pt.store;
if (cursor > store.getTotalCount()) {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(cursor-value);
}else{
// (from Ext.ux.data.PagingStore for Ext 3 - v0.4.1)
store.data.items = store.allData.items.slice(cursor, cursor + value);
store.data.keys = store.allData.keys.slice(cursor, cursor + value);
var len = store.data.length = store.data.items.length;
var map = {};
for (var i = 0; i < len; i++) {
var item = store.data.items[i];
map[store.data.getKey(item)] = item;
}
store.data.map = map;
store.fireEvent("datachanged", store);
/*
store.suspendEvents();
for (var i = 0, len = cursor - pt.cursor; i < len; i++) {
store.remove(store.getAt(0));
}
while (store.getCount() > value) {
store.remove(store.getAt(store.getCount() - 1));
}
store.resumeEvents();
store.fireEvent('datachanged', store);
*/
pt.cursor = cursor;
var d = pt.getPageData();
//pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);
//pt.field.dom.value = ap;
pt.afterTextItem.setText(String.format(pt.afterPageText, d.pages));
//pt.field.value = ap;
pt.inputItem.setValue(ap);
pt.first.setDisabled(ap == 1);
pt.prev.setDisabled(ap == 1);
pt.next.setDisabled(ap == d.pages);
pt.last.setDisabled(ap == d.pages);
pt.updateInfo();
}
} else {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(Math.floor(this.pagingToolbar.cursor/this.pagingToolbar.pageSize) * this.pagingToolbar.pageSize);
}
this.updateStore();
},

//private
onRender: function(){
this.combo = Ext.ComponentMgr.create(Ext.applyIf(this.comboCfg||{}, {
store:new Ext.data.SimpleStore({
fields:['pageSize'],
data:[]
})
,displayField : 'pageSize'
,valueField : 'pageSize'
,mode : 'local'
,triggerAction : 'all'
,selectOnFocus : false
,enableKeyEvents: true
,width : 60
,xtype : 'combo'
}));
this.combo.on('select', this.setPageSize, this);
this.combo.on('keyup', function(cmb,e) {
if (e.getKey() == Ext.EventObject.ENTER)
this.setPageSize(cmb.getRawValue());
}, this);

this.updateStore();

if (this.addBefore){
this.pagingToolbar.insert(this.position, this.addBefore);
this.position++;
}
if (this.beforeText){
this.pagingToolbar.insert(this.position, this.beforeText);
this.position++;
}
this.pagingToolbar.insert(this.position, this.combo);
this.position++;

if (this.afterText){
this.pagingToolbar.insert(this.position, this.afterText);
this.position++;
}
if (this.addAfter){
this.pagingToolbar.insert(this.position, this.addAfter);
}
}
})


I've tested it and did not get problem.
Thanks for those who will shake it.
I'm not an expert so there might be some bugs.
Please let me know

Zeebee
14 Dec 2009, 10:41 PM
I've came across the same error in Firefox.

Change the line to
pt.inputItem.value = ap;
that seems to fix it.

Thanks, works like a charm :)

paolocavelli
18 Dec 2009, 8:02 AM
If user changes number of rows per page and beforechange event returns false in order to avoid the change, the interface is inconsistent: number of rows per page was not modified, but combobox shows modified number.
Any suggestion for bypassing this problem?
Thanks
Paolo