在不更新 CSS 文件的情况下渲染网格行

【问题标题】：Render Grid Row Without Updating CSS File在不更新 CSS 文件的情况下渲染网格行
【发布时间】：2016-12-08 15:29:12
【问题描述】：

我可以使用这样的列渲染器渲染单个网格列；

renderer: function(val, meta) {
    if (val === 'i') {
        meta.style = "background-color:#86b0f4;";
    }else if (val === 'n') {
        meta.style = "background-color:#fcd1cc;";
    }
    return val
},

我想在网格行上使用同样的想法。

不幸的是，我唯一能遇到的事情是：

viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store){
        return record.get("partytype") == 6 ? "row-highlight" : "";
    }
},

这需要我更新我不想做的 CSS 文件。

extjs中能否直接操作网格行上的css值？

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

列渲染器中的meta 参数也具有record 属性。您可以在那里查找相关值，而不是依赖单元格值参数，然后为配置中的每一列添加对相同方法的引用。

为了避免代码重复，渲染器方法可以在任何地方声明，但为了保持这个示例简洁，我刚刚使用了 IIFE / 内联声明。

{
    // Ext.grid.Panel
    // ...
    columns: (function(){
        function columnRenderer(cellValue, meta){
            var value = meta.record.get('value');
            if(value === 'i')
                meta.style = 'background-color:#86b0f4;';
            else if(value === 'n')
                meta.style = 'background-color:#fcd1cc;';
            return cellValue;
        }
        return [
            {
                text: 'Foo',
                dataIndex: 'foo',
                renderer: columnRenderer
            },
            {
                text: 'Bar',
                dataIndex: 'bar',
                renderer: columnRenderer
            }
        ];
    })()
}

» Fiddle

【讨论】：