04_展示数据

展示数据

数据驱动组件是Ext JS最强大的特性之一，比如grid组件。通过将组件与数据源连接，你可以创建随数据改变而改变的动态程序。

你可以用很多种方法为组件提供数据。其中一个简单的方法是直接使用内联数据。

Ext.Viewport.add({
    xtype: 'tabpanel',
    items: [{
        title: 'Employee Directory',
        xtype: 'grid',
        iconCls: 'x-fa fa-users',
        store: {
            data: [{
                "firstName": "Jean",
                "lastName": "Grey",
                "officeLocation": "Lawrence, KS",
                "phoneNumber": "(372) 792-6728"
            }, {
                "firstName": "Phillip",
                "lastName": "Fry",
                "officeLocation": "Lawrence, KS",
                "phoneNumber": "(318) 224-8644"
            }, {
                "firstName": "Peter",
                "lastName": "Quill",
                "officeLocation": "Redwood City, CA",
                "phoneNumber": "(718) 480-8560"
            }]
        },
        columns: [{
            text: 'First Name',
            dataIndex: 'firstName',
            flex: 1
        }, {
            text: 'Last Name',
            dataIndex: 'lastName',
            flex: 1
        }, {
            text: 'Phone Number',
            dataIndex: 'phoneNumber',
            flex: 1
        }]
    }, {
        title: 'About Sencha',
        iconCls: 'x-fa fa-info-circle'
    }]
});

你可以在上面的例子中看到，我们添加了一个grid组件作为第一个标签。Ext JS grid是一个功能强大的组件，创建它却仅需要少量的几行代码。该组件将数据转换为包含行和列的表格，这些行跟列内置了排序，和一组即插即用的功能组件，比如分组，过滤等等。

 

仓储室（Stores）

你或许已经注意到，我们的表格增加了一个新的配置项-‘store’。Ext JS的仓储室是用来存放你所有数据记录的仓库。仓储室是数据处理的强有力的工具。使用它们可以很容易地对存放在仓储室中的数据进行排序，过滤和查询。

多数情况下，你的仓储室里的数据是来自外部的。比如数据库或者是REST接口。然后，为了便于演示，我们在数据仓储室的数据配置项上，为其添加硬编码数据记录。

提示：你可以选择各种仓储室。这些仓储室允许你根据你的需求，使用不现类型的格式化数据。

记录（Records）

记录是由字段组成的单独的实体，很像在数据库中的表的构建。记录可以包含很多列，每列可以转化为不同的数据类型（整型，浮点型，字符串型等）。然而，默认情况下，Ext JS一般会将列转换为合适的类型。

 

字段（Fields）

在这个示例中，我们的记录包含了四个字段。他们是：

l  firstName

l  lastName

l  phoneNumber

l  officeLocation

在我们的表格中，我们有三个列配置有数据索引（dataIndex）。数据索引指示该列在列中显示哪个数据字段的值。

下一步

既然我们已经学习过数据，让我们继续当我们轻击或点击表格中的列，事件作出的反应吧。

 

深入研究

更多关于数据的信息，请查阅我们的数据概览章节（http://docs.sencha.com/extjs/6.2.1/guides/core_concepts/data_package.html）。