PDA

View Full Version : Grid Page Size Refresh



mattdennewitz
30 Apr 2007, 1:34 PM
Im not sure if this has been posted before, but I didnt see any similar posts. Trivial, but useful.

In a project I've been working on, the client wanted a way to show 10/25/50/100 items in a single view. In my grid generator, I added this bit of code *after* getting the grid header and footer.

In this instance, the client wanted buttons in the Toolbar across the top, which came out looking like:
(where 'tb' is the toolbar, 'grid' is the grid, and 'grid_head' is the HeaderPanel)


var tb = new Ext.Toolbar(grid_head, [
{text: 'View 10',handler : function(){resetQueryLimit(10)}},'-',
{text: 'View 25',handler:function(){resetQueryLimit(25)}},'-',
{text: 'View 50',handler:function(){resetQueryLimit(50)}},'-',
{text: 'View 100',handler:function(){resetQueryLimit(100)}},
]);


and for actually refreshing the pagination limit and data:
(where 'paging' is the paging toolbar and 'grid' is still the grid)



function resetQueryLimit(new_limit)
{
datasource = grid.getDataSource();
// datasource.proxy = new Ext.data.HttpProxy({ url: '/services/path-to-svc/' });
datasource.reload({params:{start:0, limit:new_limit}}); // Reload grid data
paging.pageSize = new_limit; // Make sure pagination follows suit
grid.getView().refresh();
}


If you need to change the proxy, just uncomment the line above and the grid with re-query with the new URL. Variable names like 'tb' and 'grid' have been changed to protect the innocent.

Trivial, but useful.

sonic64
2 May 2007, 4:09 PM
thanks...it could always come in handy..

jay@moduscreate.com
3 May 2007, 4:51 AM
book marking this. i'd love to work on a drop down instead of simple buttons. none the less, good work dude.

tgo
3 Jun 2007, 10:09 AM
just needed that .... And it works like a charm. Thanks again.

Animal
3 Jun 2007, 10:52 AM
Try this:



Ext.override(Ext.PagingToolbar, {
addPageSizer: function() {
// add a combobox to the toolbar
var store = new Ext.data.SimpleStore({
fields: ['pageSize'],
data : [[10],[20],[30]]
});
var combo = new Ext.form.ComboBox({
regex: /^\d*$/,
store: store,
displayField:'pageSize',
typeAhead: true,
mode: 'local',
emptyText: 'Change page size',
triggerAction: 'all',
selectOnFocus:true,
width:135
});
this.addField(combo);
combo.on("change", function(c, value) {
this.pageSize = value;
this.onClick("refresh");
}, this);
combo.on("select", function(c, record) {
this.pageSize = record.get("pageSize");
this.onClick("refresh");
}, this);
}
});

galdaka
3 Jun 2007, 11:29 AM
Thanks Animal for sharing,

Any code for change the page number via combobox instead of textfield?

Thanks in advance,

Animal
3 Jun 2007, 11:51 AM
There needs to be a NumericCombo.

It should be fairly easy to make a NumericTriggerField which extends NumberField...

Animal
3 Jun 2007, 11:52 AM
Huh? That is a combo...

novocent
8 Jun 2007, 5:30 AM
Does anyone have an idea of how to calculate the LIMIT so that a maximum number of records can be shown before forcing a scrollbar based on the size of the grid when it is first loaded? In my case I have a gridpanel in the center panel. If the user has a resolution of 1024x768 about 25 records will fit. 26 records forces a scrollbar. At 1280x1024, 36 records 'fit'. I would like to send a variable limit based on how many records will fit without the scroll bar.

Animal
8 Jun 2007, 5:36 AM
What if the user then resizes the browser?

novocent
8 Jun 2007, 5:46 AM
For my purposes accounting for the resize is more trouble than it is worth. The natural course of thing should proceed as is. (i.e. If the browser window gets smaller, let the scrollbar come in, if the browser window gets larger let it be whitespace ) My goal is only the initial load.

Animal
8 Jun 2007, 5:50 AM
It's not easy. The size of the rows won't be known until they are rendered. The user could change the font size. There might be wrapping data in the rows.

If you have a fixed row pixel size, you should be able to calculate it, but that won't be very accessible.

novocent
8 Jun 2007, 6:04 AM
If I wanted to give it a try, could you point me in the right direction?

Animal
8 Jun 2007, 11:33 AM
Use a CSS rule to size your grid rows in pixels.

Then you should be able to examine the height of the GridPanel, and calculate how many rows will fit.

novocent
9 Jun 2007, 1:09 AM
thanks

august
25 Oct 2007, 11:09 PM
Hi,Animal

I use your override method to change pagesize but found that:
when have changed the pagesize use the combobox,the next page will never disabled and the page number in the textbox will be 1,11,111 when you click next,then you again change the pagesize ,it would be another number like 555..

pls check this out and thank in advance

staka
1 Nov 2007, 2:41 AM
Okay, I've got the same error, if I choose pagesize from combo = 2, then page number = 1.. I click on next page button, and page number = 11, click again next page button, page number = 111.. If I try to type page number = 2, page number = 11, type 3, page number = 21, type 4, page number = 31.. why is that..?

Fede
12 Nov 2007, 8:26 AM
Hi, I don't understand very well how override works, and how use it.

My code for the paging toolbar is:


var myPagingToolbar = new Ext.PagingToolbar({
pageSize: 10,
store: dataStore,
displayInfo: true,
displayMsg: 'Total {2} resultados encontrados. Mostrando {0} de {1}',
displayMsg: 'Total {2} resultados encontrados. Mostrando {0} de {1}',
emptyMsg: "No se han encontrado coincidencias"
});


How can I add the combobox with differents pagesizes?. Using override code write by Animal



Ext.override(Ext.PagingToolbar, {
addPageSizer: function() {
// add a combobox to the toolbar
var store = new Ext.data.SimpleStore({
fields: ['pageSize'],
data : [[10],[20],[30]]
});
var combo = new Ext.form.ComboBox({
regex: /^\d*$/,
store: store,
displayField:'pageSize',
typeAhead: true,
mode: 'local',
emptyText: 'Change page size',
triggerAction: 'all',
selectOnFocus:true,
width:135
});
this.addField(combo);
combo.on("change", function(c, value) {
this.pageSize = value;
this.onClick("refresh");
}, this);
combo.on("select", function(c, record) {
this.pageSize = record.get("pageSize");
this.onClick("refresh");
}, this);
}
});


Thanks a lot,
Fede

Fede
15 Nov 2007, 4:04 AM
I found a extension in this forum por PageSize, and works perfectlly.

You can see here: http://extjs.com/forum/showthread.php?t=16811