表格GridPanel

1、表格GridPanel概述

      ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。

　　表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

2、表格应用示例

我们首先来看最简单的使用表格的代码：

        <script type="text/javascript">
        Ext.onReady(function(){
           var data=[ 
              [1, 'EasyJWeb', 'EasyJF','www.EasyJF.com'],
              [2, 'jfox', 'huihoo','www.huihoo.org'], 
              [3, 'jdon', 'jdon','www.jdon.com'],
              [4, 'springside', 'springside','www.springside.org.cn'] 
           ];
           
           var store=new  Ext.data.SimpleStore({
              data: data,
              fields: ["id","name","organization","homepage"]
           });
           
           var grid = new Ext.grid.GridPanel({
              renderTo: Ext.getBody(),
              title:"中国Java社区",
              height:200,
              400,
              columns:[
                 {header:"编号", dataIndex:"id"},
                 {header:"项目名称", dataIndex:"name"},
                  {header:"开发团队", dataIndex:"organization"},
                 {header:"网址", dataIndex:"homepage"}
              ],
              store:store,
              autoExpandColumn: 2
           });
        });
        </script>

运行结果如下：

3、定制表格显示内容

调整column中的renderer，显示丰富多彩的内容。

4、EditorGridPanel

可编辑的表格，用于实现在线编辑表格；在column中，通过指定一个editor，也就是Field的实例来实现表格编辑功能。

5、PropertyGrid

属性编辑表格，只有固定的两列，一列表示属性名称，另外一列表示属性值。示例：

        <script type="text/javascript">
        Ext.onReady(function(){
           var grid = new Ext.grid.PropertyGrid({
              title: 'Properties Grid',
              autoHeight: true,
               300,
              //autoWidth: true,
              renderTo: Ext.getBody(),
              source: {
                 "(name)": "My Object",
                 "Created": new Date(Date.parse('10/15/2006')),
                 "Available": false,
                 "Version": .01,
                 "Description": "A test object"
              }
           });
        });
        </script>

运行结果如下：