ExtJS + Gears

一直對Google的Gears很感興趣，現(xiàn)在終于有時間嘗試一下了，Gears的主要功能如下：

• LocalServer 在本地緩存和提供應(yīng)用程序資源（HTML、JavaScript、圖片等） ；
• Database 將數(shù)據(jù)存儲在本地可以完全搜索的關(guān)系數(shù)據(jù)庫中 ；
• WorkerPool 通過異步執(zhí)行資源優(yōu)化操作使網(wǎng)絡(luò)應(yīng)用程序的響應(yīng)速度更快。

如果要將ExtJS和Gears結(jié)合起來的話，首先想到的是用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() {
	// 檢查是否已經(jīng)安裝Gears
	if (!window.google || !google.gears) {
		textOut('Note: You must install Gears first.');
		return;
	}
	// 創(chuàng)建localserver和ManagedStore
	localServer = google.gears.factory.create("beta.localserver");
	store = localServer.createManagedStore(STORE_NAME);
	// ManagedStore更新出錯時的回調(diào)函數(shù)，當(dāng)應(yīng)用程序離線或者manifest文件出錯時，
	// 顯示一個錯誤信息窗口
	store.onerror = function(error) {
		Ext.MessageBox.show({
			title: 'ERROR',
			msg: error.message,
			icon: Ext.MessageBox.ERROR,
			buttons: Ext.MessageBox.OK
		});
	}
	// 定義一個對進度窗口的引用變量，
	var ub;
	// ManagedStore報告進度的回調(diào)函數(shù)，下載manifest文件中定義的url時調(diào)用，
	// 顯示一個進度窗口，并根據(jù)下載的進度更新進度條。
	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完成下載時的回調(diào)函數(shù)，這個函數(shù)可能在兩種情況下被調(diào)用，
	//   1. 調(diào)用checkUpdate函數(shù)手工更新；
	//   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 !');
		}
	};
	// 輸出當(dāng)前的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緩存，當(dāng)有了本地緩存之后，即使把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);
}

最后使用的項目結(jié)構(gòu)如下圖所示，如果有興趣的話可以自己下載體驗一下。