在viewConfig属性的getRowClass中指定颜色代码后,背景颜色不会更改

时间:2016-02-11 13:08:48

标签: javascript extjs extjs3

此处是 JavaScript ,其中我在 BusinessObject 列和 CustomTable 列中包含不同数据的字段上设置背景颜色。< / p>

projectgrid= new Ext.grid.GridPanel
     ({
         id:projectgrid,
         cm : projectInfoFieldsCM,
         store: inlineGridStore,
         stripeRows: true,
         autoScroll:true,
         width:550,
         height:500,
         bodyCssClass : 'customInlineGridCSS',
         viewConfig: 
         {
            forceFit: false,
            autoFill : false,
            deferEmptyText : false,
            emptyText : '<div align="center"><span style="font-size: 9pt; font-weight: normal">No record available</span></span></div>',
            getRowClass: function(record, index, rowParams, store) {
                if(record.get('BusinessObject')!=record.get('CustomTable')){
                     return 'gender-male';
                }
            }
         }
      });

这里是 css 文件,我在其中指定了颜色编码。 注意:我尝试了两个在css文件中声明的ID。

             .data-row-light-red
            {
            background-color: #ff0000 !important ;
            }

            .gender-male .ID {
                background-color: #088da5;
            }

我做错了什么,因为我之前已经实现了这个功能,但我陷入了这个功能?

2 个答案:

答案 0 :(得分:0)

也许不希望你确切需要但是我已经在列中使用渲染器功能做了类似的事情,也许你也可以使用它?

这是我的代码:

 columns: [
   {header: "Color", dataIndex: "COLOR", width:100,
     renderer: 
       function(value, metaData, record, rowIndex, colIndex, store){
         metaData.style = "background-color: rgb(255,255,255);";
         return "";
       }                                        
  },

希望这有帮助

答案 1 :(得分:-1)

您需要使用逗号分隔类选择器

试试这个

.gender-male, .ID
{
   background-color: #088da5;
}

或者

.gender-male
{
   background-color: #088da5;
}

如果您不需要任何ID类