0

ExtJS 4中表格、树具有共同的基类：Ext.panel.Table。ExtJS 4为表格引入了无限滚动的特性：仅渲染需要使用的特性，而不是像ExtJS 3一样把所有结构都渲染出来。

Grid的两大要素是Store和Columns，前者提供数据来源，后者定义表格包含哪些列。下面是一个简单表格的例子：

Ext.create( 'Ext.grid.Panel', {
    store : Ext.create( 'Ext.data.ArrayStore', {
        fields : [ //匿名模型声明
            {
                name : 'book'
            }, {
                name : 'author'
            }
        ],
        data : [
            [
                'C++Primer第四版', 'Stanley B.Lippman'
            ]
        ]
    } ),
    columns : [
        {
            text : 'Book',
            flex : 1,
            sortable : false,
            dataIndex : 'book'
        }, {
            text : 'Author',
            width : 100,
            sortable : true,
            dataIndex : 'author'
        }
    ],
    height : 80,
    width : 300,
    title : 'Books',
    renderTo : Ext.getBody()
} );

ExtJS 4把所有类型的列统一组织到Ext.grid.column包中。下面的例子包含各类型的列的使用方式：

//定义一个模型
Ext.define( 'Book', {
    extend : 'Ext.data.Model',
    fields : [
        {
            name : 'book'
        }, {
            name : 'topic',
            type : 'string'
        }, {
            name : 'version',
            type : 'string'
        }, {
            name : 'released',
            type : 'boolean'
        }, {
            name : 'releasedDate',
            type : 'date'
        }, {
            name : 'value',
            type : 'number'
        }
    ]
} );
//定义一个存储
var store = Ext.create( 'Ext.data.ArrayStore', {
    model : 'Book',
    data : [
        [
            'Boost程序库完全开发指南', 'Boost', '1', false, null, 52.00
        ], [
            'C++ 程序设计(第二版)', 'C++', '2.0', true, '2010/10/03', 44.30
        ], [
            'Head First Python', 'Python', '5', true, '2011/12/05', 63.50
        ], [
            'JavaScript权威指南（第六版）', 'JavaScript', '6.0', true, '2013/11/01', 90.00
        ]
    ]
} );
//声明一个表格
Ext.create( 'Ext.grid.Panel', {
    store : store,
    width : 550,
    title : 'Programming Books',
    renderTo : 'grid-example',
    //第一个列，被声明为选择模型。在ExtJS 3中为sm。显示一个复选框。
    selModel : Ext.create( 'Ext.selection.CheckboxModel' ), //1
    columns : [
        //自动添加的行号列
        Ext.create( 'Ext.grid.RowNumberer' ),
        //不指定列类型，将直接把数据作为字符串显示
        {
            text : 'Book',
            flex : 1,
            dataIndex : 'book'
        },
        //模板列，使用指定的模板来生成列的内容
        {
            text : 'Category',
            xtype : 'templatecolumn',
            width : 100,
            tpl : '{topic} {version}' //XTemplate
        },
        //布尔列，默认显示true或者false
        {
            text : 'Already Released?',
            xtype : 'booleancolumn',
            width : 100,
            dataIndex : 'released',
            trueText : 'Yes', //自定义显示文本
            falseText : 'No'
        },
        //日期列
        {
            text : 'Released Date',
            xtype : 'datecolumn',
            width : 100,
            dataIndex : 'releasedDate',
            format : 'm-Y' //遵循PHP日期格式
        },
        //数字列
        {
            text : 'Price',
            xtype : 'numbercolumn',
            width : 80,
            dataIndex : 'value',
            renderer : Ext.util.Format.usMoney //可以指定用作渲染器的转换函数
        },
        //动作列，可以包含若干图标
        {
            xtype : 'actioncolumn',
            width : 50,
            items : [
                {
                    icon : 'images/edit.png', //图标文件
                    tooltip : 'Edit',
                    handler : function( grid, rowIndex, colIndex )
                    {
                        //传入参数分别为表格、行索引、列索引
                    }
                }, {
                    icon : 'images/delete.gif',
                    tooltip : 'Delete',
                    handler : function( grid, rowIndex, colIndex )
                    {
                    }
                }
            ]
        }
    ]
} );

如果需要为Grid添加一项新功能，通常有两种选择：创建一个插件（Plugin），或者继承GridPanel类。ExtJS 4引入Ext.grid.feature.Feature类，提供了一些基础函数、属性，便于自定义插件的创建。在Ext.grid.feature包中，包含了AbstractSummary、Chunking、Feature、Grouping、GroupingSummary、RowBody、Summary等七个类与这种插件机制有关。如果想使用某个特性，只需要为Grid添加一个配置项：

features : [
    {
        groupHeaderTpl : 'Publisher: {name}',
        ftype : 'groupingsummary'  //feature type
    }
]

ExtJS 4中，分组变成了一种特性，可以通过添加features属性使用分组：

Ext.define( 'Book', {
    extend : 'Ext.data.Model',
    fields : [
        'name', 'topic'
    ]
} );
var Books = Ext.create( 'Ext.data.Store', {
    model : 'Book',
    groupField : 'topic', //分组所依据的列
    data : [
        {
            name : 'Learning Ext JS',
            topic : 'Ext JS'
        }, {
            name : 'Learning Ext JS 3.2',
            topic : 'Ext JS'
        }, {
            name : 'Ext JS 3.0 Cookbook',
            topic : 'Ext JS'
        }, {
            name : 'Expert PHP 5 Tools',
            topic : 'PHP'
        }, {
            name : 'NetBeans IDE 7 Cookbook',
            topic : 'Java'
        }, {
            name : 'iReport 3.7',
            topic : 'Java'
        }, {
            name : 'Python Multimedia',
            topic : 'Python'
        }, {
            name : 'NHibernate 3.0 Cookbook',
            topic : '.NET'
        }, {
            name : 'ASP.NET MVC 2 Cookbook',
            topic : '.NET'
        }
    ]
} );
Ext.create( 'Ext.grid.Panel', {
    renderTo : Ext.getBody(),
    frame : true,
    store : Books,
    width : 350,
    height : 400,
    title : 'Books',
    features : [
        //添加分组特性。在ExtJS 3中需要配置 view: new Ext.grid.GroupingView()
        Ext.create( 'Ext.grid.feature.Grouping', {
            groupHeaderTpl : 'topic: {name} ({rows.length} Book{[values.rows.length > 1 ? "s" : ""]})'
        } )
    ],
    columns : [
        {
            text : 'Name',
            flex : 1,
            dataIndex : 'name'
        }, {
            text : 'Topic',
            flex : 1,
            dataIndex : 'topic'
        }
    ]
} );

 运行结果如下图：

与Grouping类似，在每个分组的尾部添加一个summary row：

Ext.create( 'Ext.grid.Panel', {
    renderTo : Ext.getBody(),
    frame : true,
    store : Books,
    width : 350,
    height : 400,
    title : 'Books',
    features : [
        {
            groupHeaderTpl : 'Topic: {name}',
            ftype : 'groupingsummary'
        }
    ],
    columns : [
        {
            text : 'Name',
            flex : 1,
            dataIndex : 'name',
            summaryType : 'count', //还支持sum, min, max, average
            summaryRenderer : function( value )
            {
                return Ext.String.format( '{0} book{1}', value, value !== 1 ? 's' : '' );
            }
        }, {
            text : 'Topic',
            flex : 1,
            dataIndex : 'topic'
        }
    ]
} );

在每个分组的尾部添加一个summary row，用于与上面的GroupingSummary类似。

rowbody特性可以在每一行之后添加一行（tr-td-div），可以显示额外的信息：

Ext.create( 'Ext.grid.Panel', {
    renderTo : Ext.getBody(),
    frame : true,
    store : Books,
    width : 350,
    height : 300,
    title : 'Books',
    features : [
        {
            ftype : 'rowbody',
            getAdditionalData : function( data, idx, record, orig )
            {
                return {
                    rowBody : Ext.String.format( '

', data.topic )
                };
            }
        }, {
            ftype : 'rowwrap'
        }
    ],
    columns : [
        {
            text : 'Name',
            flex : 1,
            dataIndex : 'name'
        }
    ]
} );

Ext.grid.plugin包提供了若干插件，例如：Editing、CellEditing、RowEditing、HeaderResizing、DragDrop。 Ext.grid.plugin.Editing提供了用于编辑表格的通用方法、属性，包括CellEditing、RowEditing两个子类。

该插件支持编辑某个特定单元格中的数据，点击单元格可以激活编辑器。下面是一个例子：

Ext.define( 'Contact', {
    extend : 'Ext.data.Model',
    fields : [
        'name', 'email', 'phone'
    ]
} );
var Contacts = Ext.create( 'Ext.data.Store', {
    model : 'Contact',
    data : [
        {
            name : 'Loiane',
            email : 'me@loiane.com',
            phone : '1234-5678'
        }, {
            name : 'Peter',
            email : 'peter@email.com',
            phone : '2222-2222'
        }, {
            name : 'Ane',
            email : 'ane@email.com',
            phone : '3333-3333'
        }, {
            name : 'Harry',
            email : 'harry@email.com',
            phone : '4444-4444'
        }, {
            name : 'Camile',
            email : 'camile@email.com',
            phone : '5555-5555'
        }
    ]
} );
Ext.create( 'Ext.grid.Panel', {
    renderTo : Ext.getBody(),
    frame : true,
    store : Contacts,
    width : 350,
    title : 'Contacts',
    //选择模型，默认是rowModel，即点击后选中整个行。这里点击后选中被点击单元格
    selType : 'cellmodel',
    columns : [
        {
            text : 'Name',
            flex : 1,
            dataIndex : 'name'
        }, {
            text : 'Email',
            flex : 1,
            dataIndex : 'email',
            //对于支持编辑的列，需要指定Ext.form.field.Field类型的editor属性
            editor : {
                xtype : 'textfield',
                allowBlank : false
            }
        }, {
            text : 'Phone',
            flex : 1,
            dataIndex : 'phone',
            editor : {
                xtype : 'textfield',
                allowBlank : false
            }
        }
    ],
    plugins : [
        //插件声明：单元格编辑
        Ext.create( 'Ext.grid.plugin.CellEditing', {
            clicksToEdit : 1
        } )
    ]
} );

用法与单元格编辑类似：

Ext.create( 'Ext.grid.Panel', {
    renderTo : Ext.getBody(),
    frame : true,
    store : Contacts,
    width : 350,
    title : 'Contacts',
    selType : 'rowmodel',
    columns : [
        {
            text : 'Name',
            flex : 1,
            dataIndex : 'name'
        }, {
            text : 'Email',
            flex : 1,
            dataIndex : 'email',
            editor : {
                xtype : 'textfield',
                allowBlank : false
            }
        }, {
            text : 'Phone',
            flex : 1,
            dataIndex : 'phone',
            editor : {
                xtype : 'textfield',
                allowBlank : false
            }
        }
    ],
    plugins : [
        Ext.create( 'Ext.grid.plugin.RowEditing', {
            clicksToEdit : 1
        } )
    ]
} );

ExtJS 4为表格引入了无限滚动（infinite scrolling）特性，可以在不使用分页的情况下显示数以千计的行。下面是一个例子：

Ext.define( 'Book', {
    extend : 'Ext.data.Model',
    fields : [
        {
            name : 'book'
        }, {
            name : 'pages',
            type : 'int'
        }
    ]
} );
var store = Ext.create( 'Ext.data.Store', {
    id : 'store',
    pageSize : 50, //每次缓存数据的条数
    buffered : true,//用于缓冲、预读取数据
    purgePageCount : 0, //在使用LRU算法清理缓存时，最多缓存的额外页数。设置为0永不清理缓存的数据
    model : 'Book',
    proxy : {
        type : 'ajax',
        url : 'data/infinite.json',
        reader : {
            type : 'json',
            root : 'data'
        }
    }
} );
store.guaranteeRange( 0, 49 ); //确保指定范围的数据被加载
var grid = Ext.create( 'Ext.grid.Panel', {
    width : 400,
    height : 500,
    store : store,
    verticalScrollerType : 'paginggridscroller',
    invalidateScrollerOnRefresh : false, //刷新视图时不更新滚动条
    disableSelection : true, //禁用选取
    columns : [
        {
            text : 'Book Name',
            flex : 1,
            sortable : true,
            dataIndex : 'book'
        }, {
            text : 'Pages',
            width : 125,
            sortable : true,
            dataIndex : 'pages'
        }
    ],
    renderTo : Ext.getBody()
} );