ExtJS中设置Grid表格特定单元格的内容和样式

对于Grid中的column列,如果想根据特定的条件来显示特定的内容或样式,可以利用column的tdCls、tdAttr、tdStyle来实现。下面是一个具体的例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
		<title>示例</title> 
	    <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
	    <style type="text/css">
	    	.error {
	    		background-color : red !important;
	    		font-weight: bold !important;
	    	}
	    	.warn {
	    		background-color: yellow !important;
	    		font-weight: bold !important;
	    	}
	    </style>
	    <script type="text/javascript" src="ext4/ext-all.js"></script>
	    <script type="text/javascript">
		    Ext.onReady(function() {
		    	Ext.create('Ext.data.Store', {
		    		storeId : 'simpsonsStore',
		    		fields : [ 'name', 'email', 'phone' ],
		    		data : {
		    			'items' : [ {
		    				'name' : 'Lisa',
		    				"email" : "lisa@simpsons.com",
		    				"phone" : "555-111-1224"
		    			}, {
		    				'name' : 'Bart',
		    				"email" : "bart@simpsons.com",
		    				"phone" : "555-222-1234"
		    			}, {
		    				'name' : 'Homer',
		    				"email" : "home@simpsons.com",
		    				"phone" : "555-222-1244"
		    			}, {
		    				'name' : 'Marge',
		    				"email" : "marge@simpsons.com",
		    				"phone" : "555-222-1254"
		    			} ]
		    		},
		    		proxy : {
		    			type : 'memory',
		    			reader : {
		    				type : 'json',
		    				root : 'items'
		    			}
		    		}
		    	});
	
		    	Ext.create('Ext.grid.Panel', {
		    		title : 'Simpsons',
		    		store : Ext.data.StoreManager.lookup('simpsonsStore'),
		    		// cls : 'my-panel-no-border',
		    		// 启用允许复制
		    		viewConfig : {
		    			enableTextSelection : true
		    		},
		    		columns : [ {
		    			header : 'Name',
		    			dataIndex : 'name',
		    			renderer : function(value, metaData, record, rowIndex, colIndex, store, view) {
		    				// 当名为Lisa时,显示error样式
		    				if (value == 'Lisa') {
		    					metaData.tdCls = 'error';
		    					return 'Error';
		    				}
		    				// 当名为Homer时,显示warn样式
		    				if (value == 'Homer') {
		    					metaData.tdCls = 'warn';
		    				}
		    				return value;
		    			}
		    		}, {
		    			header : 'Email',
		    			dataIndex : 'email',
		    			flex : 1
		    		}, {
		    			header : 'Phone',
		    			dataIndex : 'phone'
		    		} ],
		    		height : 200,
		    		width : 400,
		    		renderTo : Ext.getBody()
		    	});
		    });
	    </script>
	</head> 
</html>

上面代码的实现效果如下:

实现效果

图1:实现效果

阅读官方API中Ext.grid.column.Column部分renderer配置的内容,可以知道该配置的函数实现中可以传进value、metaData、record、rowIndex、colIndex、store、view这几个参数,其中metaData标识的就是当前的单元格,可以通过tdCls、tdAttr、tdStyle来指定样式。tdCls可以直接使用CSS class定义,tdAttr可以直接使用html样式定义,tdStyle可以直接在html中使用style定义。

官网给出的示例如下:

Ext.create('Ext.data.Store', {
     storeId: 'simpsonsStore',
     fields: ['class', 'attr', 'style'],
     data: {
         'class': 'red-bg',
         'attr': 'lightyellow',
         'style': 'red'
     }
});

Ext.create('Ext.grid.Panel', {
     title: 'Simpsons',
     store: Ext.data.StoreManager.lookup('simpsonsStore'),
     columns: [{
         text: 'Name',
         dataIndex: 'class',
         renderer: function (value, metaData) {
             metaData.tdCls = value;
             return value;
         }
     }, {
         text: 'Email',
         dataIndex: 'attr',
         flex: 1,
         renderer: function (value, metaData) {
             metaData.tdAttr = 'bgcolor="' + value + '"';
             return value;
         }
     }, {
         text: 'Phone',
         dataIndex: 'style',
         renderer: function (value, metaData) {
             metaData.tdStyle = 'color:' + value;
             return value;
         }
     }],
     height: 200,
     width: 400,
     renderTo: Ext.getBody()
 });

除了可以在单元格中使用cls等这种方式来指定样式以外,基本上其他的组件也都有类似cls、style的属性以供开发者去自定义样式,使用方式类似。

本文标题:ExtJS中设置Grid表格特定单元格的内容和样式

本文链接:http://yedward.net/?id=306

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章