ExtJS 4学习之GridPanel

英文原文 The Grid Component

1 最简单的Grid Panel

Grid Panel是ExtJS的核心部分之一，通过Grid Panel可以对数据显示、排序、分组和编辑。Model和Store是Grid Panel处理数据的核心，每个Grid Panel都必须设置Model和Store。要创建Grid Panel，首先要定义Model，Model包括了Grid Panel所有需要显示的字段，相当于数据库中表字段的集合。Store可以看作是一行数据的集合或者是Model的实例集合，每个Store都包含一个或多个Model实例，Grid Panel显示的数据都存储在Store里面。Grid Panel通过Store获取数据并显示，Store则通过Proxy对数据进行读取和保存。

下面创建一个Grid Panel用来显示用户的基本信息，包括用户名、邮箱、手机号(name、email、phone)，首先创建用户模型(User Model)。

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email', 'phone' ]
});

接下来创建Store，Store是User的集合，包括多个User实例。

var userStore = Ext.create('Ext.data.Store', {
    model: 'User', //刚才创建的User Model
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Model和Store都创建好之后，就可以创建Grid Panel了。

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: userStore, //绑定上面创建的Store
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name' //Grid Panel中显示的字段，必须要和User Model中的字段一致
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

最后创建的用户Grid Panel如图所示。

2 Grid Panel数据分组（Grouping）

只要在Store中设置groupField属性，就可以对Grid Panel显示的数据进行分组。假设公司有很多员工，需要对公司的员工在Grid Panel中按部门进行分组显示。首先在Store中设置groupField属性为department。

Ext.create('Ext.data.Store', {
    model: 'Employee',
    data: ...,
    groupField: 'department' //设置数据按照department分组
});

然后在Grid Panel中添加grouping Feature，实现分组显示效果。

Ext.create('Ext.grid.Panel', {
    ...
    features: [{ ftype: 'grouping' }]
});

分组显示效果如下图所示， 点击这里查看官方分组显示代码。

3 Grid Panel分页显示

当数据比较多一页显示不完的时候，就需要对数据进行分页显示。Grid Panel可以通过Paging Toolbar和Paging Scroller两种方式实现分页显示显示，Paging Toolbar有上一页/下一页按钮，Paging Scroller是当Grid Panel滚动显示到底部的时候动态加载数据。

要实现分页显示，首先要设置Store支持分页，在Store中设置pageSize，pageSize默认是25。在reader中设置数据总数量totalProperty，分页插件根据pageSize和totalProperty进行分页。下面的代码pageSize设置为4，totalProperty则从返回的json数据中total属性获取。

Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 4, //设置每页显示的数据数量
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users', //指定从json的哪个属性获取数据，如果不指定，则从json的跟属性获取
            totalProperty: 'total' //总数据数量
        }
    }
});

假设json数据格式如下

{
    "success": true,
    "total": 12,
    "users": [
        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
    ]
}

Store的分页已经设置完毕，下面在Grid Panel中实现Paging Toolbar分页功能。

Ext.create('Ext.grid.Panel', {
    store: userStore,
    columns: ...,
    dockedItems: [{
        xtype: 'pagingtoolbar', //在Grid Panel中添加paging toolbar
        store: userStore, //把paging toolbar的Store设置成和Grid Panel的Store一样
        dock: 'bottom',
        displayInfo: true
    }]
});

Paging Toolbar的分页效果如下图所示，点击这里查看官方Paging Toolbar分页功能代码。

Paging Scroller的分页实现比较简单，只要在Grid Panel中设置如下代码即可，点击这里查看官方Paging Scroller分页功能代码。

Ext.create('Ext.grid.Panel', {
    //使用Paging Scroller分页插件
    verticalScroller: 'paginggridscroller',
    // do not reset the scrollbar when the view refreshs
    invalidateScrollerOnRefresh: false,
    // infinite scrolling does not support selection
    disableSelection: true,
    // ...
});

4 Grid Panel添加Checkbox

只要设置Grid Panel的selModel属性为Ext.selection.CheckboxModel，点击这里查看官方代码实例。

Ext.create('Ext.grid.Panel', {
    selModel: Ext.create('Ext.selection.CheckboxModel'), //设置Grid Panel的选择模式为Checkbox
    store: userStore,
    columns: ...
});