Extjs 4網格面板動態顏色編碼行/單元格

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上latet點的顏色。

   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

感謝