在网格模板列上渲染条件语句 [ExtJS 4.2.1]答案

【问题标题】：Rendering conditional statement on grid templatecolumn [ExtJS 4.2.1]在网格模板列上渲染条件语句 [ExtJS 4.2.1]
【发布时间】：2014-06-12 16:53:24
【问题描述】：

我已经成功在普通网格列上渲染条件语句

{
        header: '&nbsp',
        dataIndex: 'status_b2',
        menuDisabled: true,
        flex: 1,
        sortable: false,
        renderer : function(value, meta) {
            var status = value.split("<br/>")[0];

            if (status == "Unset Price"){
                meta.style = "background-color:pink;";
            }
            else if (status == "Available"){
                meta.style = "background-color:green;";
            }else if (status == "Booked Unpaid"){
                meta.style = "background-color:yellow;";
            }else if (status == "Booked Paid"){
                meta.style = "background-color:orange;";
            }else if (status == "Checked In"){
                meta.style = "background-color:red;";
            }else if (status == "Checked Out"){
                meta.style = "background-color:purple;";
            }
            return value;
}

我的问题是如何在模板列网格上使用条件逻辑进行渲染？如果 room_status == "Dirty"，我想将背景颜色添加为红色。

{
            text: 'Room List',
            xtype: 'templatecolumn',
            tpl: 'ROOM {room_number} <br/> {room_type_name} <br/> {bed_type} | {room_status}',
            menuDisabled: true,
            flex: 1,
            sortable: false
 }

【问题讨论】：

标签： extjs extjs4 extjs4.2

【解决方案1】：

点击这些链接 sencha forum 和 stackoverflow link

我们可以有一些内联函数并调用它们。关注此link。在这些函数中实现您的逻辑。

【讨论】：

【解决方案2】：

我也习惯于使用渲染器向单元格添加样式以突出显示它们。实际上，templatecolumn 已经有一个默认应用的渲染器，它的工作原理是基本上返回应用到记录的模板。因此，如果您想使用自己的渲染器，您可以复制 defaultRenderer 中的两行代码，或者直接调用列的 defaultRenderer：

function customRenderer(value, metaData, record, rowIndex, colIndex, store, view)
{
  if (record.get('severity') == 'critical')
  {
    metaData.tdCls += ' redHighlight';
  }
  return view.panel.columns[colIndex].defaultRenderer(value, metaData, record);
};

【讨论】：