ExtJs4学习（十）Grid单元格换色和行换色的方法
浏览数：37 /
时间：2015年06月09日
Grid单元格换色
{
text:'类别',
dataIndex:'type',
align:'center',
renderer:function(value,metaData){
console.log(metaData);
if(value==0){
metaData.css='x-grid-record-gray';
return "<span style='color:#FFF;font-weight:bold;'>注销系统</span>";
}else if(value==1){
metaData.css='x-grid-record-green';
return "<span style='color:#FFF;font-weight:bold;'>登录系统</span>";
}
}
}css样式
.x-grid-record-gray{
background-color:gray !important;
}
.x-grid-record-green{
background-color:green !important;
}这里说明下，我在网上看到很多案例大体上这么做，但我没有成功，最后发现，原来是我写的样式最终被extjs的覆盖了，不起作用，如果想提高自己写的样式优先级，得加上！important
效果：
行换色
viewConfig:{
stripeRows: false,//是否隔行换色
getRowClass : function(record,rowIndex,rowParams,store){
var type = record.get('type');
switch (type){
case '0':
return 'x-grid-record-gray';
case '1':
return 'x-grid-record-green';
}
}
}重写这个函数在渲染时应用自定义的CSS样式。函数将返回被添加到该行div的CSS样式名称（或空字符串‘‘）。 要应用多个样式名称，只需在返回字符串内使用空格分隔开 (例如 ‘my-class another-class‘).
示例用法：
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
return record.get("valid") ? "row-valid" : "row-error";
}
}Parameters
- record : Ext.data.Model
该记录对应的当前行。
- index : Number
行索引
- rowParams : Object
DEPRECATED.（不推荐使用） 用于行body使用 方法 getAdditionalData 的rowbody功能。
- store : Ext.data.Store
绑定到grid的store。
Returns
- String
添加到该行的CSS样式名称。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
