效果
源代码
<html>
<head>
<meta http-equiv="Content-Type" c>
<title>Array Grid Example</title>
<link rel="stylesheet" type="text/css"
href="js/resources/css/ext-all.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady( function() {
// 数据，使用JSON格式的标准格式。
// 数组用[]
// 数据用逗号分开
var myData = [
[ 1, '张三', 3800, 1.73, '1970-01-01' ],
[ 2, '李四', 2800, 1.81, '1980-01-01' ],
[ 12, '王武', 2000, 1.43, '1988-03-13' ]
];
// 自定义的一个数据格式化方法
// 根据数字进行不同颜色的显示
function highter(val) {
if (val > 1.50) {
return '<span style="color:green;">' + val + '</span>';
} else{
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// 创建数据集的结构
var store = new Ext.data.SimpleStore( {
fields : [ {
name :"id"
}, {
name :'name'
}, {
name :'price',
type :'int'
}, {
name :'high',
type :'float'
}, {
name :'birthday',
type :'date',
dateFormat :'Y-m-d' // 日期的格式
} ]
});
// 从数组里面装载数据
store.loadData(myData);
// 创建表格
var grid = new Ext.grid.GridPanel( {
store :store,
columns : [ {
id : "id", // 内部的标识
header : "编号", // 显示的标题
width : 60, // 宽度
sortable : true, // 是否可以排序
dataIndex : "id" // 对应数据集的字段
},{
id :'name',
header :"姓名",
width :160,
sortable :true,
dataIndex :'name'
}, {
header :"收入",
width :75,
sortable :true,
renderer :'usMoney', // 使用系统自带的格式化方法
dataIndex :'price'
}, {
header :"身高(米)",
width :75,
sortable :true,
dataIndex :'high',
renderer: highter // 自定义的数据格式化方法
}, {
header :"出生日期",
width :100,
sortable :true,
renderer :Ext.util.Format.dateRenderer('Y年m月d日'), // 自定义的日期显示
dataIndex :'birthday'
} ],
autoExpandColumn :'name', // 这个列将默认占用所有的可用的列宽
height :350, // 高度
width :600, // 宽度
title :'人员信息表格' // 表格的标题
});
grid.render('grid-example'); // 生成到这个id标签里面
});
</script>
</head>
<body>
<h1>Grid例子 - <a href="http://www.java2000.net">JAVA世纪网</a> </h1>
<div id="grid-example"></div>
</body>
</html>
2008-08-21_065125.gif 
