一、Grid简介
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为Grid。在EXT中,表格控件Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义,而表格的数据存储器由Ext.data.Store定义。数据存储器根据解析的数据不同,可分为JsonStore、SimpleStore、GroupingStore等。
EXT的。表格模型控件都遵循MVC模型,Ext.data.Store可看做是Model模型,Ext.grid.GridPanel中设置的各种监听器可看做Controller控制器,Ext.grid.GridView对应的就是View视图(通常情况下,Ext.grid.GridPanel会自动生成对应的实例而不需要我们自行创建了)。EXT不能锁定列,EXT 1.x里支持锁定列,但是因为效率方面的问题,EXT 2.x里删除了这个功能。
二、制作一个简单的Grid
表格是二维的,和在数据库中新建表一样。要先设置表的列数、每列的名称和类型,以及如何显示,Grid的结构和数据库表的结构非常相似。
(1)创建列定义
var cm = new Ext.grid.ColumnModel(. . .)负责创建表格的列信息。表格的列由column配置属性来描述,简称cm。columns是一个数组,每一行数据元素描述表格的一列信息,表格的列信息包含首部显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sortable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等。
(2)添加数据
表格的结构确定后,就可以向里面添加数据了。var data = . . . 用来定义表格中要显示的数据。
为简便起见,把数据直接写到JavaScript里,如下面的代码所示(5条记录):
(3)创建数据存储对象(对原始数据进