ExtJs Grid行显示不同颜色2
ExtJs Grid行显示不同颜色2
2013年7月30日
15:22
如图：
如果想对莫一行设置样式，可以通过下面的方式：
Grid.getView().addRowClass(r,css)
修改Grid某一单元的样式可以用下面的方式实现：
Ext.get（grid.getView().getCell(r,c).addClass(css)）或者
grid.getView().getRow( r ).style.backgroundColor='red';
|
Ext.onReady(function(){ /* cmd对象主要负责表格的列信息，表格包含的列由columns配置属性来描述，简称cm.columns是一个数组，每一行数据元素描述表格的一列信息， header：表格中显示的文本； dataIndex：记录集字段； sortable：是否可以排序； renderer：列渲染函数； width：宽度； format：格式化信息 */ var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id',sortable:true}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}, {header:'日期',dataIndex:'birthday',type:'date',renderer:Ext.util.Format.dateRenderer('Y-m-d h:i:s') ,width:200}, {header:'颜色',name:'color',type:'string'} ]); var data = [ ['1','name1','descn1','1970-01-15T02:58:04','#FBF8BF'], ['2','name2','descn2','1970-01-15T02:58:04','#99CC99'], ['3','name3','descn3','1970-01-15T02:58:04','#F5C0C0'], ['4','name4','descn4','1970-01-15T02:58:04','#FFFFFF'], ['5','name5','descn5','1970-01-15T02:58:04','#0000FF']
] /* var store用来创建数据存储对象，这也是GirdPanel必须配置的属性， 作用：把各种各样的原始数据(二维数组、Json对象数组、xml文本等)转换成 Ext.data.Reacord类型的对象； 配置参数： proxy指定获取数据的方式，MemoryProxy用来解析javascript的对象 renderer表示如何解析这些数据；Ext.data.Reader专门用来解析数组，并且按照那种解析规范来解析；第一个参数表示提供数组下表位置存放的记录的Id（可选） Ext.data.ArrayReader中第二个参数表示的record记录的模型，name指定索引字段mapping表示，指定cm当中的dataIndex是什么，name可以指定索引，但是当指定mapping的时候数据显示根据它来决定
*/ var store = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({},[ {name:'id',mapping:0}, {name:'name',mapping:1}, {name:'descn',mapping:2}, {name:'birthday',type:'date',dataFormat:'Y-m-dTH:i:s',mapping:3}, {name:'color',type:'string'} ]) }); //只有load的时候数据才能够进行加载 store.load(); var grid = new Ext.grid.GridPanel({ renderTo:'grid', store:store, // enableColumnMove:false, //enableColumnResize:false,//禁止拖放功能 stripeRows:true, loadMask:true, cm:cm, width:600, height:400, viewConfig : { forceFit : true, enableRowBody : true, getRowClass :function(record, rowIndex, p, ds) { var cls = 'white-row'; switch (record.data.color) { case '#FBF8BF' : cls = 'yellow-row' break; case '#99CC99' : cls = 'green-row' break; case '#F5C0C0' : cls = 'red-row' break; } return cls; } }, autoExpandColumn:'descn' }) }); /** 1、数据显示不全的原因，在data这个字段当中都重复了 2、高度和宽度没有设定
*/ |
html：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="../ext3.2/resources/css/ext-all.css"> </link> <style type="text/css" mce_bogus="1"> .white-row{ background-color: white;} .red-row{ background-color: #F5C0C0 !important; } .yellow-row{ background-color: #FBF8BF !important; } .green-row{ background-color: #99CC99 !important; } .blue-row{ background-color: #0000FF !important; } </style> <script type="text/javascript" src="../ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext3.2/ext-all.js"></script> <script type="text/javascript" src="grid.js"></script> <title>grid</title> </head> <body> <div id="grid" align="center"></div> </body> </html> |
已使用 Microsoft OneNote 2013 创建。
