css - 根据值更改行颜色(在行内)

我有这个网格

{
        xtype: 'gridpanel',
        id: 'grdSeguimiento',
        margin: '20 0 10 0',
        width: 1423,
        store: 'Solicitud',
        viewConfig: {
            getRowClass: function(record, rowIndex, rowParams, store) {
                console.log(record);
                return record.data.get('TIEMPO') == 1 ? 'child-row' : 'adult-row';

            },
            stripeRows: false
        },
        columns: [

            {
                xtype: 'gridcolumn',
                hidden: true,
                dataIndex: 'TIEMPO',
                hideable: false
            }
        ],
        plugins: [
            {
                ptype: 'rowediting',
                listeners: {
                    edit: 'onRowEditingEdit'
                }
            }
        ]
    }

而这个css文件

.child-row .x-grid-cell {
background-color: #ffe2e2 !important;
color: #900;
}

.adult-row .x-grid-cell {
background-color: #e2ffe2 !important;
color: #090;
 }

我只希望每行具有基于每行内的值（TIEMPO）的颜色。

但是我正在

Error: rendered block refreshed at 0 rows while BufferedRenderer view size is 63

使用css文件之前，网格工作正常。我做了一些研究，但找不到任何有用的东西。

上面的代码不是全部代码，我使用了renderer和action列，但我认为这并不那么重要。

有任何想法吗？

编辑1：如果我将表格更改为不可排序，则会显示数据，但没有任何样式

最佳答案

有任何想法吗？


您需要更改当前代码，而不是
 此record.data.get('TIEMPO')您需要使用record.get('TIEMPO')或record.data.TIEMPO以获得更多详细信息，您可以参考此Ext.data.Model get()。

在这里，我创建了一个小的sencha fiddle演示。您可以在这里看到它运行正常。

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone', 'isChecked'],
    data: {
        'items': [{
            'name': 'Lisa',
            "email": "[email protected]",
            "phone": "555-111-1224",
            "isChecked": 1
        }, {
            'name': 'Bart',
            "email": "[email protected]",
            "phone": "555-222-1234",
            "isChecked": 0
        }, {
            'name': 'Homer',
            "email": "[email protected]",
            "phone": "555-222-1244",
            "isChecked": 0
        }, {
            'name': 'Marge',
            "email": "[email protected]",
            "phone": "555-222-1254",
            "isChecked": 1
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Grid row class on basis for row value..',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    viewConfig: {
        getRowClass: function (record, rowIndex, rowParams, store) {
            return record.get('isChecked') == 1 ? 'child-row' : 'adult-row';
            //you can also use
            //record.data.isChecked == 1 ? 'child-row' : 'adult-row';

        },
        stripeRows: false
    },
    columns: [{
        text: 'Name',
        dataIndex: 'name',
        flex: 1
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone',
        flex: 1
    }],
    height: 200,
    // width: 400,
    renderTo: Ext.getBody()
});

关于css - 根据值更改行颜色(在行内)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47230924/