Javascript Extjs网格面板一列背景颜色在另一列值上更改

我有一个Extjs编辑器网格面板，其中我必须根据另一列的值更改一列的css，然后如何做我不能使用渲染器功能，因为它可以在onload上工作。是否有其他方式我附加代码，其中我有性别列和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
        })
    }

---

这将适用于简单的渲染

CSS:

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

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

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

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

JavaScript:

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

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

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

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

编辑： 可以使用在渲染期间将自定义CSS类应用于行

重写此函数以在执行过程中将自定义CSS类应用于行 翻译此函数应返回CSS类名（或空） 将添加到行的换行div.to的字符串“” 应用多个类名，只需返回在 字符串（例如“我的类另一个类”）

Javascript:

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

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

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

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

附加CSS:

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

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

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

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

---

仅供参考，如果记录值发生变化，渲染器将调用每个团队。所以你实际上可以使用渲染器。谢谢你的回答…但我的问题是，我使用的是extjs编辑器网格面板，我已经使用渲染器来更改某些列的背景颜色…但我的问题是，当性别组合框将选择男性时，只有ID列的背景颜色更改为其他颜色，否则不是这样的…可以吗你给我一些示例代码意味着我正在使用id的beforeshow函数..并且在里面我想更改背景颜色，谢谢你写下我的答案；）让我知道你是否觉得它有用。hii应用了，但我仍然没有得到我正在使用的Extjs 3.4，我希望这个css应用后，选择性别为是，这样它应该会影响到其他列的Extjs编辑器网格面板立即像监听器改变…和使用这个get row类我没有得到性别值我使用了警报..嘻谢谢回答我已经解决了我的问题…使用渲染器功能…再次感谢你，你的答案也是正确的。我第一次尝试使用渲染器功能，它工作得很好，没有问题。。。。我希望我们能保持联系