使用DOJO开发定制小部件,第2部分

使用DOJO开发定制小部件,第2部分:使用通用的网格处理程序生成DOJO DataGrid组件

简介

我们为本系列开发的定制小部件是基于 DOJO 1.2.3，并已经使用 Mozilla Firefox 3.0.11 在 WebSphere Integration Developer V6.2 上的 Business Space V6.2 中测试过。但是，我们开发的通用框架概念也适用于不使用 Business Space 的 DOJO 应用程序。学习本系列需要具备 DOJO 和 iWidget 框架的基本知识。

我们将讨论在基于 DOJO 的应用程序中经常遇到的主题。本系列分为以下几部分：

第 1 部分：使用通用的 markup 处理程序生成 DOJO markup

第 2 部分：使用通用的网格处理程序创建具有分页功能的 Dojo DataGrid 组件

第 3 部分：在 iWidget 中使用多个模板和如何继承基本小部件

第 4 部分：使用通用的 REST 处理程序从 iWidget 发出可配置的 REST 调用

在第 2 部分中，我们将演示如何使用通用网格处理程序通过编程方式生成一个具有分页功能的 Dojo DataGrid 组件。考虑到重用性和易维护性，我们提出一种灵活的设计方法，即在 JSON 文件中定义布局本身。

本文将向您完整演示使用 DojoGridHandler JavaScript 类生成 Dojo DataGrid 组件的必需步骤，并会告诉您网格处理程序是如何工作的。可供下载的 Dojo_sample.zip 中包含以下示例文件：

DojoGridHandler.js：通用网格处理程序 JavaScript 类。

gridHandlerLayout.json：包含 DataGrid 小部件的布局信息的 JSON 文件。

DojoItemFileWriteStore.js：覆盖 ItemFileWriteStore.js 的定制数据存储。

DojoPagingTable.js：处理分页功能的分页表 Javascript 类。

pagingTable.html：分页表小部件使用的 HTML 模板文件；它包含用于放置按钮的 div 标记，这些按钮可以导航至不同的页面。

gridView.html：包含 HTML markup 的 HTML 模板文件；它包含有应在其中放置网格和分页表的 div 标记。

定义网格布局

生成 Dojo DataGrid 的第一步是定义网格布局。布局信息包括想要放置在网格中的列，还有一些附加信息，如格式信息、列分组、列宽等等。

图 1 是 Business Space 示例屏幕，显示的是使用 DojoGridHandler 生成的 DataGrid。

图 1. 使用 DojoGridHandler 生成的 DataGrid

我们将演示如何编写生成上例布局信息的 JSON 文件，但我们将首先描述网格处理程序如何实际生成 Dojo DataGrid 小部件。