来自 Record.Data 的 ExtJs gridPanel 动态单元格背景颜色

Question

我正在使用 PHP 中的 ExtJs 4.2，创建一个带有存储的网格，该存储从 SQL 数据库读取信息以填充行。其中一列与行的状态（打开、关闭等）相关，另一列与之前代码中应用于表格单元格背景颜色的十六进制颜色值相关。

我已经阅读了有关使用相关列上的渲染器配置选项来应用包含所需颜色的 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的参数“meta”支持以下属性：tdCls、tdAttr、style。

所以在你的情况下，风格是合适的：

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