How can I add row numbers to an ExtJS grid?

extjs designer
Victor picture Victor · Mar 29, 2011 · Viewed 15.2k times · Source

In an ExtJS GridPanel, is there a way to design a column whose sole purpose is to act as a serial number column? This column will not need a dataIndex property. Right now, I am using a custom row numberer function, but this means the row numberer is defined in the grid.js file and all columns from grid.ui.js needs to be copied into grid.js. I am using the Ext designer.

EDIT: The crux of my question is: Is there a way to define a row numberer using the Ext designer?

Answer

wes picture wes · Mar 29, 2011

All you need is an Ext.grid.RowNumberer in your column definition.

var colModel = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "Name", width: 80, sortable: true},
    {header: "Code", width: 50, sortable: true},
    {header: "Description", width: 200, sortable: true}
]);

Related questions

Javascript how to parse JSON array

I'm using Sencha Touch (ExtJS) to get a JSON message from the server. The message I receive is this one : { "success": true, "counters": [ { "counter_name": "dsd", "counter_type": "sds", "counter_unit": "sds" }, { "counter_name": "gdg", "counter_type": "dfd", "counter_unit": "…

Read More
What are alternatives to ExtJS?

So what I'm looking for is a javascript framework I can use that has several UI controls. I have taken a look at jQuery but those controls are very basic compared to ExtJS. Are there any other competitive alternatives? This …

Read More
How to stop a setTimeout loop?

I'm trying to build a loading indicator with a image sprite and I came up with this function function setBgPosition() { var c = 0; var numbers = [0, -120, -240, -360, -480, -600, -720]; function run() { Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0…

Read More