如何添加 Dojo Gridx 的工具条自定义组件（1）

look_w

Gridx 简介Gridx 的是为了弥补 Dojo 现有的 Grid 控件（主要是 DataGrid 及其子类 EnhancedGrid）的各种不足而诞生的。Gridx 具有高度模块化的设计，使其能适应场景的需要，其应用可以被高度延伸。 现有的很多 Gridx 里的 UI 组件已经具有很强大的适应性，但是因为其分离式的功能处理机制，往往很难找到一个集合多种功能的现有工具组件。遇到这样的情况，开发者就需要根据客户的需求，自定义一个能够包含多种实现的模块。
本文注重介绍在 Gridx UI 里面的现有的工具条组件，以及其本身的限制性，并且实践几个功能组合的自定义工具条。
准备工作Gridx 是基于 Dojo 的开源项目，在 GitHub 或者其官网都可以下载到源码包。下载解压后将 Gridx 文件夹置于与 Dojo、Dijit 和 Dojox 等文件夹同级的目录即可。目前 Gridx 支持 Dojo1.80+。
创建基于 Gridx 的 Grid，实现代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

require([     "gridx/Grid",     "gridx/core/model/cache/Sync",     ......     "dojo/domReady!" ], function(Grid, Cache, ......){     ......     var grid = new Grid({         cacheClass: Cache,         store: storeName,         pageSize : defaultPageSize,         query: queryName,         structure: columnStructure,         modules: [           module1,           module2            …         ],         modulePropertyName1,         modulePropertyName2,           …，        'class': 'GridxClass'     });     grid.placeAt('gridContainerNode');     grid.startup(); });

Gridx 以 Dojo 的 store 作为数据源，但是需要用户指出所用的 store 是异步还是同步的。异步的 store 通常由服务端提供数据，向它请求的数据需要异步地被接收。而同步的 store 一般都一次性的加载到客户端。用户可以通过设置 cacheClass 参数，将这个信息告知 Gridx。Query 参数是用来确定数据请求的地址，而 structure 参数则是用来确定数据之间的相关性。
上面的参数是初始化一个 Grid 的必要参数，而 modules 参数则是作为可选的模块，供用户进行功能性选择的处理。我们在这里描述的工具条组件也是其中之一。通过在 modules 参数里面进行注册的模块，我们可以动态的注入一些新的可视化组件。最下模块参数则是供用户进行特殊模块的特别参数初始化。