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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
vuex 中插件的编写案例解析
Jun 10 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
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php上传excel表格并获取数据
2017/04/27 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
python字典的常用操作方法小结
2016/05/16 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python中数字是否为可变类型
2020/07/08 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
迟到检讨书900字
2014/01/14 职场文书
爱之链教学反思
2014/04/30 职场文书
2014组织生活会方案
2014/05/19 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
大学生创业计划书
2019/06/24 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python