原文：http://docs.sencha.com/ext-js/4-0/#!/guide/grid

翻译：frank/sp42 转载请保留本页信息

Grids

Grid 面板为 Ext JS 的大头核心之一。它是一个通用性很强的组件，提供了一个简单的方式来显示、排序（sort）、分组（group）和编辑（edit）数据。

The Grid Panel is one of the centerpieces of Ext JS. It's an incredibly versatile component that provides an easy way to display, sort, group, and edit data.

基本Grid面板 Basic Grid Panel

让我们开始创建一个基本的 Grid 面板。通过这个例子你可以学习到创建 Grid 的基本方法并让 Grid 顺利地跑起来。

Let's get started by creating a basic Grid Panel . Here's all you need to know to get a simple grid up and running:

模型对象 Model 和 Store 存储对象 Model and Store

一个 Grid 面板可以说仅仅是一个组件，它会把 Store 中的数据显示出来。Store 可以被看作是一记录集合，或模型的实例。欲了解更多 Store 和模型的信息，建议参阅该文。这种设计的好处是“各司其职（separation of concerns）”，并且十分清晰。Grid 面板只关注如何显示的数据，而 Store 则透过用其代理（Proxy）执行数据的获取和保存。

A Grid Panel is simply a component that displays data contained in a Store. A Store can be thought of as a collection of records, or Model instances. For more information on Stores and Models see the Data guide. The benefit of this setup is clear separation of concerns. TheGrid Panel is only concerned with displaying the data, while the Store takes care of fetching and saving the data using its Proxy.

首先，我们需要定义一个模型。模型只是一种集合，表示一个数据类型的字段。让我们定义一个模型，它代表着“用户User”：

First we need to define a Model. A Model is just a collection of fields that represents a type of data. Let's define a model that represents a "User":

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

接下来，我们创建一个包含多个用户 User 的 Store对象。Next let's create a Store that contains several User instances.

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    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' }
    ]
});

为了简单起见，我们直接写出 Store 其具体数据。而在真实的应用程序中，您通常会配置代理对象 Proxy，透过 Proxy 从服务器加载数据回来。更多请参阅使用 Proxy 的数据指导。

For sake of ease we configured the Store to load its data inline. In a real world application you'll usually configure theStore to use aProxy to load data from the server. See the Data guide for more on using Proxies.

Grid Panel

当前我们有一 Model，Model 定义了我们的数据结构，然后将这几个 Model 实例添加到 Store，接着就可以使用 Grid 面板显示数据：

Now that we have a Model which defines our data structure, and we've loaded several Model instances into a Store, we're ready to display the data using a Grid Panel:

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

相当简单，是吧！我们刚刚创建的一个 Grid 面板，以 body 元素为容器，然后我们告诉它从我们前面创建的 userStore 中取出其数据。最后，我们不但定义了 Grid 面板将有哪些列，而且通过 dataIndex 属性来配置每列从用户领域模型中得到的数据。列“Name”指定其宽度为固定的 100px，把排序和隐藏列都禁用；列“email”默认是隐藏的（可通过其他列上面的菜单打开显示该列）；列“Phone Number”配置了 flex 为 1，表示其宽度自适应 Grid 面板宽度，即除总宽度后剩下的宽度。要查看实例，请访问“简单的Grid示例”。

And that's all there is to it. We just created a Grid Panel that renders itself to the body element, and we told it to get its data from theuserStoreStore that we created earlier. Finally we defined what columns the Grid Panel will have, and we used the dataIndex property to configure which field in theUserModel each column will get its data from. The Name column has a fixed width of 100px and has sorting and hiding disabled, theEmail Address column is hidden by default (it can be shown again by using the menu on any other column), and thePhone Number column flexes to fit the remainder of the Grid Panel's total width. To view this example live, see the Simple Grid Example.

渲染器 Renderers

您可以通过列的 renderer 配置项来改变数据的现实方式。渲染器本身是一个函数，根据传入的原始值来进行修改，返回的那个值就是现实的值。最常见的一些渲染器都包含在 Ext.util.Format，当然你可以自定义渲染器：

You can use the rendererproperty of the column config to change the way data is displayed. Arenderer is a function that modifies the underlying value and returns anew value to be displayed. Some of the most common renderers areincluded inExt.util.Format, but you can write your own as well:

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        // 籍此Ext.util.Format 函数的渲染器 format the date using a renderer from the Ext.util.Format class
        renderer: Ext.util.Format.dateRenderer('m/d/Y')
    },
    {
        text: 'Email Address',
        dataIndex: 'email',
        // 邮件地址就是使用了自定义的渲染器format the email address using a custom renderer
        renderer: function(value) {
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
        }
    }
]

See the Renderers Example for a live demo that uses custom renderers.

分组 Grouping

把 Grid 里面的行进行分组很容易，首先要在 Store 身上指定 groupField 属性：

Organizing the rows in a Grid Panel into groups is easy, first we specify a groupField property on our store:

Ext.create('Ext.data.Store', {
    model: 'Employee',
    data: ...,
    groupField: 'department'
});

更多 Store 的分组请参阅数据指导。接下来，我们将配置 Grid 的 Feature 配置项以便进行行分组：

For more on gouping in Stores please refer to the Data guide. Next we configure a grid with a grouping Feature that will handle displaying the rows in groups:

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

可参考一下 Grouping Grid Panel 在线例子。

See Grouping Grid Panel for a live example.