View Full Version : how to set difference alignment for header and data of Grid

29 Aug 2009, 10:45 AM
Hi all,

How can I set difference alignment for header and data of Grid ?

For sample , header of column1 { align - text: center} , data of column1 { align-text: left}
I tried to set as : { header : 'X', dataIndex: 'X', align: 'center', css: 'text-align:left;'} , but it seems 'align' property is overrided property 'css' at 'text-align', so this columns always is aligned 'center'.

---> just apply 2 columns on this grid, so I dont want to modify CSS for the whole grid.

I tried to find out on API Document for ColumnModel, but nothing.
Any ideas, I am very appreciated.

29 Aug 2009, 11:41 PM
No one know ?

31 Aug 2009, 1:03 PM
I do this all the time although you won't find a simple config for it. You will need to look at the structure of the grid HTML and apply appropriate CSS. I never use the built in align config and prefer to use my own CSS.

E.g. I have some of the following styles.

/* Center align the header text */
div.x-grid3-hd-inner.x-grid3-hd-COLUMN1 {
text-align: center;

/* Right align data cells */
.x-grid3-col-COLUMN2 {
text-align: right;
padding-right: 5px;

Note that these apply to individual columns. These additional classes get auto generated, the names in CAPS are the id of the column.

If you look at the source of GridView.js and look at the default grid templates you will see where these classes come from. You should be able to find enough detail there to be able to style individual columns exactly as you want.

Hope this might point you in the right direction.