ExtJs4学习(十)Grid单元格换色和行换色的方法

页面导航:首页 > 网络编程 > JavaScript > ExtJs4学习(十)Grid单元格换色和行换色的方法

ExtJs4学习(十)Grid单元格换色和行换色的方法

来源: 作者: 时间:2016-02-04 09:15 【

Grid单元 26684;换色{text: 39;类别 39;,dataIndex: 39;type 39;,align: 39;center 39;,renderer:function(value,metaData){console log(metaData);if(value==0){metaData css= 39;x-grid-re

上一篇http://www.2cto.com/kf/201412/365462.
Grid单元格换色

\

 

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

     

    方法介绍

     

    getRowClass( Ext.data.Model record, Number index, Object rowParams, Ext.data.Store store ) : String

    重写这个函数在渲染时应用自定义的样式。函数将返回被添加到该行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样式名

      •  

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<