Geek Answers Handbook

Extjs allign just cell text right

I need to align cell text on the 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 an alignment property does not work for me because it also aligns the title text

+4
source share
3 answers

As Mr_Green replied, you can align the text to the right or left using Alignment . To keep the title centered, use css as:

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

Update :

..... //

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

..... //

In the 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">
+3
source

For numbercolumn there is a config known as align . just use it.

Whenever you get stuck, check out the secha docs, which are beautifully designed for beginners only.

I assume that you are a beginner and explain to you how to use documents .. for your clear understanding:

  • First go to the search field, find the component, method or event or something else.

enter image description here

  • In your case, suppose you looked for a "numbercolumn", then you can see the next window that displays all cofigs, properties, methods, etc. Just hover over them and find out what a "numbercolumn" is with.
  • In your case, you are looking for a configuration that aligns the text to the right. then you are basically looking for keywords like txtAlign, align, textAlign etc.
  • Therefore, you will find a configuration that is named "align". just click on it to find out more about it.

enter image description here

  • After you learn about the “alignment” of cofig, you can test it. For this purpose, the documents provided a built-in code editor, which is shown in the figure below.
  • The code editor has two tabs: "code editor" and "preview". Words are spoken by everyone.
  • Just add the changes on the Code Editor tab and see the result on the Preview tab.

enter image description here

  • For example, adding align: "right" code to the "code editor" below.

enter image description here

Update

CSS

 .columnAlign{ text-align: right; }

Extjs

 tdCls: "columnAlign",
+4
source

In fact, thanks for the fact that both guys for your messages helped me a lot. I found one solution myself.

I need to add the id property to my column. For instance:

 { 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 the suggested css to these classes, and now it works fine 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 that in version 4.2 it is better to use the @Mr_Green solution, but in 3.4 this workarround works for me :)

0
source

More articles:


All Articles