表格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
   
     ,
 width:
   
     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
   
     ,
 
   
     width: 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>
  
    

运行结果如下：