Extjs allign only cell text to right

javascript extjs grid

19,225

Solution 1

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">

Solution 2

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 component, method, or event or something else.

enter image description here

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.

enter image description here

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.

enter image description here

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

enter image description here

Updated

CSS:

.columnAlign{
     text-align: right;
}

extjs

tdCls: "columnAlign",

19,225

Author by

kuldarim

Updated on June 14, 2022

Comments

kuldarim almost 2 years

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

kuldarim over 10 years

as i said this does not work for me because it aligns both header and cell i need to align only cell text..
kuldarim over 10 years

i know how to use documentation, but i think you dont understand where my problem is. I am not so dumb to do not understand how to add align property to my column config and im not begginer user of ExtJs but it changes nothing.
kuldarim over 10 years

as you can read in your posted link Sets the alignment of the header and rendered columns. Possible values are: 'left', 'center', and 'right'. Header is not okay for me as i mentioned before
Mr_Green over 10 years

@Riku it is ok.. I just added for other users... no offense. I will look in to your solution wait.
kuldarim over 10 years

isnt it the same as adding css 'text-align : left'` to my column config?
Mr_Green over 10 years

@Riku use tdCls instead of align and pass a class name which holds text-align: right.
kuldarim over 10 years

yes it would work in 4.2 but i`m using 3.4 and there is no such property tdCls ;/
Mr_Green over 10 years

@Riku then I think you should go with Devendra's suggestion.
kuldarim over 10 years

how to attach that css to my component?
F4k3d over 9 years

Fyi: In Extjs 4.2 it must be cls instead of css. There is no configuration called css in Extjs 4.2. I struggled due to that fact because I tried the above code snippets.
F4k3d over 9 years

Fyi: In Extjs 4.2 it must be cls instead of css. There is no configuration called css in Extjs 4.2. I struggled due to that fact because I tried the above code snippets