PDA

View Full Version : Ext.ux.grid.PagingRowNumberer



mystix
11 Mar 2008, 7:14 PM
here's a PagingRowNumberer for use with paging grids -- numbers increment with pagination instead of restarting from 1.
use it the same way you would a RowNumberer


Ext.ns('Ext.ux.grid');

// custom RowNumberer for use with paging GridPanels
Ext.ux.grid.PagingRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer: function(v, p, record, rowIndex, colIndex, store) {
if (this.rowspan) {
p.cellAttr = 'rowspan="' + this.rowspan + '"';
}

var so = store.lastOptions;
var sop = so ? so.params: null;
return ((sop && sop.start) ? sop.start: 0) + rowIndex + 1;
}
});

enjoy ;)

jsakalos
11 Mar 2008, 7:25 PM
Great!

It can come handy in many situations.

One question: I guess numbering is independent of sorting, right? In another words, does the same row get (possibly) another number when sorting changes?

mystix
11 Mar 2008, 7:35 PM
yep. numbering is independent of sorting.

number order remains the same no matter how the grid is sorted.

jay@moduscreate.com
11 Mar 2008, 8:15 PM
Awesome work as usual Mystix!!

mystix
12 Mar 2008, 11:04 PM
lest i forget...

one little caveat with both the RowNumberer and PagingRowNumberer:
if Records are dynamically added / removed from the Store, the row numbers are not updated.

a GridView refresh must be forced in order to update the row numbers, like so


var myGridView = mygrid.getView();
myGridView.refresh(); // update row numbers

benny00
13 Mar 2008, 4:35 AM
Many thanks! Just what I needed! :)
One little thing though:


Ext.ux.grid.PagingRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
should be:

Ext.ux.PagingRowNumberer = Ext.extend(Ext.grid.RowNumberer, {

mystix
13 Mar 2008, 4:47 AM
should be:

Ext.ux.PagingRowNumberer = Ext.extend(Ext.grid.RowNumberer, {


i deliberately placed it in the Ext.ux.grid namespace, to mirror the Ext.grid.RowNumberer which this plugin extends.
feel free to modify the namespace to suit your needs.

madrabaz
13 Mar 2008, 5:38 PM
http://extjs.com/forum/showthread.php?t=15625

mystix
13 Mar 2008, 5:50 PM
rest assured i'm sucking my thumb now. :))

oh well. should have searched before i posted. back to the drawing board. :)

[edit]
hmmm... if i could solve the fixed column width problem, then i wouldn't have to suck my thumb any more...
i'll look into it when i get some time on my hands.

jay@moduscreate.com
13 Mar 2008, 6:16 PM
Stupid question. Couldn't all of the page numbers be done on the server side? We all pass a start && limit to the server. It could easily do the math and append 'row number' to the returning dataset.

Thoughts? :-/

mystix
13 Mar 2008, 6:34 PM
Stupid question. Couldn't all of the page numbers be done on the server side? We all pass a start && limit to the server. It could easily do the math and append 'row number' to the returning dataset.

Thoughts? :-/

that's what i was doing in 1.1 :)

still doesn't solve the column width issue though...
perhaps that too could be passed back from the server in a metaData config stored in the JSON response.

jay@moduscreate.com
13 Mar 2008, 7:36 PM
I ask because that's what i'm doing now. I do what ever I can do on the server is to reduce overhead on the browsers. :)

brenda
8 Jan 2009, 6:29 PM
This is something I want :)

But, I do not know how to add this to my codes :(

Can anyone give me some pointers on how can I add this to my existing code?

Here's my code:

var countryColumnModel = new Ext.grid.ColumnModel([
// This is a utility class that can be passed into a Ext.grid.ColumnModel
// as a column config that provides an automatic row numbering column.
//new Ext.ux.grid.PagingRowNumberer(v, p, record, rowIndex, colIndex, store),
new Ext.grid.RowNumberer(),
{
header: "Country",
width: 100,
sortable: true,
dataIndex: 'description'
},{
header: "Code",
width: 100,
sortable: true,
dataIndex: 'code'
},{
header: "Region",
width: 100,
sortable: true,
dataIndex: 'region'
}
]);

mystix
8 Jan 2009, 6:33 PM
create an ext-overrides.js file, and include it immediately after ext-all.js
dump the code in post #1 into this overrides file
replace the RowNumberer in your code with Ext.ux.grid.PagingRowNumberer. i.e.


var countryColumnModel = new Ext.grid.ColumnModel([
// This is a utility class that can be passed into a Ext.grid.ColumnModel
// as a column config that provides an automatic row numbering column.
//new Ext.ux.grid.PagingRowNumberer(v, p, record, rowIndex, colIndex, store),
new Ext.ux.grid.PagingRowNumberer(),


// other configs here...
]);




voila.

brenda
8 Jan 2009, 7:11 PM
create an ext-overrides.js file, and include it immediately after ext-all.js
dump the code in post #1 into this overrides file
replace the RowNumberer in your code with Ext.ux.grid.PagingRowNumberer. i.e.


var countryColumnModel = new Ext.grid.ColumnModel([
// This is a utility class that can be passed into a Ext.grid.ColumnModel
// as a column config that provides an automatic row numbering column.
//new Ext.ux.grid.PagingRowNumberer(v, p, record, rowIndex, colIndex, store),
new Ext.ux.grid.PagingRowNumberer(),


// other configs here...
]);




voila.
Thnx for the quick response, mystix :)

I did exactly what you've posted and I got this

Ext.ux.grid has no properties
[Break on this error] renderer : function(v, p, record, rowIndex, colIndex, store){

in my firebug :(

mystix
8 Jan 2009, 7:16 PM
you need to setup the Ext.ux.grid namespace:


Ext.namespace('Ext.ux.grid'); // create Ext.ux.grid namespace

// custom RowNumberer for use with paging GridPanels
Ext.ux.grid.PagingRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer : function(v, p, record, rowIndex, colIndex, store){
if (this.rowspan) {
p.cellAttr = 'rowspan="' + this.rowspan + '"';
}

var so = store.lastOptions;
var sop = so? so.params : null;
return ((sop && sop.start)? sop.start : 0) + rowIndex + 1;
}
});


[edit]
i've updated the first post to reflect this.

brenda
8 Jan 2009, 7:29 PM
you need to setup the Ext.ux.grid namespace:


Ext.namespace('Ext.ux.grid'); // create Ext.ux.grid namespace

// custom RowNumberer for use with paging GridPanels
Ext.ux.grid.PagingRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer : function(v, p, record, rowIndex, colIndex, store){
if (this.rowspan) {
p.cellAttr = 'rowspan="' + this.rowspan + '"';
}

var so = store.lastOptions;
var sop = so? so.params : null;
return ((sop && sop.start)? sop.start : 0) + rowIndex + 1;
}
});


[edit]
i've updated the first post to reflect this.

oh :"> sorry, my bad... I'm new to extending

PS: it works! wonderful :D Thnx, mystix :)

mjlecomte
5 Jun 2009, 9:18 AM
Just FYI if this is brought up to 3.x see this thread as well:
http://extjs.com/forum/showthread.php?t=70409

Should be very easy to update the linked thread for paging support via configuration.

ryanyoungsma
8 Jan 2010, 2:04 PM
I have not seen a way to get the row number with the row being selected. I am trying to update the database with the row number so I can keep the order. I originally just posted the entire dataset and updated the order on the server side, but now I am seeing where the dataset is to large and really impacting the performance. So I am implementing the RowNumber with Paging.

Now I only save the modified records, but I need to send the row number as well?



var records = this.store.getModifiedRecords();

if(!records.length) {
return;
}
var data = [];

var p = this.getBottomToolbar().getPageData().activePage;
var page = 0;
if(p != 1){
p = p - 1;
page = p * 200;
}

Ext.each(records, function(r, i) {
var o = r.getChanges();
o.row_index = (row + page);
if(r.data.newRecord) {
o.newRecord = true;
}
o[this.idName] = r.get(this.idName);
data.push(o);
}, this);


I have tried a couple of different options, but they all seem to use the selection model. But my items are not selected. Thoughts?

talha06
10 Mar 2010, 11:45 AM
thank u so much, I really appreciated a lot.. This is what I've been looking.. :)