Extjs根据条件设置表格某行背景色示例


Posted in Javascript onJuly 23, 2014

话不多说,贴上代码

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="../extjs3/resources/css/ext-all.css" rel="external nofollow" /> 
<script type="text/javascript" src="../extjs3/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../extjs3/ext-all.js"></script> 
<script type="text/javascript" src="array-grid.js"></script> 
<style type="text/css"> 
.<span style="font-family: Arial, Helvetica, sans-serif;">my_row_class</span><span style="font-family: Arial, Helvetica, sans-serif;">{ background:gray;}</span> 
</style> 
</head> 
<body> 
<div id="grid-example"></div> 
</body> 
</html>

 js代码,其中应-----隔开的代码即为关键代码,自己分析吧:

Ext.onReady(function(){ 
Ext.QuickTips.init(); 
Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 

// sample static data for the store 
var myData = [ 
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], 
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], 
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], 
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'] 
]; 

/** 
* Custom function used for column renderer 
* @param {Object} val 
*/ 
function change(val) { 
if (val > 0) { 
return '<span style="color:green;">' + val + '</span>'; 
} else if (val < 0) { 
return '<span style="color:red;">' + val + '</span>'; 
} 
return val; 
} 

/** 
* Custom function used for column renderer 
* @param {Object} val 
*/ 
function pctChange(val) { 
if (val > 0) { 
return '<span style="color:green;">' + val + '%</span>'; 
} else if (val < 0) { 
return '<span style="color:red;">' + val + '%</span>'; 
} 
return val; 
} 

// create the data store 
var store = new Ext.data.ArrayStore({ 
fields: [ 
{name: 'company'}, 
{name: 'price', type: 'float'}, 
{name: 'change', type: 'float'}, 
{name: 'pctChange', type: 'float'}, 
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 
] 
}); 

// manually load local data 
store.loadData(myData); 

// create the Grid 
var grid = new Ext.grid.GridPanel({ 
store: store, 
columns: [ 
{ 
id :'company', 
header : 'Company', 
width : 160, 
sortable : true, 
dataIndex: 'company' 
}, 
{ 
header : 'Price', 
width : 75, 
sortable : true, 
renderer : 'usMoney', 
dataIndex: 'price' 
}, 
{ 
header : 'Change', 
width : 75, 
sortable : true, 
renderer : change, 
dataIndex: 'change' 
}, 
{ 
header : '% Change', 
width : 75, 
sortable : true, 
renderer : pctChange, 
dataIndex: 'pctChange' 
}, 
{ 
header : 'Last Updated', 
width : 85, 
sortable : true, 
renderer : Ext.util.Format.dateRenderer('m/d/Y'), 
dataIndex: 'lastChange' 
} 
],viewConfig : {forceFit:true 
//------------------------------------------------ 
,getRowClass : function(record,rowIndex,rowParams,store){ 
if("3m Co"==record.get('company')){ 
return 'my_row_class'; 
} 
} 
//------------------------------------------------ 
}, 
stripeRows: true, 
autoExpandColumn: 'company', 
height: 350, 
width: 600, 
title: 'Array Grid', 
// config options for stateful behavior 
stateful: true, 
stateId: 'grid' 
}); 

// render the grid to the specified div in the page 
grid.render('grid-example'); 
});
Javascript 相关文章推荐
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
技术男用来对妹子表白的百度首页
Jul 23 #Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 #Javascript
JS在IE下缺少标识符的错误
Jul 23 #Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 #Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 #Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 #Javascript
jQuery获取节点和子节点文本的方法
Jul 22 #Javascript
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
浅析Python中yield关键词的作用与用法
2016/11/29 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
浪费资源的建议书
2014/03/12 职场文书
创先争优个人总结
2015/03/04 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python