1.?简单表格控件??（由类Ext.grid.GridPanel来定义)
2.?可编辑表格控件（由类Ext.grid.EditorGridPanel定义)
3.?属性表格控件???(由类Ext.grid.PropertyGrid定义)
4.?分组表格控件???(由类Ext.grid.Group定义)
基本介绍
???表格由类Ext.grid.GridPanel定义,继承于Ext.Panel,其xtype为grid，在Ext中?表格控件必须包含列定义信息，并指定表格的数据存取器。表格的
列由Ext.grid.ColumnModel定义,数据存取器由Ext.data.Store定义。根据解析数据的不同，数据存取器可分为JsonStore、SimpleStore、GroupingStore等。
Ext表格包含的功能
1.?选择一条记录、选择多条记录、突出显示选中行
2.?调整列宽、列排序、显示行号、支持复选框、设置查看某些列
3.?支持本地分页和远程分页
4.?可编辑表格、添加新行、删除一行或多行。
5.?数据校验
6.?拖放改变表格大小、拖放一行或多行、树形和表格之间进行数据拖放。
定义列信息
???表格是二维的，列由Ext.grid.ColumnModel类定义,?简称cm,它是整个表格的列模型，其由columns配置属性来描述，columns是一个数组，每一行数据
元素描述表格的一列信息，包含的信息如下：
header：?列标题
dataIndex:?列对应的记录集字段
sortable：?列是否可排序
renderer：?列的渲染函数
width：????列宽度
format：???格式化信息
如：
??var?cm?=?new?Ext.grid.ColumnModel([
????????{?header:?'编号',?dataIndex:?'id'?},
????????{?header:?'名称',?dataIndex:?'name'?},
????????{?header:?'描述',?dataIndex:?'descn'?},
????]);
定义数据
表结构确定后，就可以定义数据,如下：?
var?data?=[[1,2,3],[4,5,6],[7,8,9]]??--使用二维数组定义数据
定义数据存储对象
??数据存储对象由Ext.data.Store类来定义，数据存储对象负责把各种各样的原始数据(如二维数组、JSON对象数组、XML文本等)等转换成表格可以识别的
Ext.data.Record类型的对象，这样就可以把任何格式的数据转换成表格可以使用的形式。
Store对应二个部分：?proxy和reader。
proxy：?获取数据的方式，?Ext.data.MemoryProxy,它是专门用来解析JavaScript变量的。在定义时只需要把data作为参数传递进去即可。
reader:?如何解析数据，Ext.data.ArrayReader专门用来解析数组，主要是设置如何使数据和列对应。主要由name和mapping指定，name对应列的dataIndex。
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????mapping对应列的索引
最后需要执行store.load()?来初始化数组。
下面是一个完整的示例：
?Ext.onReady(function()?{
????????--定义列信息
????????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',?'name5',?'descn5']
????????];
????????--定义数据存储对象
????????var?store?=?new?Ext.data.Store({
????????????proxy:?new?Ext.data.MemoryProxy(data),??--从内存获取数据
????????????reader:?new?Ext.data.ArrayReader({},?[??--使用数组解析器解析数组
????????????????{?name:?'id',mapping:1?},
????????????????{?name:?'name',mapping:0?},
????????????????{?name:?'descn'?}
????????????])
????????});
????????--初始化数据
????????store.load();??
????????--装配数据
????????var?grid?=?new?Ext.grid.GridPanel({
??????????????autoHeight:?true,
??????????????renderTo:?'grid',
??????????????store:?store,
??????????????cm:?cm
????????????});
????});
?
?
一、?取消列拖动，取消列调整大小，行的斑马线效果
????默认的表格展现在我们面前的时候，列的顺序可以随意移动，也可以随意调整列宽，如何禁用了？
????enableColumnMove：??false
????enableColumnResize：?false
????stripeRows：true
例如：
????var?grid?=?new?Ext.grid.GridPanel({
?????????????cm:?cm,????????????--设置列定义
?????????????store:?store,??????--设置数据存取对象
?????????????autoHeight:?true,??--自动适应行高
?????????????stripeRows:true,???--显示斑马线效果
?????????????renderTo:?'grid'???--渲染表格到div等于grid的容器中
????});
?
二、设置表格读取数据时的遮罩效果
????loadMask：true???--这样表格在store.load()完成之前一直显示?"loading..."?本地数据由于过快?可能看不到这一效果。
三、?自主决定每列的列宽,列标题的对齐方式
???默认情况下，Ext的表格宽度为100px，可以通过列定义时修改这一值。
????var?cm?=?new?Ext.grid.ColumnModel([
?????????{?header:?'编号',?dataIndex:?'id'????,width:200，align:'center'?},??--注意像素不加px
?????????{?header:?'姓名',?dataIndex:?'name'??,widht:300,?align:'right'},
?????????{?header:?'描述',?dataIndex:?'descn'?,widht:150,?align:'left'?}
????]);
???上面的示例还是需要我们自己计算列的宽度，Ext提供了另外一个表格属性来实现列自动填满表格的设置，相当于WinForm中的Fill属性。
????var?grid?=?new?Ext.grid.GridPanel({
?????????????cm:?cm,
?????????????store:?store,
?????????????viewConfig:{?forceFit:true},???--视图层重新计算所有列宽后填充表格。
?????????????renderTo:?'grid'
??????});
???还可以指定某列宽度自动延伸，这个时候需要给列设置一个id
如：var?cm?=?new?Ext.grid.ColumnModel([{id:'descn',header:'描述',dataIndex:'descn'}]);
????var?grid?=?new?Ext.grid.GridPanel({
??????autoExpandColumn:'descn',
??????cm:cm,
??????store:store,
??????renderTo:'grid'
????})
四、?列排序
???Ext的列默认是不排序的。?如果需要添加列排序功能，需要在定义列模型时增加sortable属性。如：
???var?cm?=?new?Ext.grid.ColumnModel([
??????{?header:'编号'，dataIndex:'id',sortable:true?}
???]);
???在显示时强制按某列排序,需要通过sortInfo属性来为Ext.data.Store设置一个默认的排序方式。如：
???var?store?=?new?Ext.data.Store({
??????proxy:new?Ext.data.MemoryProxy(data);
??????reader:new?Ext.data.ArrayReader({},[
????????{?name:'id'??,mapping:0},
????????{?name:'name',mapping:1},
????????{?name:'desc',mapping:2}
??????]),
?????sortInfo:{field:'name',direction:'ASC'}??--field:表示排序的列名，?direction：代表排序的方式，ASC升序?DESC降序。
???});
???对中文列排序的支持,?Ext默认使用的ASCII码进行排序的，而我们却按拼音顺序排序，所以对中文的排序效果存在问题，所以需要重写
Ext的applySort函数，如：
Ext.data.Store.prototype.applySort?=?funciont(){
???if(this.sortInfo?&&?this.remoteSort){
??????var?s?=?this.sortInfo;??????????????????--获取排序列JSON对象
??????var?f?=?s.field;????????????????????????--获取排序列的字段
??????var?st?=?this.fields.get(f).sortType;???--获取排序字段的排序函数
??????var?fn?=?function(r1,r2){
??????????var?v1?=st(r1.data[f]);
??????????var?v2?=st(r2.data[f]);
??????????if(typeof(v1)?=='string'){
????????????return?v1.localCompare(v1);
?????????}
????????return?v1?>?v1???1:?(v1?<?v2???-1:?0);
??????};
??????this.data.sort(s.direction,fn);
??????if(this.snapshot?&&?this.snapshot?!=?this.data){
?????????this.snapshot.sort(s.direction,fn);
??????}
???}
};
把上面的函数放到Ext文件的最底端就可以很好的解决Ext中文排序不支持拼音排序的问题。
五、显示日期类型的数据
???JSON返回的数据只能是数字和字符串，如何把某一个字符串解析成日期格式了，看下面的例子。
????var?cm?=?new?Ext.grid.ColumnModel([
?????????{?header:?'编号',?dataIndex:?'id'},
?????????{?header:?'姓名',?dataIndex:?'name'},
?????????{?header:?'描述',?dataIndex:?'descn'?},
?????????{?header:?'日期',?dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}??--?日期列现实的格式:Y-m-d?2010-10-08
????]);
???--?renderer：?用于格式化日期格式的数据
??????var?data?=?[
???????[1,?'小宝',?'descn1',?'2010-08-01?18:23:54'],
???????[2,?'小马',?'descn2',?'2010-08-01?18:21:54'],
???????[3,?'小强',?'descn3',?'2010-08-01?18:22:54'],
???????[4,?'小李',?'descn4',?'2010-08-01?18:20:54'],
???????[5,?'小张',?'descn5',?'2010-08-01?18:24:54']
?????];
?????var?store?=?new?Ext.data.Store({
?????????proxy:?new?Ext.data.MemoryProxy(data),
?????????reader:?new?Ext.data.ArrayReader({},?[
??????????????????{?name:?'id'?},
??????????????????{?name:?'name'?},
??????????????????{?name:?'descn'?},
??????????????????{?name:?'date',?type:?'date',?dateFormat:?'Y-m-d?h:i:s'?}?--?与data的日期格式对应
???????????????])
?????});
????--?type：属性会告诉render在解析的原始数据的时候把对应的列作为日期类型处理。
????--?dateFormat：属性把得到的字符串转换成相应的日期格式。
?????store.load();
?????Ext.onReady(function()?{
?????????var?grid?=?new?Ext.grid.GridPanel({
?????????????cm:?cm,
?????????????store:?store,
?????????????stripeRows:?true,
?????????????height:?300,
?????????????renderTo:?'grid'
?????????});
?????});