Question

我已经有一个网格渲染，如下所示：

＆＃13;

                            me.processHealth({
                                xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    var str = '';
                                    if (value === 0)  {
                                        str = 'No';
                                    }

                                    if (value === 1)  {
                                        str = 'Yes!';
                                    }

                                    if (value === 2)  {
                                        str = 'Yes! Sub';
                                    }

                                    if (value === 3)  {
                                        str = 'Yes! Vice Chair';
                                    }

                                    if (value === 4)  {
                                        str = 'Yes! Chair';
                                    }

                                    return str;
                                },

＆＃13;

该代码根据查询结果更改字符串。我现在需要添加一个渲染器，它也会根据相同的值更改背景颜色。这是代码（我不知道如何将两者整合在一起）：

＆＃13;

renderer : function(value, meta) {
    if(parseInt(value) === 1) {
        meta.style = "background-color:green;";
    } else if(parseInt(value) === 2) {
        meta.style = "background-color:red;";
    }
    return value;
}

＆＃13;

我如何整合这些2，以便根据这些值更改str和bg颜色？感谢

Answer 1

单个renderer函数可以修改metaData并返回要显示的值：

me.processHealth({
    xtype: 'gridcolumn',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    var str = '';
    if (value === 0)  {
        str = 'No';
    }

    if (value === 1)  {
        str = 'Yes!';
        metaData.style = "background-color:green;";
    }

    if (value === 2)  {
        str = 'Yes! Sub';
        metaData.style = "background-color:red;";
    }

    if (value === 3)  {
        str = 'Yes! Vice Chair';
    }

    if (value === 4)  {
        str = 'Yes! Chair';
    }

    return str;
    },

要将CSS类添加到整行，您可以在viewConfig中使用getRowClass作为网格（请参阅Sencha文档here）

viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store){
        return record.get("valid") ? "row-valid" : "row-error";
    }
}

将2个渲染器组合成ExtJS中的一个语句

1 个答案: