![](/img/trans.png)
[英]Dynamically change extjs 4 grid textbox background color in grid panel
[英]Extjs Grid panel one column background Color change on another column value
我有一个 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.