Dynamic Extjs 4 gridpanel动态颜色编码行/单元格

Dynamic Extjs 4 gridpanel动态颜色编码行/单元格,dynamic,extjs4,color-coding,Dynamic,Extjs4,Color Coding,我想动态地更改行的背景色,或者有时更改EXTJS4网格面板的单元格的背景色。有办法吗 我必须查询我的php并检索数据集,然后确定每个数据集的颜色。这可能吗?就像我说的,我希望它是动态的 谢谢。这里的动态是什么 如果要在加载时更改颜色,请在列映射上使用渲染器 <style type="text/css"> .red{background-color: red;} </style> <script type="text/javascript"> Ext.onR

我想动态地更改行的背景色,或者有时更改EXTJS4网格面板的单元格的背景色。有办法吗

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


谢谢。

这里的动态是什么

  • 如果要在加载时更改颜色,请在列映射上使用渲染器

    <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>
    
  • 根配置
    自身中应用,例如,请参阅下面的链接

  • 谢谢

    请发布您的代码(您的尝试)。。。这样我们才能解决你的问题。
    listeners : {
    select : function(cellModel, record, rowIndex) {
         var myGrid = this.items.get('gridItemId');                          
         myGrid.getView().addRowCls(rowIndex, 'row-style');
    },