ExtJs4学习(十)Grid单元格换色和行换色的方法
阅读原文时间:2023年07月09日阅读:1

{
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 "登录系统";
}
}
}

css样式

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

css样式

.x-grid-row-blue .x-grid-cell{
background-color:blue;
}
.x-grid-row-red .x-grid-cell{
background-color:red;
}

方法介绍

getRowClassExt.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";
    }
}

Parameters

  • record : Ext.data.Model

    该记录对应的当前行。

  • index : Number

    行索引

  • rowParams : Object

    DEPRECATED.(不推荐使用) 用于行body使用 方法 getAdditionalData 的rowbody功能。

  • store : Ext.data.Store

    绑定到grid的store。

Returns

  • String

    添加到该行的CSS样式名称。

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章