Extjs网格面板一列背景颜色更改为另一列值 [英] Extjs Grid panel one column background Color change on another column value

问题描述

我在我所根据另一列值的值的一个列的CSS然后如何做到这一点我不能使用渲染器的功能，因为它的工作原理上的onload改变一个ExtJS编辑网格面板是有任何其他方式我我添加了我有性别列和ID列的代码，所以当性别列选择男性然后ID的背景颜色应该改变为粉红色，否则不这样做。

I have an Extjs Editor Grid panel in which i have to change the css of one column depending upon the value of another column value then how to do it i cannot use renderer function because it works on onload is there any other way i am attaching code in which i have gender column and id column so when gender column select male then background colour of ID should change to Pink colour else not so how to do it.

  {
            id: 'value',
            name: 'value',
            header: 'Gender',
            dataIndex: 'insured',
            width: 100,
            editor: new fm.ComboBox({

                typeAhead: true,
                displayField: 'gender',
                mode: 'local',
                transform: 'gender',
                triggerAction: 'all',
                selectOnFocus: true,
                forceSelection: true,
                stripeRows: true,
                lazyRender: true,
                listeners: {

                    }
                }
            })
        },
  {
        id: 'ID',
        name: 'ID',
        header: 'ID',
        dataIndex: 'ID',
        width: 100,
        hidden: true,
        editor: new fm.TextField({
            allowBlank: true,
            maxLength: 500
        })
    }

推荐答案

这将适用于简单呈现

CSS：

.custom-column
{
    background-color: #ccc; 
}

JavaScript：

columns: [{
    dataIndex: 'name',
    renderer: function (value, meta) {
        meta.css = 'custom-column';
        return value;
    }
}]

编辑：

您可以使用

You can use getRowClass to apply custom CSS classes to rows during rendering.

覆盖此函数以在
呈现期间将自定义CSS类应用于行。此函数应该返回将添加到行的包装div的CSS类名称（或空的
string''for none）。要
应用多个类名，只需在
中返回空格分隔的字符串（例如'my-class another-class'）。

Override this function to apply custom CSS classes to rows during rendering. This function should return the CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string (e.g. 'my-class another-class').

Javascript：

columns: [{
    dataIndex: 'ID',
    ...
    tdCls: 'ID' //add table css class
}],

viewConfig: {
    getRowClass: function(record, index) {
        var gender = record.get('insured');

        if (gender === 0) {
        //male
            return 'gender-male';
        } else if (gender === 1) {
        //female
            return 'gender-female';
        } else {
        //unknown
            return 'gender-unknown';
        }
    }
}

附加 CSS：

.gender-male .ID {
    background-color: #088da5;
}
.gender-female .ID {
    background-color: #f799af;
}
.gender-unknown .ID {
    background-color: #BADA55;
}

这篇关于Extjs网格面板一列背景颜色更改为另一列值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！