ExtJS4 Grid改變單元格背景顏色及Column render學習

更新時間：2013年02月06日 11:26:14 作者：

利用的是Column的render實現(xiàn)單元格背景顏色改變,本文給予了實現(xiàn)代碼，感興趣的朋友可以了解下，或許對你學習ExtJS4 Grid有所幫助

利用的是Column的render

先看效果圖：

代碼如下：

復制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<link href="../extjs-4.1.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
<script src="../extjs-4.1.0/bootstrap.js" type="text/javascript"></script> 
<style type="text/css"> 
.x-grid-cell.user-online 
{ 
background-color: #9fc; 
} 
.x-grid-cell.user-offline 
{ 
background-color: blue; 
} 
</style> 
<script type="text/javascript"> 
Ext.onReady(function () { 
Ext.widget('grid', { 
title: 'Users', 
store: { 
fields: ['name', 'email', 'online'], 
data: [ 
{ 'name': '王俊偉', 'email': 'wangjunwei1@163.com', 'online': true }, 
{ 'name': '王俊偉1', 'email': 'wangjunwei2@163.com', 'online': false }, 
{ 'name': '王俊偉2', 'email': 'wangjunwei3@163.com', 'online': false }, 
{ 'name': '王俊偉3', 'email': 'wangjunwei4@163.com', 'online': true } 
] 
}, 
columns: [ 
{ 
header: 'Name', 
dataIndex: 'name', 
renderer: function (value, meta, record) { 
meta.tdCls = record.get("online") ? 'user-online' : 'user-offline'; 
return value; 
} 
}, 
{ header: 'Email', dataIndex: 'email', flex: 1 }, 
{ header: 'Online', dataIndex: 'online' } 
], 
width: 400, 
renderTo: Ext.getBody() 
}); 

}); 
</script> 
</head> 
<body> 

</body> 
</html>