{
text:'类别',
dataIndex:'type',
align:'center',
renderer:function(value,metaData){
console.log(metaData);
if(value==0){
metaData.css='x-grid-record-gray';
return "注销系统";
}else if(value==1){
metaData.css='x-grid-record-green';
return "登录系统";
}
}
}
.x-grid-record-gray{
background-color:gray !important;
}
.x-grid-record-green{
background-color:green !important;
}
这里说明下,我在网上看到很多案例大体上这么做,但我没有成功,最后发现,原来是我写的样式最终被extjs的覆盖了,不起作用,如果想提高自己写的样式优先级,得加上!important
renderer :
renderer函数是一个拦截者模式,用于改变渲染到单元格的值和样式。 例如:
{
renderer: function(value){
if (value === 1) {
return '1 person';
}
return value + ' people';
}
}
另外一个字符串命名ext.util.format方法可以通过
{
renderer: 'uppercase'
}
默认: false
Available since: 3.4.0
value : Object
当前单元格的数据值
metaData : Object
当前单元格对象;可以使用或修改
record : Ext.data.Model
该记录对应的当前行
rowIndex : Number
当前行的索引
colIndex : Number
当前列的索引
store : Ext.data.Store
绑定到grid的store。
view : Ext.view.View
当前视图
return : String
The HTML string to be rendered.
viewConfig:{
stripeRows: false,//是否隔行换色
getRowClass : function(record,rowIndex,rowParams,store){
var type = record.get('type');
switch (type){
case '0':
return 'x-grid-row-blue';
case '1':
return 'x-grid-row-red';
}
}
}
.x-grid-row-blue .x-grid-cell{
background-color:blue;
}
.x-grid-row-red .x-grid-cell{
background-color:red;
}
getRowClass( Ext.data.Model record, Number index, Object rowParams, Ext.data.Store store )
: String
重写这个函数在渲染时应用自定义的CSS样式。函数将返回被添加到该行div的CSS样式名称(或空字符串'')。 要应用多个样式名称,只需在返回字符串内使用空格分隔开 (例如 'my-class another-class').
示例用法:
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
return record.get("valid") ? "row-valid" : "row-error";
}
}
record : Ext.data.Model
该记录对应的当前行。
index : Number
行索引
rowParams : Object
DEPRECATED.(不推荐使用) 用于行body使用 方法 getAdditionalData 的rowbody功能。
store : Ext.data.Store
绑定到grid的store。
String
添加到该行的CSS样式名称。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章