EXTJS4:如何改变grid某一个单元格的背景颜色

时间:2022-02-09 18:23:50

测试环境: ext-4.1.0-gpl

 EXTJS4:如何改变grid某一个单元格的背景颜色

JS CODE:

Ext.onReady(function () {
    Ext.widget('grid', {
        title: 'Users',
        store: {
            fields: ['name', 'email', 'online'],
            data: [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "online": true },
                { 'name': 'Bart', "email": "bart@simpsons.com", "online": false },
                { 'name': 'Homer', "email": "home@simpsons.com", "online": true },
                { 'name': 'Marge', "email": "marge@simpsons.com", "online": true }
            ]
        },
        columns: [
            {
                header: 'Name',
                dataIndex: 'name',
                renderer: function (value, meta, record) {
                    meta.tdCls = record.get('online') ? 'user-online' : 'user-offline';
                    return value;
                }
            },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Online', dataIndex: 'online' }
        ],
        width: 400,
        renderTo: 'output'
    });
});

所用到的自定义CSS :

.x-grid-cell.user-online
{
    background-color: #9fc;
}
.x-grid-cell.user-offline
{
    background-color: #ffc;
}