javascript - Extjs网格面板一列背景颜色更改另一列值

Question

我有一个 Extjs 编辑器网格面板，在其中我必须根据另一列值的值更改一列的 css 那么如何做到这一点我无法使用渲染器功能，因为它在 onload 上工作还有其他方法吗？我正在附加代码，其中我有性别列和 id 列，因此当性别列选择男性时，ID 的背景颜色应更改为粉红色，否则不知道该怎么做。

  {
            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
        })
    }

Answer 1

这适用于简单渲染

CSS:

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

JavaScript:

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

编辑:

您可以使用getRowClass在渲染期间将自定义 CSS 类应用到行。

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;
}