column headers alignment issue

Aligning grid column headers without affecting column values

Recently, one of our users highlighted a challenge he was facing with aligning the headers on grid columns. His requirement was to align the column headers to center, while column values could be aligned to the left, right or center.


The challenge: If the header is aligned to center and the column value is aligned to the right, the header alignment for the other columns gets affected (see the image below).

column header alignment issue

Please note that by default Ext JS aligns the header according to the cell alignment, therefore the APEX header alignment is ignored.


The solution: To solve this issue, we recommend using the following two-step approach:

1.  First, add the following to the grid’s additional configuration:

{ "cls": "fx-grid-center-headers"}

2.  Then include the following CSS on your page:
.fx-grid-center-headers .x-column-header-inner{ text-align:center; }

…and you’re done:

column header alignment solutions


Starting with FOEX V3.0 we will add declarative support to the framework so you won’t need to perform these steps. You’ll be able to simply set the heading alignment in the report attributes.

Looking to build large-scale web applications fast? Sign up and start developing with FOEX!

Categories FOEX Grid
Add your comment

Your email address will not be published. Required fields are marked *