ExtJS 4中自定义Grid列标题的对齐方式

        从ExtJS 2.0到目前的4.0,Grid的列标题对齐方式都是和数据的对齐方式一致的,这不太符合中国人的习惯。解决办法是,自己重写一下Ext.grid.column.Column对象中渲染列标题的对齐方式的代码。代码只有一句,在afterRender方法中,因而重写afterRender方法就行了,具体做法如下。

       首先在本地化文件中添加以下代码:

      



      这里要注意,不要使用习惯的Ext.apply来重写,因为在afterRender方法中要调用callParent方法调用父类的afterRender方法,而这需要用到方法内的”$owner“和”$name“属性,使用apply方法,会丢失这两个属性,导致调用callParent方法失败,因而必须使用override方法重写,这样才可以保留这两个属性。


      接着将afterRender方法的定义代码全部复制到注释中的位置(注意将最后的逗号去掉),然后修改下面代码:



     

      这句代码是为列标题添加对齐的样式的,其默认是使用配置项align的值的,因而我们只要添加一个配置项,然后使用该配置项就行了,修改代码如下:



       代码中添加了一个titleAlign的配置项,如果定义了该配置项,则使用该配置项的值,否则使用align的值,注意一定要修改粗体代码,不然添加的titleAlign就是多余的。

       这样,就可以在列的配置对象中添加titleAlign配置项来设置列标题的对齐方式了。


       最终在本地化文件加入的代码如下:


      粗体代码是修改过的代码。


      示例代码:

     


示例结果:

第一列定义了titleAlign为center,因而列标题会居中对齐。

      

posted @ 2011-07-08 17:09  程序员天下  阅读(1587)  评论(0编辑  收藏  举报