extjs-grid修改行列的颜色

最新推荐文章于 2021-02-01 03:24:06 发布

原创最新推荐文章于 2021-02-01 03:24:06 发布 · 577 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用ExtJS框架自定义Grid组件的样式，包括修改选中行颜色、边框颜色、背景颜色以及如何通过CSS和JS代码给特定列添加着色效果。

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

.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代码
{
             header : '编号',
             dataIndex : 'fcId',
             css : 'background: #FF0000;',
             width : 40
         }
{
           header : '编号',
           dataIndex : 'fcId',