ExtJS + Gears

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

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

如果要将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);
}

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

image

张志敏所有文章遵循创作共用版权协议,要求署名、非商业 、保持一致。在满足创作共用版权协议的基础上可以转载,但请以超链接形式注明出处。

本博客已经迁移到 GitHub , 围观地址: https://beginor.github.io/

posted @ 2009-03-21 19:14  张志敏  阅读(2193)  评论(4编辑  收藏  举报