ExtJS_4_官方指南翻译：Grid组件.docVIP

?ExtJS 4 官方指南翻译：Grid组件（上） 分类：?ExtJS 4.02011-10-18 16:41?501人阅读?评论(2)?收藏?举报 原文：/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. Its an incredibly versatile component that provides an easy way to display, sort, group, and edit data. 基本Grid面板 Basic Grid Panel 让我们开始创建一个基本的 Grid 面板。通过这个例子你可以学习到创建 Grid 的基本方法并让 Grid 顺利地跑起来。 Lets get started by creating a basic?Grid Panel?. Heres 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. The Grid 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. Lets define a model that represents a User: view plain Ext.define(User,?{?? ????extend:?Ext.data.Model,?? ????fields:?[?name,?email,?phone?]?? });?? 接下来，我们创建一个包含多个用户 User 的 Store对象。Next lets create a?Store?that contains several?Userinstances. view plain var?userStore?=?Ext.create(Ext.data.Store,?{?? ????model:?User,?? ????data:?[?? ????????{?name:?Lisa,?email:?lisa@,?phone:?555-111-1224?},?? ????????{?name:?Bart,?email:?bart@,?phone:?555-222-1234?},?? ????????{?name:?Homer,?email:?home@,?phone:?555-222-1244?},?? ????????{?name:?Marge,?email:?marge@,?phone:?555-222-1254?}?? ????]?? });?? 为了简单起见，我们直接写出 Store 其具体数据。而在真实的应用