ext2.0框架的grid使用介绍

《ext2.0框架的grid使用介绍》由会员分享，可在线阅读，更多相关《ext2.0框架的grid使用介绍（18页珍藏版）》请在金锄头文库上搜索。

1、Ext2.0 框架的 Grid 使用介绍 Ext2.0 框架的 Grid 使用介绍 最近空闲时间在学习 Ext2.0 框架，只有一个字的感叹“强”，我从未想到 JS代码能够写出这么绚丽的 Web 页面出来，以前看到 YUI，惊若天人，如今看到 EXT2.0 的东西，更是感觉震撼。Ext2.0 是一个 JS 框架，它的 Grid 控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json 数据和 XML 数据，甚至包括我们自定义的数据类型。Ext 为我们提供了一个桥梁 Ext.data.Store，通过它我们可以把任何格式的数据转化成 grid 可以使用的形式，这样就不需要为每种数

2、据格式写一个 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 属性，即为每个列都

3、安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：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.MemoryPr

4、oxy(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 和 reader。proxy 告诉我们从哪里获得数据，reader 告诉我们如何解析这个数据。现在用的是 Ext.data.MemoryProxy，它将内存中的数据 data 作为参数传递。Ext.data.ArrayReader 专门用来解析数组，并且告诉我们它会按照定义的规范进

5、行解析，每行按顺序读取四个数据，第一个叫 id，第二个叫 sex，第三个叫 name，第四个 descn。这些是跟 cm 定义中的 dataIndex 对应的。这样 cm 就知道哪列应该显示那条数据了。mapping 属性用于标记 data 中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让 sex 的数据中 name 栏中出现，可以设置mapping 值。即 id 的 mapping 为 2,后者为 0。记得要执行一次 ds.load()，对数据进行初始化。数据的显示显得非常简单：HTML 文件：JS 文件：var grid = new Ext.grid.GridPanel(

6、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 = n

7、ew Ext.grid.GridPanel(el: grid3,ds: ds,cm: cm, sm: sm,/添加的地方title: HelloWorld);3. 如何做 Grid 上触发事件呢？下面是一个 cellclick 事件grid.addListener(cellclick, cellclick);function cellclick(grid, rowIndex, columnIndex, e) var record = grid.getStore().getAt(rowIndex); /Get the Recordvar fieldName = grid.getColumnMod

8、el().getDataIndex(columnIndex); /Get field namevar data = record.get(fieldName);Ext.MessageBox.alert(show,当前选中的数据是+data);4.如何做 Grid 中做出快捷菜单效果：grid.addListener(rowcontextmenu, rightClickFn);/右键菜单代码关键部分var rightClick = new Ext.menu.Menu(id:rightClickCont, /在 HTML 文件中必须有个 rightClickCont 的DIV 元素items: i

9、d: rMenu1,handler: rMenu1Fn,/点击后触发的事件text: 右键菜单 1,/id: rMenu2,/handler: rMenu2Fn,text: 右键菜单 2);function rightClickFn(grid,rowindex,e)e.preventDefault();rightClick.showAt(e.getXY();function rMenu1Fn()Ext.MessageBox.alert(right,rightClick);其 Grid 如下：5.如何将一列中的数据根据要求进行改变呢？比如说性别字段根据其 male 或 female 改变显示的颜

10、色，这种ColumnMode 中设计：var cm = new Ext.grid.ColumnModel(new Ext.grid.RowNumberer(),sm,header:编号,dataIndex:id,header:性别,dataIndex:sex,renderer:changeSex,header:名称,dataIndex:name,header:描述,dataIndex:descn);cm.defaultSortable = true;function changeSex(value)if (value = male) return 红男; else return 绿女;其它两种

11、数据的 Grid 显示是相同的，其不同之处在于数据获取的过程：6.Json 数据至于这种数据的类型请大家自己看 Ajax 的书籍：/JsonDatavar data = coders: id: 1, sex: male, name:McLaughlin, descn: brettnewI , id: 2, sex: male,name:Hunter, descn: , id: 3, sex: female,name:Harold, descn: , id: 4, sex: male,name:Harolds, descn: ,musicians: id: 1, name: Clapton

12、, descn: guitar , id: 2, name: Rachmaninoff, descn: piano /ds 使用的 MemoryProxy 对象和 JsonReader 对象var ds = new Ext.data.Store(proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.JsonReader(root: coders, name: id,name: sex,name: name,name: descn);ds.load();var grid = new Ext.grid.GridPanel(el: gr

13、id3,ds: ds,cm: cm,sm: sm,title: HelloWorld,autoHeight: true/一定要写，否则显示的数据会少一行);grid.render();7.使用 XML 数据：注意，读取 XML 数据必须在服务器上进行。XML 数据 test.xml 的内容：21maleTaylorCodervar ds3 = new Ext.data.Store(url: test.xml, /XML 数据reader: new Ext.data.XmlReader(record: item, /使用XmlReader 对象 name: id,name: sex,name:

14、name,name: descn);8.从服务器获取数据和数据翻页控件从一个服务器文件，如 ASP、JSP 或 Servlet 中获得数据二维Array、JSON 或 XML 数据，也可以被 Ext 读取，并被 Grid 显示：服务器文件 data.asp:limit + start - 1 thenjson =json + ,end ifnextjson = json +response.write(json)%我们可以看到，这个页面会根据传入的 start 和 limit 的不同，返回不同的数据，其实质是个分页的代码。下面是 start=0,limit=10 的 JSON 数据： totalProperty:100,root:id:0,name:name0,descn:descn0,id:1,name:name1,descn:descn1,id:2,name:name2,descn:descn2,id:3,name:name3,descn:descn3,id:4,name:name4,descn:descn4