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

Question

我有这个网格

{
        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:如果我将表格更改为不可排序，数据会出现但没有任何样式

Answer 1

Any ideas?

您需要更改当前代码而不是 这个 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": "lisa@simpsons.com",
            "phone": "555-111-1224",
            "isChecked": 1
        }, {
            'name': 'Bart',
            "email": "bart@simpsons.com",
            "phone": "555-222-1234",
            "isChecked": 0
        }, {
            'name': 'Homer',
            "email": "homer@simpsons.com",
            "phone": "555-222-1244",
            "isChecked": 0
        }, {
            'name': 'Marge',
            "email": "marge@simpsons.com",
            "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()
});