ExtJS 4 官方指南翻译:Grid组件(上)-阿里云开发者社区

开发者社区> sp42> 正文

ExtJS 4 官方指南翻译:Grid组件(上)

简介: 原文:http://docs.sencha.com/ext-js/4-0/#!/guide/grid 翻译:frank/sp42 转载请保留本页信息 Grids Grid 面板为 Ext JS 的大头核心之一。
+关注继续查看

原文: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.

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
React-58:Context(组件间进行通信)
React-58:Context(组件间进行通信)
9 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4072 0
Android之EditText组件学习
一、基础学习 1.Button是TextView的一个子类,所以按钮本身是一个特殊的文本,属性和TextView相似 2.EditText类似html里的input type="text",是TextView的一个子类 二、实例 1: package org.
596 0
组件与props (精读React官方文档—04)
组件与props (精读React官方文档—04)
3 0
微信小程序把玩(十二)text组件
原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字。 wxml 我是文本组件 {{text}} js Page({ /** ...
726 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4502 0
ESFramework介绍之(32)―― Tcp客户端核心组件关系图
如果你的客户端基于ESFramework构建,并使用Tcp与服务端通信。通过这篇文章你将知道如何迅速、高效地创建客户端应用。    ESFramework对基于Tcp客户端的支持主要在ESFramework.Network.Tcp.Passive命名空间,下图给出了该命名空间中的核心组件,以及这些组件之间的关系:    下面解释一下这些组件的作用、职责。
806 0
旧代码回顾:YUI-ext 代码两侧/XML 数据岛/WSC 组件化
YUI-ext 代码两侧 旧时,写 yuiext 的代码的时候便学习过这些代码,两侧都是制作动画的代码。时间大概是两年前左右(07年初),但心路历程感觉是过了许久 呵呵,真的有天上十天,地下十年的感觉。
677 0
关于ExtJS3.0组件连接http://extjs.com/s.gif的问题
本文为原创,如需转载,请注明作者和出处,谢谢!     最近在做一个ExtJS的应用,以前使用时都是连网的,也没任何问题。不过最近由于某些原因,开发的机器无法连网。
629 0
+关注
sp42
移动项目技术负责人。多年全栈经验,熟悉 Java 和 JS,CSDN 博客技术专家,著有《ExtJS 详解与实践》等书。
294
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载