Vista Gadget中引入Ext JS_ext.gadget-优快云博客

本文介绍如何利用 ExtJS UI 框架在 Microsoft Vista 的 Gadget 和 Google Gadget 中创建桌面小工具，包括具体实现过程及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ExtJS UI这一套UI被广泛地运用在不同客户端主机上，已经成为业界继Dojo、Yahoo！UI之后全能型UI框架。理论上，仅提供HTML/CSS /JavaScript的环境便可流程运行ExtJS UI，于是我们可以看到除了Web之外类型客户端：移动终端、WebOS、Fireware(如路由器、甚至任天堂Wii)等等。这种前提下，进而应用在 Gadget之上更是顺理成章、轻易易举的事情。那么发生在Gadget到底将会怎么样呢？我们可以透过MS Vista Gadget和Google Gadget来看看与结合ExtJS结合后发生什么事情。

ExtJS前任主程Jack Slocum曾经写过一篇博文（http://jackslocum.com/blog/2008/02/15/vista-gadget-with-ext-js/），说ExtJS可以直接用在Vista操作系统之上。这里“直接”的意思是不像网页使用ExtJS那么简单，也不是WSH、HTA的方式使用，而是通过Vista所支持的“Gadget小工具”的概念，来建立基于OS的小型应用程序。Gaget支持的开发途径就有HTML/CSS/JavaScript我们十分熟悉的知识技能，所以ExtJS作为一个AJAX UI框架，就可以充分利用到Vista的操作系统“原生”的扩展上了。

Jack在博文中便为大家提供一个 DEMO 程序。那是一个Ext Forum的内容读取 Gaget 程序，不需要打开浏览器，登录网站就可以在“桌面”上了解论坛的帖子。

如下图所示，左边的为完全展开（undocked）状态的 Gaget，右边为收缩（docked）状态的 Gaget：

制作Gaget的过程并不十分复杂。据Jack自述回忆，只是将做好的Ext程序打包为Gadget，还有就是写几行Docked/Undocked的代码外，没什么特定针对Gadget的代码。打包过程是发布每个应用程序的“编译过程”，总是少不了的。MS Gadget实际上也是一种ZIP文件，改变原forum.gadget的gadget扩展名为*.zip打开即可，里面都有源码的（forum.js）。

function changeDock() {
	if (System.Gadget.docked) {
		System.Gadget.background = 'images/docked.png';
		var bd = Ext.getBody();
		bd.setSize(130, 250);
		bd.addClass('docked');
		cm.setHidden(1, true);
		cm.setRenderer(0, renderTopicMini);
		grid.setPosition(4, 4);
		grid.setSize(121, 241);
		toggleDetails(null, false);
	} else {
		System.Gadget.background = 'images/undocked2.png';
		var bd = Ext.getBody();
		bd.setSize(528, 383);
		bd.removeClass('docked');
		cm.setHidden(1, false);
		cm.setRenderer(0, renderTopic);
		grid.setPosition(14, 14);
		grid.setSize(494, 349);
		cm.setColumnWidth(0, 350);
		toggleDetails(null, true);
	}
}
System.Gadget.onUndock = changeDock;
System.Gadget.onDock = changeDock;

我们解释一下贴出的代码。Gaget API 提供了 onDock/onUndock 的事件，我们在这里都指向同一个事件处理器：changeDock()。事件处理器changeDock中，根据System.Gadget.docked的状态决定是否收缩Gaget控件。有一点必须注意，Gadget控件的背景图不能通过bod:background-image来设定，而是Gadget自己的背景图属性System.Gadget.background来设定。最后就是改变控件大小的一些方法。

有网友问，Visit Gadget 只限于MS平台，如果不在用 Vista 或以上的 OS就不能享用Gadget，而Google的Gadget则没此限制，那么是否可以将此Gadget变为Google的Gadget（http://code.google.com/apis/gadgets/index.html）？Jack很快就回答了这位网友，说，其实Gadget内部依然AJAX程序，针对Gadget特定平台的代码是很小的一部分，所以转到Google网页的空间，应该不会太困难和麻烦的。

下载Gadget应用：http://jackslocum.com/playpen/forum.gadget

备份下载：http://bbs.ajaxjs.com/viewthread.php?tid=3140

几个相关的网址：