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