ExtJS —单元格背景色隐藏脏标志

Question

I have an editable grid. When a column is edited, I show the dirty flag and change the cells background-color. For this I have updated the CSS class:

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

This works fine. However, when I change the background color for the whole row the dirty flag no longer shows:

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

CSS:

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

So what attributes do I need to add to the row-highlight class so the dirty flag doesnt get hidden?

thanks

Answer 1

A couple of things

1 - background-image: url(../images/grid/dirty.gif) no-repeat 0 0 !important; is not a valid syntax, you are getting it confused with the background property.

2 - Do not add !important to .row-highlight .x-grid-cell this will make it impossible for less restrictive selectors to replace the cell background color.

Your CSS should look like

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

Check this fiddle: https://fiddle.sencha.com/#fiddle/1251 Edit the name "Bart" to see the dirty flag CSS