ExtJS -- 单元格背景颜色隐藏脏标志答案

【问题标题】：ExtJS -- cell background color hides dirty flagExtJS -- 单元格背景颜色隐藏脏标志
【发布时间】：2016-03-10 20:44:47
【问题描述】：

我有一个可编辑的网格。编辑列时，我会显示脏标志并更改单元格的背景颜色。为此，我更新了 CSS 类：

.x-grid-dirty-cell {
    background-image: url(../images/grid/dirty.gif) no-repeat 0 0 !important;
    background-color:#ffff4d !important;
}

这很好用。但是，当我更改整行的背景颜色时，脏标志不再显示：

,viewConfig: {
    getRowClass: function(record_){
      if(record_.COPIED){
        return "row-highlight";
      } 
    }
  }

CSS：

.row-highlight .x-grid-cell{
    background-color:#ffff4d !important;        
}

那么我需要在行高亮类中添加哪些属性才能使脏标志不被隐藏？

谢谢

【问题讨论】：

标签： html css extjs extjs4.2

【解决方案1】：

几件事

1 - background-image: url(../images/grid/dirty.gif) no-repeat 0 0 !important; 不是一个有效的语法，您会将它与 background 属性混淆。

2 - 不要将 !important 添加到 .row-highlight .x-grid-cell 这将使得限制较少的选择器无法替换单元格背景颜色。

你的 CSS 应该是这样的

.row-highlight .x-grid-cell {
    background-color: #ffff4d;
}
.x-grid-dirty-cell {
    background: url(../images/grid/dirty.gif) no-repeat left center !important;
}

检查这个小提琴：https://fiddle.sencha.com/#fiddle/1251 编辑名称“Bart”以查看脏标志 CSS

【讨论】：