您的位置：首页 > Web前端 > JavaScript

ExtJs Grid行显示不同颜色2

2013-11-20 23:57 211 查看

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 创建。

来自为知笔记(Wiz)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航