Extjs根据条件设置表格某行背景色示例
更新时间：2014年07月23日 17:25:06 投稿：whsnow
这篇文章主要介绍了Extjs如何根据条件设置表格某行背景色,需要的朋友可以参考下
话不多说，贴上代码
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');
});
相关文章
相信很多人对使用js进行客户端的编程比较头大，其实现在已经有了很多优秀的js库，可以大大简化js编程的工作量，其中，jquery和extjs就是两款非常优秀的js库。2009-10-10
把省份与城市以树的形式输出的Ext.XTemplate的实例代码，需要的朋友可以参考下2012-03-03
ExtJS 访问容器对象使用说明，需要的朋友可以参考下。2009-10-10
知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏)下面为大家介绍下extjs的两个tbar问题，感兴趣的朋友可以参考下2013-08-08
extjs的一个亮点就是提供了丰富的UI，使得没有艺术细胞的程序员也能做出绚丽的界面。把所有的UI集中到一起，有好处也有坏处，好处是有了统一的风格和接口，坏处是js文件过于庞大，使用extjs的最小集合也超过了500k，所以在有些项目中并不适用。2009-10-10
有时候我们在新建列表中的一项后需要进入立刻进入详细信息的编辑页面，为了使得操作简便，一般设定自动导向。2010-04-04
ExtJS的FieldSet的column列布局，需要的朋友可以参考下。2009-11-11
本文接着上讲Extjs学习笔记之二 Extjs之Form介绍Extjs的表单。Extjs除了类似普通的html form的表单项之外，还有一些功能更为丰富实用的表单项。2010-01-01
根据我在论坛上的观察，xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype，或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。2010-01-01
ExtJS TabPanel beforeremove beforeclose使用说明
ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框2010-03-03
最新评论