Question

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

请帮忙

Answer 1

一旦您的逻辑确定背景颜色需要更改，您将获得列索引并将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进行了更新

Answer 2

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

请通过小提琴running exampleenter code here

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

2 个答案: