ExtJS2 0开发与实践笔记 3 ——Ext中的Menu

                在桌面程序gui开发中,menu是我们所经常使用的组件之一，它为用户提供了便利的程序功能选择项；而在web开发中，如何制作menu菜单效果一直是个很棘手的问题，如何让菜单通用，如何令菜单响应事件都需要我们自己动手来完成。所幸Ext也为我们提供了Menu组件，以Ext进行开发时，我们的不必要工作量将大大的减少。

Ext的Menu组件，是通过几个类的联合来使用的，这些类包括：Ext.Toolbar、Ext.menu.Menu、Ext.menu.Item、 Ext.menu.CheckItem，以及一些特殊类型的菜单或菜单项，例如菜单Ext.menu.DateMenu、菜单项Ext.menu.ColorItem。 

其中组织关系如下图：


Ext.Toolbar：
该类表示一个菜单条，构建函数接受两个参数，第一个是指定toolbar的容器（contrainer）；第二个参数是包含全部按钮的数组。

Ext.menu.Menu：
该类表示一个菜单，包含菜单标识id和菜单中所含的菜单项。

Ext.menu.Item：
该类表示一个菜单项，菜单项包括一些属性，如上面的text和handler，根据不同菜单项类型，属性的使用略有不同，最基本的包括文本内容text和事件处理器函数handler/ checkHandler，具体请参考Ext 的API文档。

Ext.menu.CheckItem：
可选菜单项，从Ext.menu.Item继承而来，表示可选的菜单项。

Ext.menu.DateMenu：
特定的表示时间的菜单，从Ext.menu.Menu继承而来 。

Ext.menu.ColorItem：
特定的表示颜色选择的菜单项集合，可直接作为Menu构造函数中的items属性值。

下面我给出一个简单的用例代码：( Ext2.0配置方法见此)

MenuExt.js

/**/ /**
 * <p>Title: LoonFramework</p>
 * <p>Description:Ext的Menu用例</p>
 * <p>Copyright: Copyright (c) 2008</p>
 * <p>Company: LoonFramework</p>
 * <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>
 * @author chenpeng
 * @email：ceponline@yahoo.com.cn
 * @version 0.1
 */
Ext.onReady( function () ... {
    Ext.QuickTips.init();
    //菜单选项
    var dateMenu = new Ext.menu.DateMenu(...{
        handler: function(dp, date)...{
            Ext.MessageBox.alert('日期选择', '选择日期为: ' + date.format('Y/m/d'), '');
        }
    });
    
    var colorMenu = new Ext.menu.ColorMenu(...{
        id: 'colorMenu',
        handler: function(cm, color)...{
             var rgb=Ext.color.hexToRGB(color);