ExtJS4 Grid改变单元格背景颜色及Column render学习

143 阅读 0 评论 95 点赞

我是靠谱客的博主虚拟蜜蜂，最近开发中收集的这篇文章主要介绍ExtJS4 Grid改变单元格背景颜色及Column render学习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

利用的是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>