extjs更改更多列的网格颜色单元格

我需要用颜色更改两个不同的列，字段change工作正常，但我不能更改字段name

我试过大胆的方法，但没用

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()
});

Ext.create（'Ext.grid.Panel'{
标题：《辛普森一家》，
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
栏目：[{
标题：“名称”，
数据索引：“名称”
}, {
标题：“电子邮件”，
数据索引：“电子邮件”，
弹性：1
}, {
标题：“更改”，
数据索引：“更改”，
tdCls:“x-change-cell”
}],
身高：200，
宽度：400，
视图配置：{
getRowClass:函数（记录、索引）{
var c=记录。获取（'change'）；
if（c<0）{
返回“价格下跌”；
}如果（c>0），则为else{
返回'价格上涨'；
};
//这里不行
**
var c=record.get（'name'）；
如果（名称==“GIO”）{
返回“彩色gio”；
}否则{
返回“其他颜色”；
}; **
}
},
renderTo:Ext.getBody（）
});

而不是使用的配置，因为您要更改

单元格的颜色，而不是
行的颜色

getRowClass重写此函数，以便在渲染期间将自定义CSS类应用于行。此函数应返回将添加到行的包装元素中的CSS类名（或空字符串“”表示无）

在本文中，我使用
gridcolumn
中的
renderer
config创建了一个演示

代码片段

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()
        });
    }
});

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

    .price-rise {
        background: green;
    }

    .color-gio {
        background: gray;
    }

    .color-other {
        background: yellow;
    }

</style>

CSS片段

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()
        });
    }
});

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

    .price-rise {
        background: green;
    }

    .color-gio {
        background: gray;
    }

    .color-other {
        background: yellow;
    }

</style>


1.价格下跌{
背景：红色；
}
1.价格上涨{
背景：绿色；
}
.彩色gio{
背景：灰色；
}
.其他颜色{
背景：黄色；
}
是否有打字错误？我认为if语句中使用的
c
变量声明和
name
变量，以及“not work”注释下面的变量应该具有相同的名称。
getRowClass（）
会为每个更新或添加的记录调用。因此，该类将应用于整行。在更改字段之后，函数将返回，并且永远不会执行您的名称代码。最好在列中使用渲染器。