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

  在4.0,Grid的列标题对齐方式都是和数据的对齐方式一致的,效果如图:

ext4 grid 列标题默认效果图 ext4 grid 列标题默认效果图


 

这不太符合我们的习惯,并且没有属性能单独设置列标题的对齐方式(当然可以通过CSS样式去修改,但是每次都要写比较麻烦)。解决办法是,自己重写一下Ext.grid.column.Column对象中渲染列标题的对齐方式的代码。在4.0.7版本中,渲染列标题的对齐方式的代码,在afterRender方法中,因而重写afterRender方法就行了,具体做法如下:

/**
 * 添加Grid 标题对齐配置 注: 这里不能使用Ext.apply 方法重写,因为在 afterRender 方法中,要通过 callParent 方法
 * 调用父类的afterRender方法,这就需要用到afterRender方法内的 “$owner”和“$name”属性,
 * 而使用apply方法会丢失这两个属性,导致callParent 方法失败,所以必须使用ovveride方法 重写,才能保留这两个属性。
 * 
 * @author annson
 * 
 */
if (Ext.grid.Column) {
 Ext.grid.Column.override({
     afterRender : function() {
      var me = this, el = me.el;
        
      me.callParent(arguments);
        
      // el.addCls(Ext.baseCSSPrefix +
      // 'column-header-align-' +
      // me.align).addClsOnOver(me.overCls);
      // me.titleAlign = me.titleAlign || me.align;
      me.titleAlign = me.titleAlign || 'center';// 设置标题栏默认居中
      el.addCls(Ext.baseCSSPrefix + 'column-header-align-'
        + me.titleAlign).addClsOnOver(me.overCls);
        
      me.mon(el, {
         click : me.onElClick,
         dblclick : me.onElDblClick,
         scope : me
        });
        
      // BrowserBug: Ie8 Strict Mode, this will break
      // the focus for this browser,
      // must be fixed when focus management will be
      // implemented.
      if (!Ext.isIE8 || !Ext.isStrict) {
       me.mon(me.getFocusEl(), {
          focus : me.onTitleMouseOver,
          blur : me.onTitleMouseOut,
          scope : me
         });
      }
        
      me.mon(me.titleContainer, {
         mouseenter : me.onTitleMouseOver,
         mouseleave : me.onTitleMouseOut,
         scope : me
        });
        
      me.keyNav = Ext.create('Ext.util.KeyNav', el, {
         enter : me.onEnterKey,
         down : me.onDownKey,
         scope : me
        });
     }
 });
}

 这样就可实现列标题默认居中,同时增加配置列标题居中设置的属性 : titleAlign  ,可在列定义时,很方便的设定列标题的对齐方式,效果如图:



 

修改后效果图修改后效果图












© 2010-2012 Cherish Information Technology. All rights reserved.
沪ICP备05009269号
电 话:021-5657-5270    邮 箱:service@cherish.com.cn    地 址:上海市宝山区长江南路180号长江软件园C栋110-117室

友情链接:

 乐学院    复旦商业知识在线    每日乐英语    创意发声    中国彩色宝石网     圆周率品牌机构    
唐山松下产业机器    欧莱雅(中国)     上海市互联网经济咨询中心    中电投电力工程有限公司     文汇网    
上海教育新闻网    上海市软件测评中心