一直对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); }
最后使用的项目结构如下图所示,如果有兴趣的话可以自己下载体验一下。
张志敏所有文章遵循创作共用版权协议,要求署名、非商业 、保持一致。在满足创作共用版权协议的基础上可以转载,但请以超链接形式注明出处。
本博客已经迁移到 GitHub , 围观地址: http://beginor.github.io/
本文转自张志敏博客园博客,原文链接:http://www.cnblogs.com/beginor/archive/2009/03/21/1418582.html
,如需转载请自行联系原作者