Extjs изменить ячейку цвета сетки для большего количества столбцов

Question

Мне нужно изменить два разных столбца с цветом, поле изменить работает нормально, но я не могу изменить поле имя тоже.

Iпопробовал жирный, но не работает.

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 config gridcolumn, потому что вы хотите изменить cell цвет, а не row.

getRowClass Переопределите эту функцию, чтобы применять пользовательские классы CSS к строкам во время рендеринга.Эта функция должна возвращать имя класса CSS (или пустую строку '', если оно отсутствует), которое будет добавлено к элементу переноса строки.

В этом FIDDLE , Я создал демо, используя renderer config внутри gridcolumn.Надеюсь, что это поможет / поможет вам достичь ваших требований.

КОД 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>