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数组处理多个字符串的连接问题
Aug 20 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
javascript版2048小游戏
Mar 18 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
openlayers4实现点动态扩散
Aug 17 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
打造计数器DIY三步曲(中)
2006/10/09 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
给领导的致歉信范文
2014/01/13 职场文书
质量保证书范本
2014/04/29 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis