Ext2.0框架的Grid使用介绍
5星 · 超过95%的资源 需积分: 0 50 浏览量
2008-01-30
11:20:35
上传
评论
收藏 221KB DOC 举报 
最近空闲时间在学习 Ext2.0 框架，只有一个字的感叹“强”，我从未想到 JS 代码能够写出这么
绚丽的 Web 页面出来，以前看到 YUI，惊若天人，如今看到 EXT2.0 的东西，更是感觉震撼。
Ext2.0 是一个 JS 框架，它的 Grid 控件和其它可以显示数据的控件，能够支持多种数据类型，
如二维数组、Json 数据和 XML 数据，甚至包括我们自定义的数据类型。Ext 为我们提供了一
个桥梁 Ext.data.Store，通过它我们可以把任何格式的数据转化成 grid 可以使用的形式，
这样就不需要为每种数据格式写一个 grid 的实现了。
首先，一个表格应该有列定义，即定义表头 ColumnModel：
//定义一个 ColumnModel，表头中有四列
varcm=newExt.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable=true;
该 ColumnModel 定义了表格的四个列，其每列的名称和对应的数据键。请注意
defaultSortable 属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，
可以设置：
{header:'编号',dataIndex:'id',Sortable:true},
现在就来看看这个 Ext.data.Store 是如何转换三种数据的。
1.二维数组：
//ArrayData
vardata=[
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','male','name3','descn3'],
['4','male','name4','descn4'],
['5','male','name5','descn5']
];
//ArrayReader
vards=newExt.data.Store({
proxy:newExt.data.MemoryProxy(data),
reader:newExt.data.ArrayReader({},[
{name:'id',mapping: 0},
{name:'sex',mapping: 1},
{name:'name',mapping: 2},
{name:'descn',mapping: 3}
])
});
ds.load();
ds 要对应两个部分：proxy 和 reader。proxy 告诉我们从哪里获得数据，reader 告诉
我们如何解析这个数据。
资源评论
zyxh3652012-12-13还不错，正在使用中
