注册登录

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

时间:2016-02-12 13:05 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【ExtJS4 Grid改变单元格背景颜色及Column render学习】，下面是详细的讲解！

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="http://www.jb51.net/article/../extjs-4.1.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="http://www.jb51.net/article/../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>

关于ExtJS4 Grid改变单元格背景颜色及Column render学习的用户互动如下：

　　相关问题：如何改变grid某一个单元格的背景颜色

　　答：以A1单元格为例： range("A1").interior.color=rgb(255,0,0) 这是改为红色。 >>详细

　　相关问题：Extjs4.2 怎么动态改变grid单元格背景色？

　　答：不是有cellclick事件吗? >>详细

　　相关问题：Ext.grid.panel如何根据状态修改render方式设置的...

　　答：value就是你单元格的内容。拿你最后两句比如来说 renderer: function(value, metaData, record, rowIdx, colIdx, store, view) { if(value == ‘正常’){ return 'OK'; }else if(value == '异常'){ return 'false'; }else{ return value; } } 留... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

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

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

关于ExtJS4 Grid改变单元格背景颜色及Column render学习的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）