Extjs根据条件设置表格某行背景色
来源:互联网 发布:淘宝刀剑商 编辑:程序博客网 时间:2024/05/29 08:32
话不多说,贴上代码
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" /><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');});
- Extjs根据条件设置表格某行背景色
- 根据不同条件设置ITEM的背景色和鼠标移动时的背景色
- 根据条件设置repeater中生成表格的样式
- Extjs中gridPanel单元格自定义样式,根据值设置背景色长度
- 在ListView的getView里根据条件设置背景色后,背景会错乱
- Excel_VBA:根据条件设定背景色
- 根据条件刷新datagrid表格
- ExtJS GridPanel根据条件改变字体颜色
- extjs 根据查询条件导出内容
- css设置表格奇偶行背景色
- jQuery easyUI设置表格中的背景色
- 根据传入条件设置checkbox
- ExtJs 设置GridPanel表格文本垂直居中
- extjs grid设置某行字体颜色及背景色
- Extjs grid设置单元格字体颜色,及单元格背景色
- Extjs grid设置单元格字体颜色,及单元格背景色
- Extjs grid设置单元格字体颜色,及单元格背景色
- EXTJS 设置文本框背景色和边框颜色
- android,总结,判断应用程序是否切换到后台
- HTML嵌套表格布局网页
- java instrument 初探
- Python之Scheduler框架浅析
- Linux下用echo输出彩色字符串
- Extjs根据条件设置表格某行背景色
- MediaPlayer 和 SoundPool 的使用及其区别
- sicily 1020. Big Integer
- Android界面学习2
- Android adb shell 命令大全
- awk对于2个变量的比较
- 卡特兰数
- 盛大创新院的电话面试
- 同步信号与异步信号的区别