ExtJS + Gears

一直对Google的Gears很感兴趣，现在终于有时间尝试一下了，Gears的主要功能如下：

• LocalServer 在本地缓存和提供应用程序资源（HTML、JavaScript、图片等） ；
• Database 将数据存储在本地可以完全搜索的关系数据库中 ；
• WorkerPool 通过异步执行资源优化操作使网络应用程序的响应速度更快。

如果要将ExtJS和Gears结合起来的话，首先想到的是用Gears来缓存ExtJS的文件，因为ExtJS很庞大。因此首先要使用的就是LocalServer，下面就重点介绍如何使用LocalServer对ExtJS的资源文件进行本地缓存。

既然要使用ExtJS和Gears，那么下载和安装就不再讨论了，这些确实很容易。（Gears安装参考这里，ExtJS只要下载并建一个IIS虚拟目录即可）

下面是测试用的代码：

/// <reference path="http://localhost/ext-2.2/vswd-ext_2.2.js" />

Ext.BLANK_IMAGE_URL = '/ext-2.2/resources/images/default/s.gif';

// 全局缓存名称和资源文件名称
var STORE_NAME = 'GearStudy';
var MANIFEST_FILENAME = 'manifest.txt';
// 定义全局对localserver和ManagedStore的引用
var localServer;
var store;

Ext.onReady(function() {
	// 检查是否已经安装Gears
	if (!window.google || !google.gears) {
		textOut('Note: You must install Gears first.');
		return;
	}
	// 创建localserver和ManagedStore
	localServer = google.gears.factory.create("beta.localserver");
	store = localServer.createManagedStore(STORE_NAME);
	// ManagedStore更新出错时的回调函数，当应用程序离线或者manifest文件出错时，
	// 显示一个错误信息窗口
	store.onerror = function(error) {
		Ext.MessageBox.show({
			title: 'ERROR',
			msg: error.message,
			icon: Ext.MessageBox.ERROR,
			buttons: Ext.MessageBox.OK
		});
	}
	// 定义一个对进度窗口的引用变量，
	var ub;
	// ManagedStore报告进度的回调函数，下载manifest文件中定义的url时调用，
	// 显示一个进度窗口，并根据下载的进度更新进度条。
	store.onprogress = function(details) {
		if (!ub) {
			ub = Ext.MessageBox.progress('Alert', 'Loading offline manifest files ...', '0.00%');
		}
		var val = details.filesComplete / details.filesTotal;
		ub.updateProgress(val, (val * 100).toFixed(0).toString() + '%');
	};
	// ManagedStore完成下载时的回调函数，这个函数可能在两种情况下被调用，
	//   1. 调用checkUpdate函数手工更新；
	//   2. ManagedStore自动检查更新。
	store.oncomplete = function(details) {
		if (ub) {
			ub.hide();
			ub = null;
		}
		if (!Ext.isEmpty(details.newVersion)) {
			textOut('Local manifest version is ' + details.newVersion + ' now !');
		}
	};
	// 输出当前的Gears缓存信息
	var msg;
	if (Ext.isEmpty(store.currentVersion, false)) {
		msg = 'No local manifest find' + ' now !';
	}
	else {
		msg = 'Local manifest version is ' + store.currentVersion + ' now !';
	}
	textOut(msg);
	// 手工更新Gears缓存，当有了本地缓存之后，即使把IIS停掉，这个地址依旧可以浏览。
	Ext.fly('offlineBtn').on('click', function() {
		store.manifestUrl = MANIFEST_FILENAME;
		store.checkForUpdate();
	});
	// 手工删除Gears缓存，
	Ext.fly('onlineBtn').on('click', function() {
		localServer.removeManagedStore(STORE_NAME);
		textOut(
			"Done. The local store has been removed." +
			"You will now see online versions of the documents."
		);
	});
	
	Ext.fly('showWindow').on('click', function() {
		if (!window.win) {
			win = new Ext.Window({ width: 320, height: 240, title: 'Hello,world', closeAction: 'hide' });
		}
		win.show('showWindow');
	});
});

// Utility function to output some status text.

function textOut(s) {
	Ext.fly('msg').update(s);
}

最后使用的项目结构如下图所示，如果有兴趣的话可以自己下载体验一下。