ext2.0基础知识详解

《ext2.0基础知识详解》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Ext2.0基础知识详解Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。首先，一个表格应该有列定义，即定义表头ColumnModel：//定义一个ColumnModel，表头中有四列varcm=newExt.grid.ColumnModel([    {header:'编号',dataIn

2、dex:'id'},    {header:'性别',dataIndex:'sex'},    {header:'名称',dataIndex:'name'},    {header:'描述',dataIndex:'descn'}]);cm.defaultSortable=true;   该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：{header:'编号',dataIndex:'id',Sortable:true},现在就来

3、看看这个Ext.data.Store是如何转换三种数据的。1.二维数组：//ArrayDatavardata=[    ['1','male','name1','descn1'],    ['2','male','name1','descn2'],    ['3','male','name3','descn3'],    ['4','male','name4','descn4'],    ['5','male','name5','descn5']];//ArrayReadervards=newExt.data.Store({    proxy:newExt.da

4、ta.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告诉我们如何解析这个数据。现在用的是Ext.data.MemoryPr

5、oxy，它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行按顺序读取四个数据，第一个叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。mapping属性用于标记data中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让sex的数据中name栏中出现，可以设置mapping值。即id的mapping为2,后者为0。记得要执行一次ds.load()，对数据进行初始化。数

6、据的显示显得非常简单：HTML文件：