我有一个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
})
}
这适用于简单渲染
CSS:
.custom-column
{
background-color: #ccc;
}
JavaScript的:
columns: [{
dataIndex: 'name',
renderer: function (value, meta) {
meta.css = 'custom-column';
return value;
}
}]
您可以使用getRowClass
在渲染过程中将自定义CSS类应用于行。
重写此函数以在呈现期间将自定义CSS类应用于行。此函数应返回将添加到行的换行div的CSS类名称(或空字符串''表示无)。要应用多个类名,只需在字符串中以空格分隔(例如'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;
}