How to align custom grid Column Titles in extjs 4

From extjs 2.0 to the current 4.0, the column title alignment of grid is consistent with the data alignment, which is not in line with Chinese habits. The solution is to rewrite the alignment of the rendering column title in the Ext. Grid. Column. Column object.Code. There is only one sentence in the Code. In the afterrender method, rewrite the afterrender method as follows.

First, add the following code to the localization file:

If (ext. grid. column) {<br/> Ext. grid. column. override ({<br/> // method to be rewritten <br/>}); <br/>}< br/>

Note that do not use Ext. in the afterrender method, the callparent method must be called to call the afterrender method of the parent class. This requires the "$ owner" and "$ name" attributes in the method, if you use the apply method, these two attributes will be lost, causing the call of the callparent method to fail. Therefore, you must use the override method to override these two attributes.

Copy the definition code of the afterrender Method to the position in the comment (note that the last comma is removed), and then modify the following code:

El. addcls (ext. basecssprefix + 'column-header-align-'+ me. Align). addclsonover (Me. overcls );

This Code adds an aligned style to the column title. By default, the align value of the configuration item is used. Therefore, we only need to add a configuration item and then use this configuration item, the modification code is as follows:

Me. titlealign = me. titlealign | Me. align; </P> <p> el. addcls (ext. basecssprefix + 'column-header-align-'+ me. <strong> titlealign </strong> ). addclsonover (Me. overcls); </P> <p>

A titlealign configuration item is added to the Code. If this configuration item is defined, the value of this configuration item is used. Otherwise, the value of align must be modified, otherwise, the added titlealign is redundant.

In this way, you can add the titlealign configuration item to the configuration object of the column to set the alignment of the column title.

The final code added to the localization file is as follows:

If (ext. grid. column) {<br/> Ext. grid. column. override ({<br/> // method to be rewritten <br/> afterrender: function () {<br/> var me = This, <br/> El = me. el; <br/> me. callparent (arguments); </P> <p> <strong> me. titlealign = me. titlealign | Me. align; <br/> el. addcls (ext. basecssprefix + 'column-header-align-'+ me. titlealign ). addclsonover (Me. overcls); <br/> </strong> <br/> me. mon (El, {<br/> CLICK: me. onelclick, <br/> dblc Lick: Me. oneldblclick, <br/> scope: mE <br/>}); <br/> If (! Ext. isie8 |! Ext. isstrict) {<br/> me. mon (Me. getfocusel (), {<br/> focus: me. ontitlemouseover, <br/> blur: me. ontitlemouseout, <br/> scope: mE <br/>}); <br/>}</P> <p> me. mon (Me. titlecontainer, {<br/> mouseenter: me. ontitlemouseover, <br/> mouseleave: me. ontitlemouseout, <br/> scope: mE <br/>}); </P> <p> me. keynav = ext. create ('ext. util. keynav ', El, {<br/> enter: me. onenterkey, <br/> down: me. ondownkey, <br/> scope: mE <br/>}); <br/>}< br/>}); <br/>}
The bold code is the modified Code.

Sample Code:

VaR store = ext. create ("Ext. data. arraystore ", {<br/> fields: [" ID "," name "], <br/> data: [[" 1 "," James "], ["2", "Li Si"] <br/>}); </P> <p> Ext. create ("Ext. grid. panel ", {<br/> renderto: ext. getbody (), <br/> store: store, <br/> columns: [<br/> {text: "No.", dataindex: "ID", flex: 1, titlealign: "center" },< br/> {text: "name", dataindex: "name", flex: 1 }< br/>] <br/> })
Example result:

The first column defines titlealign as the center, so the column title is centered and aligned.