Question

我正在处理一个EXTJS网格，其行颜色将根据表格中的字段（状态字段）值进行设置。

用户可以编辑行的字段，单击更新后，行的颜色将根据为该行设置的状态字段值而更改。

我需要从db。中的表中设置行背景颜色。

目前我正在设置不同的css类，并使用以下代码检查状态字段值。

getRowClass: function(record, rowIndex, rp, ds)
{
    if( record.get('status') == 'xxxxx' )
    {
        return 'status-xxxxx';
    }
    else if( record.get('status') == 'yyyyy' )
    {
        return 'status-yyyyy';
    }
    else
    {
        return 'status-zzzzzz';
    }
}

我在商店中有颜色，每行都有状态值。

但我需要从db中获取颜色并设置为行背景。

任何人都可以帮助我实现这一目标。

由于

Answer 1

如果要在行记录中使用行background-color颜色，则必须在渲染行后设置每行td元素的背景颜色。

您可以在refresh gridView.事件中执行此操作。因此，在网格配置中，您应该定义如下内容：

viewConfig: {
    listeners: {
        refresh: function(view) {      

            // get all grid view nodes
            var nodes = view.getNodes();

            for (var i = 0; i < nodes.length; i++) {

                var node = nodes[i];

                // get node record
                var record = view.getRecord(node);

                // get color from record data
                var color = record.get('color');

                // get all td elements
                var cells = Ext.get(node).query('td');  

                // set bacground color to all row td elements
                for(var j = 0; j < cells.length; j++) {
                    console.log(cells[j]);
                    Ext.fly(cells[j]).setStyle('background-color', color);
                }                                       
            }
        }      
    }
}

摆弄实例：https://fiddle.sencha.com/#fiddle/2m8

EXTJS网格行颜色随着从数据库中获取颜色代码而动态变化

1 个答案: