时间戳

首页 > 技术文章 > ExtJs4学习（十）Grid单元格换色和行换色的方法

ExtJs4学习（十）Grid单元格换色和行换色的方法

love-omnus 2014-12-27 20:17 原文

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

方法介绍

 : 

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

方法介绍

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

Parameters

  • record : Ext.data.Model

    该记录对应的当前行。

  • index : Number

    行索引

  • rowParams : Object

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

  • store : Ext.data.Store

    绑定到grid的store。

Returns

  • String

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


推荐阅读