根据某些条件更改 ExtJs 4.2 网格列的背景色答案

【问题标题】：Change the backcolor for ExtJs 4.2 grid column based on some condition根据某些条件更改 ExtJs 4.2 网格列的背景色
【发布时间】：2015-02-28 14:03:26
【问题描述】：

我正在使用 ExtJs 4.2 可编辑网格。当用户编辑一个单元格时，我需要更改整个列的背景颜色。我正在使用onCellEdit 事件，它给了我列索引。但我找不到任何可以让我更改背景颜色的属性或方法。

请帮忙

【问题讨论】：

我能问一下为什么你会根据一个单元格数据更改一整列的颜色吗？如果你能展示一个小提琴来重新创建你的网格并解释你想要实现的目标，那将会很方便。
在我的网格中，我有一列名为 user 和一列名为 percentAllocated 。一个用户可以出现在多行中。当我修改 percentAllocated 字段时，用户的字段总和不应超过 100% 这就是为什么我要突出显示整个列。

标签： extjs extjs4.2 extjs-grid

【解决方案1】：

我做了一个例子，如果你点击单元格，整个列的背景颜色都会改变。

请过小提琴running exampleenter code here

【讨论】：

【解决方案2】：

一旦您的逻辑确定需要更改背景颜色，您就可以获取列索引并将 tdCls 类设置为相关的 CSS 类。完成更改配置后，请确保在网格视图上调用刷新。

我创建了一个fiddle 来演示这个概念。

<style>
.invalid-column, .x-grid-row-alt > .invalid-column {
    background-color: red; 
    color: white;
}
</style>


Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'userStore',
            fields: ['user', 'percent'],
            data: {
                'items': [{
                    'user': 'John',
                    "percent": 50
                }, {
                    'user': 'John',
                    "percent": 20
                }, {
                    'user': 'John',
                    "percent": 20
                }, {
                    'user': 'John',
                    "percent": 10
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });

        Ext.create("Ext.grid.Panel", {
            renderTo: Ext.getBody(),
            title: "Test",
            store: Ext.data.StoreManager.lookup('userStore'),
            columns: [{
                header: 'User',
                dataIndex: 'user'
            }, {
                header: "Percent",
                dataIndex: "percent",
                editor: {
                    xtype: "numberfield",
                    allowBlank: false
                }
            }],
            selType: "cellmodel",
            plugins: {
                ptype: "cellediting",
                clicksToEdit: 1
            },
            listeners: {
                "edit": function(editor, context, eOpts) {

                    var store = this.getStore();
                    var total = 0;

                    store.each(function(record) {
                        total += record.get('percent');
                    });

                    if (total < 0 || total > 100) {
                        this.columns[1].tdCls ='invalid-column';
                        this.getView().refresh();
                    }
                }
            }
        });
    }
});

编辑：代码针对 ExtJs 5 进行了错误测试，已针对 ExtJs 4.2 进行了更新

【讨论】：