Question

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

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值吗？

Answer 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

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

1 个答案: