Ext2.2用数组为数据源显示Grid的例子
效果如下：http://p.blog.csdn.net/images/p_blog_csdn_net/java2000_net/EntryImages/20080821/2008-08-21_065125.gif
源代码如下：
<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 />
页:
[1]