Styling a grid column for numbers

Question

I asked this over on the Sencha forum as well..but haven't received any answers..it is holding up my implementation of the locking grid...I am hoping one of you knows the answer..

using ExtJS 4... I am trying to get my grid columns that are numbers to have text-align right... I tried the suggestion in the grid faq (http://www.sencha.com/learn/Ext_FAQ_Grid) of using CSS in the column def..but its not working. What am I doing wrong?

Here is the code for one of my columns that needs to be right aligned:

text : 'ROAMING',
width : 125,
sortable : true,
css : "text-align : right;",
dataIndex: 'ROAMING'},

the grid cell for this column looks like this for the first row of the grid when expanded in Firebug:

 <td class=" x-grid-cell x-grid-cell-gridcolumn-1032 ">
        <div class="x-grid-cell-inner x-unselectable" 
        style="; text-align: left;" unselectable="on">0</div>
   </td>

which clearly shows the field is being interpreted as align left...

Thanks, --Sue

found the answer use align: 'right', instead of the css string — Casuzen

Robert Robert · Accepted Answer · 2012-01-24T04:04:39

Change 'css' to 'align', and set the value as below:

text : 'ROAMING',
width : 125,
sortable : true,
align: 'right',
dataIndex: 'ROAMING'},

I did this yesterday in ExtJS 4 for the first time, and I was surprised that it was that easy. I was mainly surprised because older versions of ExtJS have so many search results with people implementing exotic ways to get grid aligning.

...I hope that helps in your situation as well :)

Styling a grid column for numbers

1 Answers