Ext2.2用数组为数据源显示Grid的例子

eimhee · 发表于 2013-1-29 07:48:35

效果如下：

源代码如下：
<div class="highlighter">

<html><span />
<span /><head><span />
<span /><meta http-equiv="Content-Type" c><span />
<span /><title>Array Grid Example</title><span />
<span /><link rel="stylesheet" type="text/css"<span />
href="js/resources/css/ext-all.css" /><span />
<span /><script type="text/javascript" src="js/adapter/ext/ext-base.js"></script><span />
<span />
<span /><script type="text/javascript" src="js/ext-all.js"></script><span />
<span />
<span /><script type="text/javascript"><span />
Ext.onReady( function() {
<span />
// 数据，使用JSON格式的标准格式。
// 数组用[]
// 数据用逗号分开
var myData = [
[ 1, '张三', 3800, 1.73, '1970-01-01' ],
[ 2, '李四', 2800, 1.81, '1980-01-01' ],
[ 12, '王武', 2000, 1.43, '1988-03-13' ]
];
<span />
// 自定义的一个数据格式化方法
// 根据数字进行不同颜色的显示
function highter(val) {
if (val > 1.50) {
return '<span style="color:green;">' + val + '</span>';
} else{
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
<span />
// 创建数据集的结构
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);
<span />
// 创建表格
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 :'人员信息表格' // 表格的标题
});
<span />
grid.render('grid-example'); // 生成到这个id标签里面
});
<span /></script><span />
<span /></head><span />
<span /><body><span />
<span />
<span /><h1>Grid例子 - <a href="http://www.java2000.net">JAVA世纪网</a> </h1><span />
<span /><div id="grid-example"></div><span />
<span /></body><span />
<span /></html><span />

		自动登录	找回密码
密码			立即注册