dynamic - Extjs 4 gridpanel 动态颜色编码 Row/Cell

Question

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

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

谢谢你。

Answer 1

这里有什么动态？

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>
   

2. 如果您想根据addRowCls表格视图类的任何条件使用更改后期点的颜色。

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

3. 本身适用root config，例如参考下面的链接。

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

谢谢