ExtJS表格

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'
         });
     });