i need to align cell text to right side.

{
            xtype : 'numbercolumn',
            dataIndex : 'lineAmount',
            id : 'lineAmount',
            header : 'Net Line amount',
            sortable : true,
            width : 150,
            summaryType : 'sum',
            css: 'text-align: rigth;',
            summaryRenderer : Ext.util.renderers.summary.sum,
            editor : {
                xtype : 'numberfield',
                allowBlank : false
            }

adding align property does not work for me because it also aligns header text

i need to align cell text to right side.

{
            xtype : 'numbercolumn',
            dataIndex : 'lineAmount',
            id : 'lineAmount',
            header : 'Net Line amount',
            sortable : true,
            width : 150,
            summaryType : 'sum',
            css: 'text-align: rigth;',
            summaryRenderer : Ext.util.renderers.summary.sum,
            editor : {
                xtype : 'numberfield',
                allowBlank : false
            }

adding align property does not work for me because it also aligns header text

• javascript
• extjs
• grid

3 Answers 3

There is a config present for numbercolumn known as align. just use that.

Whenever you are stuck refer the secha docs which is beautifully designed just for beginners.

I am assuming you are beginner and explaining you how to use docs.. for your clear understanding:

• First go to search field, to search for a ponent, method, or event or something else.

• In your case, let us assume that you have searched for "numbercolumn", then you can see the following window which displays all the cofigs, properties, methods etc.. Just hover on them and know what "numbercolumn" is related with.
• In your case, you are looking for a config which align's the text to right. then you are mostly looking for key words like txtAlign, align, textAlign, etc..
• Hence, you will find a config, which is by name "align". just click on it to learn more about it.

• After learning about the cofig "align", you might want to test it. For this purpose, the docs have provided inline code editor which is shown in the below image.
• The code editor has two tabs, "code editor" and "live preview". The words says everything.
• Just add your changes in "code editor" tab and see your result in "live preview" tab.

• For example, Adding align: "right" code in the below "code editor".

Updated

CSS:

.columnAlign{
     text-align: right;
}

extjs

tdCls: "columnAlign",

As answered Mr_Green you can align the text to the right or left using align. For header to remain centrally aligned use css as :

.x-column-header-inner{
    text-align:center;
 }

Update :

.....//

  {
    xtype : 'grid',
    cls   : 'gridCss',
    ...//other configs
  }

.....//

In your app.css file :

 .gridCss .x-column-header-inner{
    text-align:center;
 }

In your index.jsp

<link rel="stylesheet" type="text/css" href="app/resources/css/app.css">

Actually thanks both guys for your posts it helped me alot. I have found one solution myself.

I needed to add id property to my column. For example :

{
            xtype : 'numbercolumn',
            dataIndex : 'lineAmount',
            id : 'lineAmount',
            header : 'Net Line amount',

        }

and then it has its own css class for example : .x-grid3-td-lineAmount so i added suggested css to these classes and it working ok now for me

.x-grid3-hd-inner{
    text-align: left;
 }
 .x-grid3-hd-lineAmount{
    text-align: left;
 }
 .x-grid3-td-lineAmount{
    text-align: right;
 }
 .x-grid3-hd-taxAmount{
    text-align: left;
 }
 .x-grid3-td-taxAmount{
    text-align: right;
 }
 .x-grid3-hd-invoiceAmount{
    text-align: left;
 }
 .x-grid3-td-invoiceAmount{
    text-align: right;
 }

i think in 4.2 version it is better to use @Mr_Green solution, but in 3.4 this workarround works for me :)