View Full Version : Formatting cells in a grid

25 Aug 2009, 12:48 PM
How would I reformat cells in a grid

Column1 Column2 Column3
AmountText 12.411 14.156
QtyText 5.2 1.25255


Column1 Column2 Column3
AmountText $12.41 $14.15
QtyText 5 1

25 Aug 2009, 1:00 PM
By using a renderer in the Column definition.

Read about defining columns: http://extjs.com/deploy/dev/docs/?class=Ext.grid.ColumnModel

25 Aug 2009, 5:15 PM
The column model does column formatting, not row formatting, right?
I want to do row formatting, well not quite. I want to do cell formatting based on a row.

Row 1, columns 2 and 3 has to be dollar formatted ($5.50).
Row 2, columns 2 and 3 has to be number formatted with no decimals (5).

I was looking at the GridView -> getRow (http://extjs.com/forum/../deploy/dev/docs/source/GridView.html#method-Ext.grid.GridView-getRow)( Number index ) : HtmlElement but I can't figure it out.

25 Aug 2009, 5:34 PM
The renderer passes in a bunch of information about the current record/row/column. Have a look at the docs for renderer to see all the info passed.

25 Aug 2009, 8:33 PM
Thanks guys for your help and patience.
I should have printed off the FAQ and read through that first. :">


I seem to get so confused trying to sort through the API.
I guess it's just a matter of getting used to all of the objects and methods.

I looked at the GridPanel and GridView objects carefully but I didn't
even think to look at the column object...

Side note: Is there a way to print the API?

Thanks again!

25 Aug 2009, 9:01 PM
It can be quite daunting at first because of the richness of the API.

But it is split into packages quite logically.

For Grid stuff, concentrate on the Ext.grid folder of the API docs tree.

Also, when scanning a class's API page, use the "Hide inherited members" button to remove stuff it inherits.

So removing from GridPanel, everything it inherits from Panel will clear things up for you.