学步园

现在开始谈谈Ext Core，有关网页Widget的应用。

首先是经典的Lightbox效果（单击我

进入演示）。Ext.ux.Lightbox支持两种方式的登记（register()），一种是单张的图片登记的，无须多说；另外一种是批量的，就是有“上一张”/“下一张”的效果，供用户前进或者后退。应该说，这两种方式已经满足了一般Lightbox效果的要求，而且图片出现的时候带有动画效果，让用户有比较活泼的感觉。

• Ext.ux.Lightbox.register('a[rel^=lightbox]');
• Ext.ux.Lightbox.register('a.lb-flower', true); // true to show them as a set

不需要创建实例，执行方法Ext.ux.Lightbox.register就可以完成对图片添加Lightbox的效果。怎么选择页面中哪些图片呢？答案还是CSS选择符的使用（CSS Selector），如上面register()两个的用法之中第一个参数都是CSS选择符。如上面第一项的a[rel^=lightbox]，就是选择A元素必须具有rel属性为lightbox的，符合该条件的A元素集合就会产生Lightbox的效果。A是连接，其href指向就是Lightbox图片显示的内容。

我们可以看看第一种方式其HTML结构是怎样的:

<div class="thumbnail"><br /> <a href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image1.jpg" mce_href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image1.jpg"<br /> rel="lightbox"><br /> <img height="72" alt="Columbine" src="Ext Lightbox Example.files/thumb1.jpg" mce_src="Ext Lightbox Example.files/thumb1.jpg" width="120"></a><br /> </div>

其中title属性是可选的。如设置了的话便会在Box下方出现。

接着第二个用法，送入true的第二个参数，表示这次登记的是多张图片。例如我们看看下面的A元素，就多了class="lb-flower"，跟'a.lb-flower'的CSS选择符相匹配。

<div class="thumbnail"><br /> <a class="lb-flower" title="This is a narrow image with a long description. Notice how the bottom of the lightbox automatically expands to accommodate the longer caption."<br /> href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image6.jpg" mce_href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image6.jpg"><br /> <img height="72" alt="Periwinkle" src="Ext Lightbox Example.files/thumb6.jpg" mce_src="Ext Lightbox Example.files/thumb6.jpg" width="120"></a><br /> </div><br /> <div class="thumbnail"><br /> <a class="lb-flower" title="Press 'Esc' to close the gallery." href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image7.jpg" mce_href="http://www.extjs.com/playpen/ext-core-latest/examples/lightbox/images/image7.jpg"><br /> <img height="72" alt="Daffodil" src="Ext Lightbox Example.files/thumb7.jpg" mce_src="Ext Lightbox Example.files/thumb7.jpg" width="120"></a><br /> </div>

出现的效果如下图:

进入Ext.ux.Lightbox的源码，发现其结构还是JS Singleton的模式，所以我们调用该单例方法register()即可。值得稍微赞许的是，该小widget还是一贯Ext代码那样的干净、清晰！——可，小弟我尽管没有通读全代码，但是发现了其中一个关键的hack！

init: function() {<br /> ……<br /> if(!initialized) {<br /> Ext.apply(this, Ext.util.Observable.prototype);<br /> Ext.util.Observable.constructor.call(this);<br /> this.addEvents('open', 'close');<br /> this.initMarkup();<br /> this.initEvents();<br /> initialized = true;<br /> }<br /> },

我又发现其中hack的痕迹了，这便是“劫持”了Obserable类，先是prototype原型，后是构造器call()过来了，结果就是嫁接了这个单例和Observable。这样的继承虽然可以，但小弟个人感觉而言，还是不值得提倡。

本文所说例子的打包文件，可以从这里点击下载

，大小989KB。