[3.x] Ext.ux.grid.PageSizer

[galdaka]

Hi,

I write a new PageSizer plugin for new rewrited Ext.toolbar component.

I use Ext.ux.iconMgr If you dont´t want to use this, please create iconCls css class with attached images.

28/04/2009: First version.
29/04/2009: Rewrite. Felixibilize the plugin and support locale.
30/04/2009: Capture http://www.jadacosta.es/contents/screencast/capture1.swf
02/06/2009: Minor change "pagingToolbar.insert(12, '-');" for last rev of ExtJS 3.0
15/06/2009: Added GNU license.
11/08/2009: Fixed some bugs. Added price: 18€. In a pack with AutoRefresher (http://extjs.com/forum/showthread.php?p=322663#post322663) is offered for 30€. Contact to: galdaka@hotmail.com
03/11/2009: License changed. Reason: People use your work for comercial purposes without your permission.
03/11/2009: NEW LICENSE: http://creativecommons.org/licenses/by-nc/3.0/ (http://creativecommons.org/licenses/by-nc/3.0/). Thanks to cparker (http://www.extjs.com/forum/member.php?u=57967).




/**
* Ext.ux.grid.PageSizer
* Copyright (c) 2009-2010, José Alfonso Dacosta Dominguez (galdaka@hotmail.com)
*
* Ext.ux.grid.PageSizer is licensed http://creativecommons.org/licenses/by-nc/3.0/ license.
*
* Commercial use is prohibited. contact with galdaka@hotmail.com
* if you need to obtain a commercial license.
*
* Site: www.jadacosta.es
*/

Ext.namespace('Ext.ux.grid');
Ext.ux.grid.PageSizer = Ext.extend(Ext.CycleButton, {
initialSize: this.initialSize || 15,
pageSizes: this.pageSizes || [10, 15, 20, 25, 30, 50, 75, 100],
addText: ' entrada(s) por página',
initComponent: function(){
var ir=[];
var at = this.addText ;
var is = this.initialSize;
Ext.each(this.pageSizes, function(ps){ir.push({
text: ' ' + ps + at,
value: ps,
checked: ps==is ? true : false
})
});
Ext.apply(this, {
showText: true,
prependText: ' ',
forceIcon: Ext.ux.iconMgr.getIcon('/dev/common/icons.nsf/extjs/ux/icons/', 'table_add_del_rows'),
items: ir
});

Ext.ux.grid.PageSizer.superclass.initComponent.apply(this, arguments);
},
init: function(pagingToolbar) {
pagingToolbar.on('render', this.onInitView, this);
},
onInitView: function(pagingToolbar) {
pagingToolbar.insert(12, this);
pagingToolbar.insert(12, '-');
this.on('change', this.onPageSizeChanged, pagingToolbar);
},
onPageSizeChanged: function(cycleButton) {
this.pageSize = parseInt(cycleButton.getActiveItem().value);
this.doLoad(0);
}
});
if(Ext.ux.grid.PageSizer){
Ext.ux.grid.PageSizer.prototype.addText = " entrada(s) por página";
}


Be careful::


*) Change Ext.ux.iconMgr.getIcon('/dev/common/icons.nsf/extjs/ux/icons/', 'application_view_list_1') for css class like this:



.myImg01{ background-image: url({your-url/application_view_list_1}) !important; };


Greetings,

[galdaka]

Some changes.

View also Ext.ux.grid.AutoRefresher : http://extjs.com/forum/showthread.php?p=322663#post322663

ToDo: Support for locale.

[galdaka]

I rewrite entire code for make it flexible.

1) Now support locale.

2) Config options:

initialSize: The initial pageSize that you use in your grids.
pageSizes: you posibles pageSizes options in an array.

Greetings,

[galdaka]

Hi people,

Added capture of funtionallity.

Greetings,

[wayned@escc]

Really nice looking plugin. I'm having the following issue



this.doLoad(0);


is null or not an object?

What does this method call reference?

It's not in the grid, the grids store or anything I can see - am I missing something?

:)

w://

[galdaka]

Really nice looking plugin. I'm having the following issue



this.doLoad(0);


is null or not an object?

What does this method call reference?

It's not in the grid, the grids store or anything I can see - am I missing something?

:)

w://

This plugin is only for grid. This action recharge the data form server.

Greetings,

[wayned@escc]

This plugin is only for grid. This action recharge the data form server.

Greetings,

I am using grid?

[galdaka]

I am using grid?

I don´t understand. What is the problem?

this.doLoad works over PagingToolbar.

Greetings,

[galdaka]

Minor change for last revision of ExtJS.

[galdaka]

Is a plugin of bbar. You can try this:



...
bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 15,
plugins: [
new Ext.ux.grid.PageSizer()
],
...


Greetings,

[paweln]

Galdaka, thanks for this plugin its very nice =D>.

I need solution:
How to dynamic change text in addText and other items ?

For example: dynamic translate from English to Polish language, but NOT move selector.

Pawel

[paweln]

I get solution, it's simple :D

add extra code to plugin:



changeText: function(tx) {
this.addText = ' '+ tx;
this.initialSize = this.activeItem.value;
this.initComponent();
}


and used:


xxx.changeText('new text');


Regard,
Pawel

[galdaka]

Small changes. Added price.

Added new images.

Greetings,

[qooleot]

Just FYI in case anyone experienced the bug in this report:

http://www.extjs.com/forum/showthread.php?p=390456#post390456

but I just got Extjs to fix that so your pagesizer plugin won't experience that behavioral issue.

[galdaka]

Hi,

License changed. View first post.

Greetings,