ExtJS多列表格单元格颜色修改问题：name列样式无法生效

我看了你的代码，发现两个关键问题导致Name列的颜色设置没生效，咱们一步步来修复：

问题1：变量名错误 #

你在判断Name的时候写了if (name == 'GIO')，但你定义的变量是c（var c = record.get('name');），这里应该用c来判断，不然JS会把name当成未定义的变量，条件永远不成立。

问题2：函数提前终止，后续代码无法执行 #

在getRowClass里，你处理change字段的时候，不管是c < 0还是c > 0都直接return了函数，这会导致后面处理Name的代码永远不会被执行到。哪怕change等于0，后面的代码虽然能执行，但逻辑上你应该把两种条件的class结合起来，或者调整判断顺序。

修正后的代码示例 #

这里提供两种方案，你可以根据需求选择：

方案1：同时应用change和name的样式（合并class） #

如果想让行同时拥有change和name对应的样式，可以把两个class拼接返回：

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Name',
        dataIndex: 'name'
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        header: 'Change',
        dataIndex: 'change',
        tdCls: 'x-change-cell'
    }],
    height: 200,
    width: 400,
    viewConfig: {
        getRowClass: function(record, index) {
            var rowClasses = [];
            // 处理change对应的样式
            var changeVal = record.get('change');
            if (changeVal < 0) {
                rowClasses.push('price-fall');
            } else if (changeVal > 0) {
                rowClasses.push('price-rise');
            }
            // 处理name对应的样式
            var nameVal = record.get('name');
            if (nameVal === 'GIO') {
                rowClasses.push('color-gio');
            } else {
                rowClasses.push('color-other');
            }
            // 返回拼接后的class字符串
            return rowClasses.join(' ');
        }
    },
    renderTo: Ext.getBody()
});

方案2：优先按name设置样式，再考虑change（根据优先级选择） #

如果name的样式优先级更高，可以先判断name，再处理change：

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Name',
        dataIndex: 'name'
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        header: 'Change',
        dataIndex: 'change',
        tdCls: 'x-change-cell'
    }],
    height: 200,
    width: 400,
    viewConfig: {
        getRowClass: function(record, index) {
            var nameVal = record.get('name');
            if (nameVal === 'GIO') {
                return 'color-gio';
            }
            // 如果不是GIO，再处理change的样式
            var changeVal = record.get('change');
            if (changeVal < 0) {
                return 'price-fall';
            } else if (changeVal > 0) {
                return 'price-rise';
            }
            // 默认样式
            return 'color-other';
        }
    },
    renderTo: Ext.getBody()
});

别忘了CSS样式 #

最后要确保你的CSS里正确定义了这些类：

/* Name列相关样式 */
.color-gio {
    color: #ff0000; /* 红色，可自行修改 */
}
.color-other {
    color: #333333; /* 深灰色，可自行修改 */
}
/* Change列相关样式 */
.price-fall {
    color: #008000; /* 绿色 */
}
.price-rise {
    color: #ff8c00; /* 橙色 */
}

这样修改后，Name列的颜色应该就能正常生效了！

内容的提问来源于stack exchange，提问作者Giorgio