如何根据严重性更改数据网格中的行颜色？

Question

如何根据严重性条件更改数据网格中的行颜色？我是这个EXTJS主题的​​新手.我曾经读过阅读,存储到存储和编写器来编写数据.将所有数据提取到网格后,如何根据严重性条件更改数据网格中的行颜色？你可以用代码工作来解释我吗？

Answer 1

您可以使用GridView类(Ext.grid.GridView)来操作网格的用户界面.您还可以在viewConfig的财产的GridPanel.这是一个例子:

viewConfig: {
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    }

ps:从ExtJS API文档本身获取的示例

价格下跌和价格上涨是相应设置背景颜色的CSS.例如:

.price-fall { 
 background-color: #color;
}

.price-rise {
 background-color: #color;
}

Answer 2

您可以使用（参见Ext JS APIgetRowClass ）的方法来完成。GridView

引用 API 文档中的示例：

viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},