Question

我需要使用颜色更改两个不同的列，字段更改工作正常，但我也无法更改字段名称。

我尝试了大胆的但没有工作。

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 c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            };
            //DOES'NT WORK HERE 
            **
            var c = record.get('name');
            if (name == 'GIO') {
                return 'color-gio';
            } else {
                return 'color-other';
            }; **

        }
    },
    renderTo: Ext.getBody()
});

Answer 1

而不是使用getRowClass使用renderer的gridcolumn配置，因为您想要更改cell颜色而不是row。

getRowClass 重写此函数以在呈现期间将自定义CSS类应用于行。此函数应返回将添加到行的包装元素的CSS类名（或空字符串''）。

在 FIDDLE 中，我使用renderer内的gridcolumn配置创建了一个演示。希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'demostore',
            fields: ['name', 'email', 'phone', 'change'],
            data: [{
                name: 'GIO',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224',
                change: -1
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234',
                change: 10
            }, {
                name: 'GIO',
                email: 'homer@simpsons.com',
                phone: '555-222-1244',
                change: 20
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254',
                change: -20
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Change cell color based on record',
            store: 'demostore',

            columns: [{
                header: 'Name',
                dataIndex: 'name',
                flex: 1,
                renderer: function (value, metaData, record, rowIndex) {
                    metaData.tdCls = record.get('name') == 'GIO' ? 'price-fall' : 'price-rise'
                    return value;
                }
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                header: 'Phone',
                dataIndex: 'phone',
                flex: 1
            }, {
                header: 'Change',
                dataIndex: 'change',
                renderer: function (value, metaData, record, rowIndex) {
                    metaData.tdCls = record.get('change') > 0 ? 'color-other' : 'color-gio';
                    return value;
                }
            }],
            height: 200,
            renderTo: Ext.getBody()
        });
    }
});

CSS SNIPPET

<style>
    .price-fall {
        background: red;
    }

    .price-rise {
        background: green;
    }

    .color-gio {
        background: gray;
    }

    .color-other {
        background: yellow;
    }

</style>

extjs更改网格颜色单元格以获得更多列

1 个答案: