[Ext JS 6 By Example 翻译] 第5章 - 表格组件(grid)


本章将探索 Ext JS 的高级组件 grid 。还将使用它帮助读者建立一个功能齐全的公司目录。本章介绍下列几点主题:

grid 组件是 Ext JS 中最强大的一个组件。它有很多的选项和配置,能以任何你希望的形式来构建 grid。

本章的主要目标是为你展示 Ext JS 的 grid 组件的功能以及如何利用这些提供的功能来构建一个简单的应用 公司目录(Company Directory)。最终的设计如下图所示:

1

基本的 grid

让我们从最基本的 grid 开始,创建一个 grid 组件,使用 Ext.grid.Panel ,你至少需要制定 grid 面板有哪些列和指定 store 来获取数据。这个类名,在现代化工具包(modern toolkit)中是 Ext.grid.Grid,但是在经典工具包(classic toolkit)中是 Ext.grid.Panel 。这两者有一些细微的区别,但是大多数概念是相同的。

 

我们首先创建一个 store 使用内置硬编码的 model 数据。

下列 model 使用的三个字符串类型的字段,store 使用内置数据并指定了所使用的 model :

 

 

OK,现在可以使用 Ext.grid.Panel 来创建 grid 了,记得要指定 store 。每一列都可以设置 width 和 flex 。我们将 ‘Description’ 列设置 flex 为 1 ,指定这个属性,这一列会使用其他两列余下的所有宽度。

列的 dataIndex 属性是指定对应 Product 模型中的哪个字段。为 id 列设置 hidden 属性 为 true 使该列保持隐藏,如以下代码所示:

 

下列截图为以上代码的输入。默认的列宽度是可调整的;如果需要你可以指定一个固定宽度。 1

排序

这是默认的列菜单,可以用来排序,隐藏或显示列。点击每一列上的细箭头图标,这个列菜单就会显示。排序功能可以从界面或代码上添加:

1

使用代码的写法,为列 Description 设置  sortable 属性为 false  ,此选项将为这个列隐藏排序。

默认的排序是客户端排序。如果想开启服务端排序,你需要为 store 设置 remoteSort 属性 为 true 。这时候你界面选择排序后,store 将会把排序信息(字段和排序次序)作为参数发送到服务器。

renderer

列的 renderer 配置可以用来改变列内容的呈现方式。你也许已经注意到 price 列并没有显示货币符号。现在我们使用 renderer 属性为 price 列的值增加  $ 作为前缀:

 

输出如下所示:

1

同样的,你可以使用 renderer 来描绘 HTML 标签到列中。还有 URL 和图片。

过滤

通过添加 Ext.grid.filters.Filters (ptype: gridfilters)  插件到 grid 并对列进行配置可以很容易实现过滤功能:

 

对每一列你都可以指定过滤类型,例如 string, bool, 等等,还有检索字段的额外配置(例如 emptyText 就是空文本时的提示内容)。

1 

这里是演示的在创建时添加过滤器,但也是可以在 grid 创建后再添加的。

分页

如果你有成千上万的数据,你肯定不想一次加载上万条记录(这句是废话啊),更好的方法是添加分页工具栏,或者使用缓冲滚动条。

现在我们在之前的例子上添加分页工具栏 Ext.toolbar.Paging (xtype: pagingtoolbar)。这里我们将会把分页工具栏添加到 dockedItems ,它是 Ext.panel.Panel 的一个属性, 并且 dockedItems 里配置的项可以设置停驻在 panel 的任意 上,下,左或右边。

 

然后,下面这是 store 的代码,store 从 JSON 文件中读取数据:

 

rootProperty 属性告诉 store 从 JSON 文件中哪个地方查找记录,同时 totalProperty 属性让 store 知道从哪里读取记录总数。 为了得到正确的结果,当你使用服务器分页时,需要指定 totalProperty 属性,因为这个值将用于分页工具栏。

pageSize 属性的值为 10 它为每页显示的记录数。

  • 这个参数用于服务器处理分页,并且返回所请求的数据,而不是整个集合。如果你是从文件中读,那么响应将包含 JSON 文件中的所有记录。

使用了分页工具栏的结果输出:

1

 

 

 

 1

截图为以上代码的输出结果:

1

如果你不希望同步立即发生,那么你可以在需要时调用 store 的 save 或 sync 方法。例如可以在 grid 的头部添加 Save 按钮 来调用 store 的 save 或 sync 方法。

 

 1

 

分组

为了对列进行分组,你需要在 store 的 groupField 属性上指定分组字段,并且我们需要在 grid 设置 Ext.grid.feature.Feature ,如以下代码所示:

 

以上代码所示的输出:

 1

 

下图显示了分组菜单。使用此菜单,可以在运行时通过 grid 的其他字段分组。这个选项可以设置 enableGroupingMenu 属性为 false 来关闭,上面的代码已经有例子了。

1

分组的模板可以用来添加一些额外的信息,例如分组后的数量或其他任何你想要的信息,通过 groupHeaderTpl : ‘{name}’,来实现。现在将上面的代码修改为 groupHeaderTpl : ‘{columnName}: {name} ({rows.length} Item{[values. rows.length > 1 ? “s” : “”]})’,  得到下列输出:

 1

pivot grid

这可以让你重新整理和汇总选定的列数据和行数据,以获得所需的报表。

比方说你有一个公司的员工提交的费用数据列表,然后你想看到每个类别,每个员工要求的总费用合计。

预期的结果的一个例子如下截图所示:

1

在 grid 里,你需要组织和总结列得到这样的结果,而不是得到费用列表。使用 pivot grid 可以很容易做到。注意除了第一列,其他的列标题的值为这个费用列表中费用类别的值,所以,你看到的数据是已经重新汇总和整理过的。

当你使用 pivot grid ,有两个重要的事需要你准备: axis(轴)和aggregates(聚合) 。 你应该使用 axis 指定行和列的位置以及使用聚合进行分组计算。

这是一个例子:

在轴中你可以指定排序,排序方向,过滤器等等。

这里聚合可以进行 sum avg , min , max ,等等and so on.

 

在 pivot grid 中,你也可以指定 renderer 属性自定义格式化数据:

 

现在可以创建 pivot grid 了。 这是用于 pivot grid 的 store 组件:

 

下面是 pivot grid 的例子代码。这里你可以看到 leftAxis 是固定的,而 topAxis 为动态的,基于一个下拉选择来改变 topAxis 。

 

 

下面的截图显示以上代码的输出:

 1

1

 

公司目录 – 一个示例项目

好了,现在我们将使用所学知识创建一个示例项目。以下截屏显示示例项目的最终效果:

1

通过查看设计效果,想必你已找到这个项目中最重要的组件就是 grid 了。本示例中所应用的组件和概念有:

 

1

现在让我们看看这个示例项目中的一些重要文件。

  • 完整的源码没有在这里提供,但是你可以从此地址去下载。 https://github.com/ ananddayalan/extjs-by-example-companydirectory

 

截图展示了示例项目的文件结构:

1

plugins: [{   ptype: ‘rowediting’,   clicksToMoveEditor: 1,   autoCancel: false }] ,

editor: { xtype: ‘textfield’, allowBlank: false }

 

  • 这个视图的代码有点长,这段代码中我已经截出来了重要部分的代码,完整的代码在这里。 https://github.com/ ananddayalan/extjs-by-example-company-directory

 

以上代码中,grid 使用了两个工具栏:一个分页工具栏和一个 grid 上方的包含按钮的工具栏。这些工具栏使用 dockedItems 属性配置,以下为示例代码。

在本章的早些时候你学过这个。‘dockedItems’  是 panel 的属性;它允许你设置一个组件停驻在 panel 上下,左边或右边。尽管通常它用于工具栏,但你可以停驻任意你想要的组件。

  • 分页工具栏为了正确设置页码,数据数量等等,需要设置 store 。