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

Question

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

请帮忙

Answer 1

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

请通过小提琴运行示例enter code here

Answer 2

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

我创建了一个小提琴来演示这个概念。

<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 进行了更新