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 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
Ajax请求超时与网络异常处理图文详解
May 23 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实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
event.srcElement+表格应用
2006/08/29 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
详解vue-cli3使用
2018/08/14 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python数据结构之图的实现方法
2015/07/08 Python
Python画图学习入门教程
2016/07/01 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python之django母板页面的使用
2018/07/03 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
教师党员个人整改措施材料
2014/09/16 职场文书
信用卡工资证明范本
2014/10/17 职场文书
户外活动总结
2015/02/04 职场文书
建议书格式
2015/02/04 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
vue使用echarts实现折线图
2022/03/21 Vue.js
Python OpenCV实现图形检测示例详解
2022/04/08 Python