简介： Gridx 的是为了弥补 Dojo 现有的 Grid 控件（主要是 DataGrid 及其子类 EnhancedGrid）的各种不足而诞生的。Gridx 脱离了 DataGrid 的框架，具有高度模块化的设计，使其能适应各种使用场景的需要。大量针对 DataGrid/EnhancedGrid 的问题而做出的设计上的改进使 Gridx 具有更高的稳定性和更好的性能。同时，API 的设计更直观，且难以被误用。本文从如何创建和使用 Gridx 入手介绍了 Gridx 的基本特点和基本用法，目的是让您对 Gridx 有一个基本的了解。
准备工作
Gridx 是基于 Dojo 的开源项目，在 GitHub 或者其官网都可以下载到源码包。下载解压后将 gridx 文件夹置于与 dojo、dijit 和 dojox 等文件夹同级的目录即可。目前 Gridx 支持 Dojo1.7+。
gridx/tests 文件夹中有大量的示例页面，可以从修改这些示例页面开始学习使用 Gridx。
回页首
创建 Gridx
Gridx 继承了 dijit._WidgetBase，因此其创建方式和其他 widget 类似，只是有一些必须指定的参数需要特别说明。
选用合适的 store 和 cache
Gridx 与 DataGrid 一样，都以 Dojo 的 store 作为数据源。不过，Gridx 需要用户指出所用的 store 是异步的还是同步的。异步 store 通常由服务器端提供数据，向它请求数据时往往需要异步地接收返回数据；而同步 store 的所有数据一般都在客户端，因此所有的请求都能同步完成。异步 store 往往会带来更为复杂的逻辑，因此 Gridx 针对这两种 store 分别进行了优化。但由于无法从 store 本身得知它是否异步，同时为了减小代码量，用户需要将这个信息告知 Gridx。告知的方法是设置 cacheClass 参数：
清单 1. 创建 Gridx 并配置 cacheClass 参数
require([
"gridx/Grid",
"gridx/core/model/cache/Sync",
......
"dojo/domReady!"
], function(Gridx, Cache, ......){
......
var grid = new Gridx({
cacheClass: Cache
store: store,
......
});
grid.placeAt('gridContainerNode');
grid.startup();
});
目前 Gridx 有两种 cache 实现：gridx/core/model/cache/Sync 和 gridx/core/model/cache/Async，前者用于同步 store，后者用于异步 store。Async 的实现逻辑比 Sync 要复杂得多，这是因为它需要考虑数据的延迟加载。这样，如果用户的应用只需要客户端数据，就完全不必用到关于延迟加载的代码，从而减小了最终下载到浏览器的代码量。
cacheClass 既可以直接接受 cache 实现的构造函数（如上例），也可以接受 MID，例如：
清单 2. 用 MID 设置 cacheClass 参数
var grid = new Gridx({
cacheClass: "gridx/core/model/cache/Async"
......
});
这种写法更适合以 HTML 声明的方式创建 Gridx 的场合，因为它不需要引入额外的变量。
目前 Gridx 能够直接支持 dojo(x)/data/* 的老 store 以及 dojo/store/* 的新 store，而不需要任何适配转换。常用的同步 store 有 dojo/data/ItemFileWriteStore 以及 dojo/store/Memory。常用的异步 store 有 dojox/data/JsonRestStore、dojox/data/QueryReadStore 以及 dojo/store/JsonRest。
需要特别注意的是，Gridx 要求 store 中的数据行必须具有唯一标识符（ID）。对于老 store 而言，也就是必须要实现 dojo/data/api/Identity。所幸刚才列举的常用 store 都满足这个要求。
声明列
配好 store 并选择好 cache 之后，就需要声明 Gridx 的列结构。列声明使用 structure 参数，这和 DataGrid 类似。所不同的是，Gridx 的列声明结构非常简单，只支持一维数组，没有 DataGrid 中视图（View）和子行（rows/cells）等复杂的声明结构：
清单 3. 一维数组结构的列声明
HTML5 离线功能介绍
HTML5 是目前正在讨论的新一代 HTML 标准，它代表了现在 Web 领域的最新发展方向。在 HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证、视频音频标签、网页元素的拖拽、离线存储和工作线程等功能。其中一个新特性就是对离线应用开发的支持。
在开发支持离线的 Web 应用程序时，开发者通常需要使用以下三个方面的功能：
尽管 HTML5 还处于草稿状态，但是各大主流浏览器都已经实现了其中的很多功能。Chrome、Firefox、Safari 和 Opera 的最新版本都对 HTML5 离线功能提供了完整的支持。IE8 也支持了其中的在线状态检测和 DOM Storage 功能。下面将具体介绍 HTML5 离线功能中的离线资源缓存、在线状态检测、DOM Storage 和 Web SQL Database，最后通过一个简单的 Web 程序说明使用 HTML5 开发离线应用的方法。
离线资源缓存
为了能够让用户在离线状态下继续访问 Web 应用，开发者需要提供一个 cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。本节先通过一个例子展示 cache manifest 文件的用途，然后详细描述其书写方法，最后说明缓存的更新方式。
cache manifest 示例
我们通过 W3C 提供的示例来说明。Clock Web 应用由三个文件“clock.html”、“clock.css”和“clock.js”组成。
清单 1. Clock 应用代码
当用户在离线状态下访问“clock.html”时，页面将无法展现。为了支持离线访问，开发者必须添加 cache manifest 文件，指明需要缓存的资源。这个例子中的 cache manifest 文件为“clock.manifest”，它声明了 3 个需要缓存的资源文件“clock.html”、“clock.css”和“clock.js”。
清单 2. clock.manifest 代码
添加了 cache manifest 文件后，还需要修改“clock.html”，把 <html> 标签的 manifest 属性设置为“clock.manifest”。修改后的“clock.html”代码如下。
清单 3. 设置 manifest 后的 clock.html 代码
效果如下：
//复选框也是如此
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{border:1px solid red;width:100px;height:100px;}
</style>
<script type="text/javascript" src=/blog_article/"js/jquery-1.7.2.min.js"></script>_br/index.html>
<script type="text/javascript">
$(function(){
$(".rad").click(function(){
if($(this).attr("value")=="1")
$("#show").show();
else
$("#show").hide();
});
});
</script>
</head>
<body>
<input type="radio" name="commend" value="1" checked="checked" class="rad" />YES
<input type="radio" name="commend" value="0" class="rad"/>NO
<div id="show">要显示的DIV内容</div>
</body>
</html>