日期:2014-05-16  浏览次数:20558 次

extjs样式问题,自定义设置及样式美化
今天使用ExtJS 2.2.1进行页面开发时,发现在IE6中的Grid的表头显示异常,图标和文字发生错乱,如图:

Ext-grid给列添加背景色 - 男哥 - 陈振国的博客 

  在Firefox和chrome显示都是正常的,很是奇怪,难道是版本问题?

  将2.2版本和2.2.1版本的ext-all.css进行了比较,发现有两处不一样,改回2.2版本后一切正常:、

  找到.x-menu a.x-menu-item{display:block;line-height:16px;padding:3px 21px 3px 27px;

  修改成.x-menu a.x-menu-item{display:block;line-height:16px;padding:3px 21px 3px 3px;

      找到.x-menu-item-icon{border:0 none;height:16px;padding:0;vertical-align:top;width:16px;position:absolute;left:3px;top:3px;margin:0;

  修改成.x-menu-item-icon{border:0 none;height:16px;padding:0;vertical-align:top;width:16px;margin:0 8px 0 0;

Ext-grid给列添加背景色 - 男哥 - 陈振国的博客

EXT高版本已经修复了这个问题

---------------------------------

修改选中行的颜色就可用如下设置完成:

 .x-grid3-row-selected{background:#c6e2ff!important;}

-----------在ext-all.css修改代码如下---------

.x-grid3-row {

border-color:#ffaaee;//改变grid边框颜色

border-top-color:#fff;

}

.x-gid3-row-alt{

background-color:#ddeeaa;//改变 行的颜色

}

.x-grid3-row-over {

border-color:#ddd;

      background-color:#ee1166;//鼠标移上去改变行的底色

      background-image:url(../images/default/grid/row-over.gif);

}
给grid一列加着色
1、这个为columnModel中的idaorD
   .x-grid3-col-aorD {
      background: #bde0e8
   }
2、css代码
.x-grid-back-red {
     background: #FF0000;
}
.x-grid-back-red {
   background: #FF0000;
}
Js代码
{
             header : '分成类型',
             dataIndex : 'divideType',
             renderer : function(v,m){
                 m.css='x-grid-back-red';
                return v;
             },
             width : 60
         }
{
           header : '分成类型',
           dataIndex : 'divideType',
           renderer : function(v,m){
               m.css='x-grid-back-red';
               return v;
           },
           width : 60
       }
3、
或者直接这样写也可以
Js代码
{
      &