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

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函数是一个拦截者模式，用于改变渲染到单元格的值和样式。 例如：

{
    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样式名称。