Ext JS表格控件（四）

一、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）创建数据存储对象（对原始数据进