ExtJs gridPanel動態單元格Record.Data的背景顏色

Question

我正在PHP中使用ExtJs 4.2，創建一個網格，其中包含一個從SQL DB讀取信息以填充行的網格。其中一列涉及該行的狀態（打開，關閉等），另一個涉及在先前代碼中應用於表格單元格背景顏色的十六進制顏色值。

我已閱讀關於在相關列上使用renderer config選項來應用CSS類（包含所需顏色的CSS文件和原始文本），但我正在處理特定顏色作爲行數據的一部分被檢索。

我認爲沿着下面一行的代碼將工作，但它沒有。

我將如何獲得此功能？很多示例都使用「if」邏輯來確定要渲染的顏色，但我只需渲染商店中數據中提供的一種顏色。有一個類的列表是不可取的，因爲這些顏色可能在數據庫中改變，或者可以添加新的狀態;最好從數據中調用顏色值。

{text: "Status", 
sortable: true, 
width:100, 
dataIndex: 'Status', 
renderer: function(value, meta, record){ 
        meta.attr = 'style="color:#'record.data.StatusColour'"'; 
        return value; 
    } 
} 

編輯：

Ext.onReady(function(){ 
    //Define the model 
    Ext.define('CaseModel', { 
     extend: 'Ext.data.Model', 
     proxy: { 
      type: 'ajax', 
      reader: 'json' 
     }, 
     fields: [ 
      'Id', 
      'Project', 
      'Status', 
      'StatusColour', 
     ] 
    }); 

    // create the Data Store 
    var caseStore = Ext.create('Ext.data.Store', { 
     model: 'CaseModel', 
     autoLoad: true, 
     proxy: { 
      // load using HTTP 
      type: 'ajax', 
      url: '<?= $site_url ?>Case/JSON/All', 
      reader: { 
       type: 'json', 
       model: 'CaseModel', 
       root: 'data' 
      } 
     }, 
     remoteSort: true, 
     pageSize: 20 
    }); 

    //Render grid 
    Ext.create('Ext.grid.Panel', { 
     width: 800, 
     store: caseStore, 
     title: 'Cases', 
     columns: [ 
      {text: "ID", sortable: true, width: 25, dataIndex: 'Id'}, 
      {text: "Project", sortable: true, width: 100, dataIndex: 'Project'}, 
      {text: "Status", sortable: true, width:100, dataIndex: 'Status' 
      // renderer goes here 
      /* 
      , renderer: function(value, meta, record) { 
       meta.style = 'background-color: ' + record.get('StatusColour'); 
       return value; 
      } 
      */ 
      }, 
      {text: 'Details', xtype: 'templatecolumn', width: 50, tpl: '<a class=\"link_btn\" href=\"<?php echo site_url()?>Case/View/{Id}\">Open</a>'} 
     ], 
     renderTo: Ext.get('CaseGrid'), 
     dockedItems: [{ 
      xtype: 'pagingtoolbar', 
      dock: 'bottom', 
      itemId: 'PagingToolbar', 
      displayInfo: true, 
      store: caseStore 
     }], 
     features: [ 
      {ftype: 'grouping'} 
     ] 
    }); 
}); 

//Sample JSON data 
{ 
    "total":"17", 
    "data": 
    [ 
     {"Id":"64","Project":"test case 1","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"49","Project":"fgdfgdfgdfg","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"65","Project":"test case 2","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"50","Project":"abc","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"51","Project":"aaaa","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"67","Project":"test case 4","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"52","Project":"fffffff","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"37","Project":"ghfdgh","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"53","Project":"ddddddddd","Status":"New","StatusColour":"ffffff"}, 
     {"Id":"29","Project":"Suppress 0 value line items to SOP","Status":"Open","StatusColour":"6dce6d"}, 
     {"Id":"66","Project":"test case 3","Status":"Open","StatusColour":"6dce6d"}, 
     {"Id":"16","Project":"Egress locks","Status":"Postponed","StatusColour":"cd7ddb"}, 
     {"Id":"63","Project":"Public Comment2","Status":"Duplicated","StatusColour":"bf6161"}, 
     {"Id":"30","Project":"Nominal codes for Stock items","Status":"Duplicated","StatusColour":"bf6161"}, 
     {"Id":"17","Project":"Details missing","Status":"Closed","StatusColour":"777777"}, 
     {"Id":"18","Project":"Non-standard finish not priced","Status":"Closed","StatusColour":"777777"}, 
     {"Id":"19","Project":"POA and VAT Rate","Status":"Closed","StatusColour":"777777"} 
    ] 
} 

Answer 1

參考文檔，則renderer的參數 「元」 支持以下屬性：tdCls，tdAttr和樣式。

所以你的情況，風格將是合適的：

{ 
    text: "Status", 
    sortable: true, 
    width: 100, 
    dataIndex: 'Status', 
    renderer: function(value, meta, record) { 
     meta.style = 'background-color: #' + record.get('StatusColour'); 
     return value; 
    } 
}