一、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）创建数据存储对象（对原始数据进行转换）
var store = . . . 用来创建一个数据存储对象，这也是GridPanel必须配置的属性，数据存储对象store负责把各种各样的原始数据（如二维数组、JSON对象数组、XML文本等）转换成dExt.data.Record类型的对象。通过Ext.data.Store可以把任何格式的数据转化成Grid可以使用的格式，这样就不需要为每种数据格式写一个对应的实现。
store对应两个部分：proxy（指获取数据的方式）和reader（指如何解析这一堆数据）。其中Ext.data.MemoryProxy是专门用来解析JavaScrript变量的，在定义MemoryProxy对象时，只需要把定义的data作为参数传递进去即可；Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，定义3个名称（和cm里的dataIndex相对应）：id、name和descn。这样,cm就知道column是如何与store中的数据相对应的。注意，要执行一次store.load()，以对数据进行初始化。
（4）装配在一起
表格的列模型定义好了，原始数据和数据的转换也已经完成，剩下的只需要把它们装配在一起，到此Grid就创建成功了。
var grid = new Ext.grid.GridPanel({
renderTo：'grid',
store：store,
cm：cm
});
Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方，所以，在HTML里应该有一个
与之对应。》》》》》》》》》：例子：
》》》Ext.grid.GridPanel完整代码：
var cm = new Ext.grid.ColumnModel({
{header：’编号‘，dataIndex：‘id’}，
{header：‘编号’，dataIndex：‘name’}，
{header：‘描述’，dataIndex：‘descn’}
});
var data = [
[‘1’，‘name1’，‘descn1’]，
[‘2’，‘name2’，‘descn2’]，
[’3‘，‘name3’，‘descn3’]，
[‘4’，‘name4’，‘descn4’]，
[’5‘，‘nam5‘，’descn5‘]
];
var store = new Ext.data.Store({
proxy：new Ext.data.MemoryProxy（data），
reader：new Ext.data.ArrayReader（{},[
{name：’id‘}，
{name：’name‘}，
{name：’descn‘}
]）
});
store.load（）;
var grid = new Ext.grid.GridPanel（{
renderTo：’grid‘，
store：store，
cm：cm
}）；
三、Grid常用功能
》》》在GridPanel中的配置：
enableColumnMove：拖放列；
enableColumnResize：改变列的宽度；
stripeRows：斑马线效果；
loadMask：读取数据时的遮罩和提示功能；
》》》在ColumnModel中配置：
width：自定义每列的宽度；
sortable：让Grid支持按列排序；
renderer：Ext.util.Format.dataRenderer('Y年m月d日')；格式化日期格式的数据；
renderer：function(value){代码}；或者定义一个函数：function 函数名(value){代码}及renderer：函数名；在单元格里显示带颜色的字、图片和按钮；
new Ext.grid.RowNmberer()：自动显示行号；
》》》在Store中配置：
sortInfo：{field：“表格中的某一列”，direction：“ASC（升序）/DESC（降序）”}；
dataFormat：把得到的字符串转换为相应的日期格式（Y是年，m是月，d是日期，H是小时，i是分钟，s是秒）；
》》》复杂配置的功能如下：
复选框的配置：首先在ColumnModel外边创建一个CheckSelectionModel，然后在ColumnModel和GridPanel中进行对应；
行选择模型：new Ext.grid.RowSelectionModel({singleSelect:true}),在定义Ext.grid.GridPanel时，鼠标单击时按住Shift或Ctrl键就可以选择多行，如果只希望选择一行，需要设置singleSelect参数；
表格试图-Ext.grid.GridView：viewConfig中的会在GridView创建时作为初始化参数传递给GridView；
表格分页：EXT提供了 方便的集成分页工具条的方式； （bbar-下方的工具栏和tbar-上方的工具栏）；
通过后台脚本获得分页数据：写后台脚本，让EXT与后台进行数据交互；
前台排序：是指一次性从后台把所有数据都读取到客户端，然后由客户端自动判断每次显示多少条数据。这样分页时就不用再去后台读取数据了，这对于小数据量的分页是非常有利的。Ext里没有提供这样的功能，Grid仅仅是把得到的所有数据一次性显示到表格里，无论pagesize设置多少都不会起作用；在EXT2.0的examples/locale/目录下提供了一个PagingMemoryProxy.js的扩展。
后台排序：在默认情况下，Grid只能对当前页的数据进行排序，如果想要对所有数据进行排序，则需要把排序信息提交到后台，由后台将排序信息组装到SQL里，然后再由后台将处理好的数据返回给前台；
可编辑表格控件-EditorGrid：可以直接在表格里执行添加、删除、修改和查找等操作，然后一次性保存；
限制输入数据的类型：NumberField限制只能输入数字，ComboBox限制只能输入备选项，DateField是选择日期，Checkbox则是从true和false中选择其一，等等；
属性表格控件-PropertyGrid：扩展子EditorGridPanel，可以直接编辑右边的内容，注意：只有右边的，即使你单机左边的单元格，编辑器也只会出现在右边；
分组表格控件-Group：Ext.grid.GroupingGrid分组表格就是在普通表格的基础上，根据某一列的数据将表格中的数据分组显示的表格控件；
分组表格试图-Ext.grid.GroupingView：继承自Ext.grid.GridView，是分组表格的显示视图，实际应用中需要与Ext.data.GroupingStore配合使用；
可拖放的表格：拖放表格大小、表格之间的拖放、表格与树之间的拖放等；