ExtJS 4 官方指南翻译:Grid组件(上)
2011-10-18 16:41
645 查看
原文:http://docs.sencha.com/ext-js/4-0/#!/guide/grid
翻译:frank/sp42 转载请保留本页信息
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 面板。通过这个例子你可以学习到创建 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:
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":
接下来,我们创建一个包含多个用户 User 的 Store对象。Next let's create a
Store that contains several
为了简单起见,我们直接写出 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.
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:
相当简单,是吧!我们刚刚创建的一个 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 the
Finally we defined what columns the
Grid Panel will have, and we used the
its data from. The
column flexes to fit the remainder of the
Grid Panel's total width. To view this example live, see the
Simple Grid Example.
You can use the
but you can write your own as well:
See the
Renderers Example for a live demo that uses custom renderers.
把 Grid 里面的行进行分组很容易,首先要在 Store 身上指定 groupField 属性:
Organizing the rows in a
Grid Panel into groups is easy, first we specify a
groupField property on our store:
更多 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:
可参考一下 Grouping Grid Panel 在线例子。
See
Grouping Grid Panel for a live example.
翻译: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
Userinstances.
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 the
userStoreStore that we created earlier.
Finally we defined what columns the
Grid Panel will have, and we used the
dataIndexproperty to configure which field in the
UserModel each column will get
its data from. The
Namecolumn has a fixed width of 100px and has sorting and hiding disabled, the
Email Addresscolumn is hidden by default (it can be shown again by using the menu on any other column), and the
Phone 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.
相关文章推荐
- ExtJS 4 官方指南翻译:Grid组件(下)
- ExtJS 4 官方指南翻译:Tree组件
- ExtJS 4 官方指南翻译:Component 组件
- ExtJS 4 官方指南翻译:键盘导航 Keyboard Navigation
- ExtJS 4 官方指南翻译:Drag and Drop 拖放
- ExtJS 4 官方指南翻译:容器与布局(Layouts and Containers)
- Extjs4 官方文档翻译系列二:组件(components)、自定义组件
- 【引用】自己封装的Extjs组件GroupGrid(1)
- 【SFA官方翻译】使用 Kubernetes、Spring Boot 2.0 和 Docker 的微服务快速指南
- Netty 5.X 官方指南翻译版5
- Android官方技术文档翻译——Gradle 插件用户指南(4)
- Extjs4 之grid组件
- ExtJs表单组件查询LiveSearchGridPanel(一)
- [Struts2官方指南的个人学习和翻译] Struts2的配置元素-管理元素
- Sencha Cmd 6 和 Ext JS 6 指南文档(部分官方文档中文翻译)
- ExtJS 4 Grid组件
- 《ios人机交互指南翻译系列之一,来自苹果最新官方文档,2015.8》 设计策略:把概念变成产品
- Netty 5.X 官方指南翻译版4
- Apple Watch Human Interface Guidelines (Watch 人机交互指南) (官方文档翻译)
- NDK官方开发指南翻译之 NDK_GDB