- 1、本文档共18页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Ext2.0框架的Grid使用介绍
Ext2.0框架的Grid使用介绍
Ext2.0框架的Grid使用介绍???? 最近空闲时间在学习Ext2.0框架,只有一个字的感叹“强”,我从未想到JS代码能够写出这么绚丽的Web页面出来,以前看到YUI,惊若天人,如今看到EXT2.0的东西,更是感觉震撼。?Ext2.0是一个JS框架,它的Grid控件和其它可以显示数据的控件,能够支持多种数据类型,如二维数组、Json数据和XML数据,甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。
? 首先,一个表格应该有列定义,即定义表头ColumnModel:// 定义一个ColumnModel,表头中有四列var cm = new Ext.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.二维数组:// ArrayDatavar data = [??? [1,male,name1,descn1],??? [2,male,name1,descn2],??? [3,male,name3,descn3],??? [4,male,name4,descn4],??? [5,male,name5,descn5]];// ArrayReadervar ds = new Ext.data.Store({??? proxy: new Ext.data.MemoryProxy(data),??? reader: new Ext.data.ArrayReader({}, [??????? {name: id,mapping: 0},??????? {name: sex,mapping: 1},??????? {name: name,mapping: 2},??????? {name: descn,mapping: 3}??? ])});ds.load();? ds要对应两个部分:proxy和xy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。现在用的是Ext.data.MemoryProxy,它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组,并且告诉我们它会按照定义的规范进行解析,每行按顺序读取四个数据,第一个叫id,第二个叫sex,第三个叫name,第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。? mapping属性用于标记data中的读取后的数据与标头的映射关系,一般是不用设置的。但如果我们想让sex的数据中name栏中出现,可以设置mapping值。即id的mapping为2,后者为0。? 记得要执行一次ds.load(),对数据进行初始化。
? 数据的显示显得非常简单:HTML文件:div id=grid/divJS文件:var grid = new Ext.grid.GridPanel({??? el: grid,??? ds: ds,??? cm: cm});grid.render();
其显示结果为:
2.如何在表格中添加CheckBox呢?
var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel([??? new Ext.grid.RowNumberer(),//自动行号??? sm,//添加的地方??? {header:编号,dataIndex:id},??? {header:性别,dataIndex:sex},??? {header:名称,dataIndex:name},??? {header:描述,dataIndex:descn}]);
var grid = new Ext.grid.Gri
文档评论(0)