三、Menu
咦！？Menu咱们不是讲过了吗？是的，Menu之前的实现是非常简单的一种，——作为较“专业”的Widget，Core还是有必要重新实现一个Menu Widget，所以送到你手上的就有这个Ext.ux.Menu。具体说，那种简单的“菜单”只是较快速地做出类似的效果，适合于某个页面的URL跳转，不够灵活，难以适合在项目中使用，比如当前架构要求的“单页面程序（One Page, One Application）”，明显菜单应该可以登记事件，而不是URL的跳出。
Ext.ux.Menu的父类就是Ext.util.Observable，为其提供了基于事件模型的基础。该Widget的加入事件有：'显示事件show','隐藏事件hide','点击事件click'。登记相应的事件，我们可以哪一项被用户点击触发了。Ext.ux.Menu支持垂直/水平的两种状态：
既然Menu提供了新的事件，我们动手（“眼”）研究源码来看看是怎么触发事件，来留意一下initEvents()：
initEvents: function() {
this.showTask = new Ext.util.DelayedTask(this.showMenu, this);
this.hideTask = new Ext.util.DelayedTask(function() {
this.showTask.cancel();
this.hideAll();
this.fireEvent('hide');
}, this);
this.el.hover(function() {
this.hideTask.cancel();
}, function() {
this.hideTask.delay(this.delay*1000);
}, this);
// 凡是遇到有下级菜单的菜单项，就应该为其登记一个mouseenter的事件。这里select()可选取所有的符合'li.ux-menu-item-parent'的元素。
this.el.select('li.ux-menu-item-parent').on('mouseenter', this.onParentEnter, false, {me: this, delay: 5});
// 隐藏其他子菜单和移除hovers
// listen for mouseover events on items to hide other items submenus and remove hovers
this.el.on('mouseover', function(ev, t) {
this.manageSiblings(t);
// 尽管菜单项没有子菜单的，但有可能还会触发兄弟项的显示事件。要防止的话，执行Ext.util.DelayedTask.cancel方法。
if(!Ext.fly(t).hasClass('ux-menu-item-parent')) {
this.showTask.cancel();
}
}, this, {delegate: 'li'});
this.el.on('click', function(ev, t) {
return this.fireEvent('click', ev, t, this);
}, this, {delegate: 'a'})
},
这里的Ext.util.DelayedTask目的主要有两个：一个是制造时间差，另外一个则是触发show/hide的事件。由于小弟一时笔拙，时间上也不允许，实在不能在这里详细描述，好在从源码可以看到，在关键的一些地方，源代码的注释其实写得挺详细的，提供足够的信息允许我们好好的了解它。
四、Tabs
如下是Tabs的截图。不妨说说它这个Widget的配色，浅灰透些许赤加浅蓝色属冷色系，做DEMO不错啦。
Tabs Widget是我遇到的Widget中最简洁的几个之一，仅仅五行，一个手巴掌就数完，不多也不少，——注释占的还多：
Ext.onReady(function(){
Ext.select('.tab-buttons-panel').on('click', function(e, t) {
Ext.fly(t).radioClass('tab-show');
Ext.get('content' + t.id.slice(-1)).radioClass('tab-content-show');
}, null, {delegate: 'li'});
});
就这五句话，应用Ext Core做出了一个做朴素的Tab控件。其原理是CSS控制HTML全隐藏，只保留一个最初显示的（此刻容器CSS样式为display
:
block
;
的状态），然后select目标元素（多个元素一下子获取而来），登记显示的事件。与相比Ext.TabPanel的复杂程度简直判若云泥啊。再说HTML倒也好理解，每个Tab分配“tab-content”的Class，默认是display:none的，即不显示的；如果要现实，就通过radioClass('tab-show')方法加上显示的样式，这是一个取反的样式方法，每一个Ext.Element实例都会有的实例方法。
.tab-content {
top: 27px;
position: relative;
border-width: 0px 1px 1px 1px;
border-color: #b8cbde;
border-style: none solid solid solid;
background-color: #e1e6ee;
display: none;
padding: 15px;
padding-bottom: 0px;
}
.tab-content-show {
display: block;
}
既然提到CSS，就不得不说CSS选择符的应用，实在是高强度的普遍使用。纵观Ext各Widget，Ext组件也好， Core写成的Widget也罢，不夸张地说，处处渗透着CSS Selector的应用， CSS Selector等于是沟通UI结构与行为的通道，我们写JS控制widget，很大程度是以CSS Selector为选取的对象。对于JS代码本身来说，CSS Selector就是定位于HTML的依据。
注意：Tab Widget在IE6中，候选栏目与Tab Body不连续，应该明显是一个浏览器兼容的BUG。
本文所说例子的打包文件，可以从这里点击下载
，大小989KB。
2007年的时候，就有人采用Ext类似于jQuery角色的网页小script，用来丰富、点缀一下页面。那时还没有Ext
Core，问世还是后来的事情。拉着庞大的ext-all.js做JS很多人都是试试玩，抱着实验性质的心态。在我备份的代码中，就有Carousel的widget（原文在这儿
），作者也是声明这是“the Experimental Version”的。的确，600KB的JS焉能简单？不过随后，精简版的Ext
Core以较清晰的定位推出后，人们立刻觉得做Web站点不应该用ExtJS来做，不仅仅是技术上问题，伴随Ext
Core发布的背后，还是市场接纳程度、开源许可等衍生出来的问题。