PDA

View Full Version : How to add row number column in a grid panel



pk.hafeez
28 Nov 2012, 2:44 AM
I have a grid panel. I have configured the column model. Loading some data for the grid from server side. Now, i have got a requirement to display an extra column in the grid which will show row number. I have pagination tool bar, column filters. Any help will be great :)
Note : Data is huge in thousands

Albareto
28 Nov 2012, 3:02 AM
Add a new column with a renderer:


{
text : 'row',
dataIndex: 'rowIndex',
sortable : false,
// other config you need..
renderer : function(value, metaData, record, rowIndex)
{
return rowIndex;
}
}

pk.hafeez
28 Nov 2012, 3:42 AM
Thanks. Almost got it. But i have a pagination on the grid. so when i go to the next page, the number should start from then on. Not from zero(0) again. !!

Albareto
28 Nov 2012, 4:05 AM
In the store there is something like start or something like that when you have pagination, just add it to your value



{
text : 'row',
dataIndex: 'rowIndex',
sortable : false,
// other config you need..
renderer : function(value, metaData, record, rowIndex, colIndex, store)
{
return store.start + rowIndex;
}
}

You can debug the store to get the exact name of that field, but I think it is start.

pk.hafeez
29 Nov 2012, 12:37 AM
Hi,

I couldn't find any start field on store. so instead i did it this way. i got the page no and did some calculation.
var rowNumberRenderer = function(value, metaData, record, rowIndex){
var pageIndex = $(".x-tbar-page-number .x-form-field").val();
var recordsPerPage = 50;
if(Ext.getCmp('myPagingId').getValue() != null && Ext.getCmp('myPagingId').getValue() != undefined){
recordsPerPage = Ext.getCmp('myPagingId').getValue();
}
return (pageIndex-1)*recordsPerPage+rowIndex+1;
};

columns : [{
header : '',
dataIndex: 'rowIndex',
width:15,
sortable : true,
// other config you need..
renderer : rowNumberRenderer
}]

flanders
29 Nov 2012, 1:31 AM
Is there any reason you are not using the build in RowNumberer (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.RowNumberer)?

EDIT: The message editor for this forum provides you with CODE tags. If you use those people can actually read your code ;)

pk.hafeez
29 Nov 2012, 2:12 AM
Both renderer and xtype:rownumberrenderer make the no's start from 1 when you navigate to the next page. So, probably i will use the custom rownumber renderer. :)

flanders
29 Nov 2012, 2:20 AM
Hmmz, really? I thought the rownumberer used the totalCount. See for example:

http://docs.sencha.com/ext-js/4-1/source/RowNumberer.html#Ext-grid-RowNumberer
(http://docs.sencha.com/ext-js/4-1/source/RowNumberer.html#Ext-grid-RowNumberer)(The render method uses store.indexOfTotal)

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-indexOfTotal
This method should number over the whole

Weird, but I have no access to an example at the moment so can't test it for myself.