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);

}

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