在 ExtJS 网格单元中部分设置文本颜色答案

【问题标题】：Partially setting text colour within an ExtJS grid cell在 ExtJS 网格单元中部分设置文本颜色
【发布时间】：2014-07-29 16:16:53
【问题描述】：

我有一个 ExtJS 4.2 网格列（作为 PHP MVC 3 网站的一部分）与项目的一组进程的状态相关。此列返回每个已完成的进程的三字母缩写字符串，以空格分隔，例如，Was Pre Cut 将是已清洗、准备和切割的项目，Was Scr Pee 将是已完成的项目水洗、擦洗和去皮。

然而，所需的功能是检索所有进程，并设置每个条目的样式以显示它是否已完成；例如，<green>Was Pre</green> Cut 表示已清洗和准备但未切割的物品。

这可能吗？这是我将每个进程的值和相应的样式格式作为数组对象而不是字符串传递，并通过单元格的渲染器生成所需的格式，还是我对网格列渲染器的能力持乐观态度？

【问题讨论】：

标签： css extjs formatting extjs4.2

【解决方案1】：

列渲染器为您提供输出 HTML 的运行时，您几乎无法高估它的功能...

我不确定我是否完全理解您的问题，但这是一个入门示例。给定一个可能的进程列表，它会显示每条记录的所有进程，并突出显示为此记录标记的进程 (example fiddle)：

var processes = ['Foo', 'Bar', 'Baz', 'Bat']; // all available processes

new Ext.grid.Panel({
    renderTo: Ext.getBody()
    ,width: 400
    ,height: 200
    ,forceFit: true

    ,store: {
        fields: ['id', 'status', 'statusDetails']
        ,data: [
            {id: 1, status: 'Foo Bar', statusDetails: ['Foo', 'Bar']}
            ,{id: 2, status: 'Bar Baz', statusDetails: ['Bar', 'Baz']}
            ,{id: 3, status: 'Baz Bat', statusDetails: ['Baz', 'Bat']}
        ]
    }

    ,columns: [{
        dataIndex: 'id'
        ,text: "ID"
        ,width: 40
    },{
        dataIndex: 'status'
        ,text: "Status"
        ,renderer: function(value, md, record) {
            md.tdCls = 'processes-cell'; // gives us a hook for CSS
            return Ext.Array.map(processes, function(process) {
                var statusDetails = record.get('statusDetails');
                // possible alternative:
                // var statusDetails = record.get('status').split(' ');
                return '<div class="process ' + process + ' '
                + (statusDetails.indexOf(process) !== -1 ? 'on' : 'off')
                + '">' + process
                + '</div>';
            }).join('');
        }
    }]
});

随心所欲地设计它。例如：

.processes-cell .process {
    display: inline-block;
    width: 25%;
    text-align: center;
    border: 1px solid white;
}
.processes-cell .process.off {
    background-color: lightpink;
}
.processes-cell .process.on {
    background-color: lightgreen;
}
.processes-cell .x-grid-cell-inner {
    padding: 1px;
}

【讨论】：

【解决方案2】：

Ha yep rixo 打败了我。他是对的，您需要为您的列使用renderer 属性。我还创建了一个小提琴，以防您可能需要查看另一个示例：https://fiddle.sencha.com/#fiddle/872

【讨论】：