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


Posted in Javascript onFebruary 06, 2013

利用的是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="../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>
Javascript 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
javascript继承机制实例详解
Nov 20 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
layui表格实现代码
May 20 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 #Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 #Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 #Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 #Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 #Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 #Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 #Javascript
You might like
php socket实现的聊天室代码分享
2014/08/16 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
PHP7 其他修改
2021/03/09 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JS与C#编码解码
2013/12/03 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python类的实例化问题解决
2019/08/31 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python+requests接口自动化框架的实现
2020/08/31 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
python unichr函数知识点总结
2020/12/16 Python
python FTP编程基础入门
2021/02/27 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
车间班组长岗位职责
2013/11/13 职场文书
总裁岗位职责
2013/12/04 职场文书
小学生读书感言
2014/02/12 职场文书
《手指教学》反思
2014/02/14 职场文书
春节联欢会策划方案
2014/05/16 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书