Extjs 4 gridpanel 动态颜色编码 Row/Cell答案

【问题标题】：Extjs 4 gridpanel dynamic color coding Row/CellExtjs 4 gridpanel 动态颜色编码 Row/Cell
【发布时间】：2026-01-25 20:20:02
【问题描述】：

我想动态改变行的背景颜色，有时也改变EXTJS4网格面板的一个单元格。有办法吗？

我必须查询我的 php 并检索数据集，然后我将确定每个数据集的颜色。这可能吗？就像我说的那样，我希望它是动态的。

谢谢。

【问题讨论】：

请发布您的代码（您的尝试）...以便我们能够解决您的问题。

标签： dynamic extjs4 color-coding

【解决方案1】：

这里有什么动态？

如果您想在加载时更改颜色，请在列映射上使用renderer。

<style type="text/css">
 .red{background-color: red;}
</style>

<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();

var store = new Ext.data.SimpleStore({
    fields: ['name', 'value'],
    data: [['A', 1], ['B', 2]]
});
var renderer = function(value, metadata, record, rowIndex, colIndex, store) {
    if (value == colIndex) {
        metadata.css = 'red';
    }
    return colIndex;
}
var cm = new Ext.grid.ColumnModel([
    {header: 'Name', dataIndex: 'name'},
    {header: '1', dataIndex: 'value', renderer: renderer},
    {header: '2', dataIndex: 'value', renderer: renderer},
    {header: '3', dataIndex: 'value', renderer: renderer},
    {header: '4', dataIndex: 'value', renderer: renderer},
    {header: '5', dataIndex: 'value', renderer: renderer}
]);
var grid = new Ext.grid.GridPanel({
    store: store,
    cm: cm,
    listeners: {
        cellclick: function(grid, rowIndex, colIndex) {
            if (colIndex > 0) {
                var rec = grid.store.getAt(rowIndex);
                rec.set('value', colIndex);
            }
        }
    }
});
grid.render(document.body);
});
</script>

如果您想根据任何条件更改延迟点的颜色，请使用表格视图类的addRowCls。

listeners : {
select : function(cellModel, record, rowIndex) {
     var myGrid = this.items.get('gridItemId');                          
     myGrid.getView().addRowCls(rowIndex, 'row-style');
},

在root config 中申请，例如参考下面的链接。

http://www.sencha.com/forum/showthread.php?120001-Help-with-dynamic-row-color-in-grid

谢谢

【讨论】：