Question

我是极端初学者。我有一个网格，我需要根据某些条件为每列着色。我创建了网格，并为每个网格元素添加了一个渲染器。

结果按预期工作，但仅适用于第一行，我需要将颜色代码应用于所有行。关于我做错了什么的任何线索？

我使用extjs 4.3

以下代码和结果图片。

Ext.define('Example.grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.testGrid',
height: 240,
margin: '10',
store: 'teststore',
requires: [
    'tests.contextmenu'
],
columns: [
    { xtype: 'gridcolumn', width:70,  dataIndex: 'running', text: 'Running',
    renderer: function(value, meta) {
              if (value != 0)
                    meta.tdCls = 'row-background-lightyellow';
              return value;}},
    { xtype: 'gridcolumn', width:70,  dataIndex: 'completed', text: 'Completed', 
    renderer: function(value, meta){
            if (value!=0)
                    meta.tdCls = 'row-background-lightgreen';
            return value;}},
    { xtype: 'gridcolumn', width:70,  dataIndex: 'failed', text: 'Failed', 
    renderer: function(value, meta){
            if (value!=0)
                    meta.tdCls = 'row-background-lightred';
            return value;} },
    { xtype: 'gridcolumn', width:70,  dataIndex: 'waiting', text: 'Waiting', 
    renderer: function(value, meta) {
            if (value!=0)
                    meta.tdCls = 'row-background-lightgrey';
            return value;} },
    { xtype: 'gridcolumn', dataIndex: 'jobid', text: 'Job Id' },
    { xtype: 'gridcolumn', dataIndex: 'jobname', text: 'Name', renderer: rendergrey},
    { xtype: 'gridcolumn', dataIndex: 'reason', text: 'Info', flex: 1 }
],

initComponent: function() {
        var me = this;
        me.callParent(arguments)
refresh: function() {
    var me = this;
    this.getView().refresh();
}
});
function rendergrey(value, meta) {
       if (value!=0)
            meta.tdCls += 'row-background-lightgrey';
       return value;
   };

结果如下：

Answer 1

如果在数据集中添加第三，第四和第五行，您可能会看到一种模式：问题是由交替行的浅色背景颜色覆盖您的自定义颜色引起的。

您没有添加CSS代码，但我怀疑您可能希望在颜色后面添加!important以使其优先于alt-row background-color。 E.g。

.row-background-lightyellow {
    background-color: #ffc !important;
}

或者您可能希望使用grid上的viewConfig完全删除交替颜色：

viewConfig: {
    stripeRows: false
}

第三种可能性是使用内联CSS，它总是优先于CSS样式：

// meta.tdCls = 'row-background-lightyellow'
meta.style = 'background-color: #ffc'

Extjs Grid仅渲染第一行

1 个答案: