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 相关文章推荐
js自动下载文件到本地的实现代码
Apr 28 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
技术男用来对妹子表白的百度首页
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
php下实现折线图效果的代码
2007/04/28 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
获取远程文件大小的php函数
2010/01/11 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
解密效果
2006/06/23 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python简单生成随机姓名的方法示例
2017/12/27 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
keras得到每层的系数方式
2020/06/15 Python
详解pandas赋值失败问题解决
2020/11/29 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
可靠的数据流传输TCP
2016/03/15 面试题
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
战略合作意向书范本
2014/04/01 职场文书
反对邪教标语
2014/06/30 职场文书
党建工作汇报材料
2014/12/24 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏