学习EXT第三天:Menu组件

这篇教程中，我们将学习使用Ext的菜单器件（Menu Widgets)。假设读者已经阅读过Ext简介一文，并懂得一些Ext的基本相关知识。菜单器件是Ext库中较迟实现的器件。它由几个类联合构成，使得创建一个菜单只需若干代码块（Block of code）。

开始！

第一步要做的是，下载本教程的示例文件。Zip文件包括三个文件：ExtMenu.html,、ExtMenu.js、ExtMenu.css、和list-items.gif。解包这四个文件到Ext的安装目录中（例如，Ext是在“C:/code/Ext/v1.0”中，那应该在"v1.0"里面新建目录“menututorial”。双击ExtMenu.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中，打开ExtMenu.js看看：

Ext.onReady(function(){
alert("YouhaveExtconfiguredcorrectly!WearenowreadytodosomeExtMenuMagic!");
});

在Ext的介绍中，我们讨论过使用Ext的原因和Ext.onReady()函数的功能。

创建简易的菜单

先看看怎么做一个基本的菜单，然后再讨论代码中的各个组件和知识点。加入下列代码到onReady函数中:

varmenu=newExt.menu.Menu(...{
id:'basicMenu',
items:[...{
text:'Anitem',
handler:clickHandler
},
newExt.menu.Item(...{
text:'Anotheritem',
handler:clickHandler
}),
'-',
newExt.menu.CheckItem(...{
text:'Acheckitem',
checkHandler:checkHandler
}),
newExt.menu.CheckItem(...{
text:'Anothercheckitem',
checkHandler:checkHandler
})
]
});

vartb=newExt.Toolbar();
tb.render('toolbar');

tb.add(...{
text:'Buttonw/Menu',
menu:menu//assignmenubyinstance
});

functionclickHandler()...{
alert('Clickedonamenuitem');
}

functioncheckHandler()...{
alert('Checkedamenuitem');
}

OK 仔细看看这里的代码，首先实例化一个Menu类为变量“menu”。然后Menu的构建函数接受一串的Object Literal作为参数，在先前的Ext教程中我们已经讨对ObjectLiteral进行了解。当前的ObjectLiteral就包含了我们菜单中想要的属性。第一个属性是我们分配的ID，稍后我们可用ID来获取Menu的引用。

各种Item的类型

属性“items”可能是最重要的属性当中的一个。留意一下语法其实我们是将一个数组作为值（value)传到属性中去。数组里的数据就是我们想要在菜单中出现的每一项。每本例中我们放了六个菜单项，但何解每项的语法（Syntax）都不尽相同呢？第一项是一串Object Literal，包含一组我们可配置的name/value。Ext的底层库会为这串Object Literal按其配置默认地创建item对象。接着第二项是Item对象本身，后面跟着分隔符，最后两个是单选框项。整个过程演示了Ext Widget如何动态的运行。下例各项可填入到数组中：

{text: 'Foo'} // Ext 转换这个配置对象到menu item
'Straight Text' //文本或原始html (纯文字)
'-' // 创建分隔符
new Ext.menu.Item({text: 'Foo'}) // 创建一个标准item (同{text: 'Foo'})
new Ext.menu.CheckItem() // 创建单选框item
new Ext.menu.DateItem() // 创建menu内置的日历控件
new Ext.menu.ColorItem() //创建一个颜色采集器
new Ext.menu.BaseItem(document.getElementById('my-div')) //允许你加入任何元素

Item属性

Item接受什么类型的属性呢？本例中我们使用了这两属性：

text:'Anitem',
handler:clickHandler

第一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函数（event handler function）。本例中我们将函数clickHandler()和checkHandler()定义在代码的最后。作为演示用途，这仅仅是用alert()通知你有一个单击的消息。
其它有用的属性是：

cls:'a-class-name',//为标准Item手动设置样式和图标ICON
icon:'url',//如不想用CSS,可直接设置图标的URL
group:'nameofgroup',//只适用多选项，保证只有一项被选中

完整的item属性列表在Menu Item文档中。

在UI中摆放菜单

So,创建好的Menu对象已经有两个基本的item了，然而我们怎么把它们摆放到页面中呢?在UI中一个menu可以分配到多个位置（同一个对象，不同位置多次使用），这正是Ext如此强大的原因：每一个器件（widget）切成“一块一快”的类，来构建整个面向对象的动态结构（Structure）。这意味着menu可用于不同的场合。我们可将menu放到有按钮的toolbar中，或用页面中的一个按钮来展开menu，甚至可在Ext的其它器件中（widgets）使用menu作为上下文菜单（Context Menu）。

本例中分配一个menu到toolbar中：

vartb=newExt.Toolbar('toolbar',[{
text:'OurfirstMenu',
menu:menu//分配menu到toolbar
}
]);

Ext.Toolbar构建函数接受两个参数，第一个是指定toolbar的容器（contrainer）；第二个参数是包含全部按钮的数组。这里,我们只使用一个按钮,正如所见，按钮实质上是一串由数组组成的Object Literal,同时这个Object Litetal亦包含了不同的属性。下面是一组按钮对象的Object Litetal属性：

cls:'a-class-name',//手动设置样式和图标ICON
icon:'url',//如不想用CSS,可直接设置图标的URL
text:'OurfirstMenu',//按钮提示之文字
menu:menu//可以是menu之id或配置对象

Menu的分配方式：

刚才谈到如何分配Menu到工具条中（toolbar），继而亦讨论menu分配的不同方式，看看有关的细节是怎样的。So,因为menu属性可以以不同方式地分配，即是可以赋予一个menu对象，或是已经建好的menuID，或直接是一个menu config对象。你应该有机会就尝试一下以多种方式创建menu，因为类似的方式方法在Ext的Widgets随处可见。下面的代码演示了如何用不同的方法来做出跟范例一样的效果，唯一相同的就是menu对象的config。菜单中包括两个子菜单、一个DataItem容器、一个ColorItem容器。另外注意event handing函数需两个参数来获取事件更多的信息和知道哪个item被单击了。可以的话，把下面的代码也加入到onReady函数中，亲身体验一下：

vardateMenu=newExt.menu.DateMenu(...{
handler:function(datepicker,date)...{
alert('DateSelected','Youchose:'+date.format('Mj,Y'));
}
});

varcolorMenu=newExt.menu.Menu(...{
id:'colorMenu',//themenu'sidweuselatertoassignassubmenu
items:[
newExt.menu.ColorItem(...{
selectHandler:function(colorpicker,color)...{
alert('ColorSelected','Youchose:'+color);
}
})
]
});

vartb=newExt.Toolbar('toolbar',[...{
text:'OurfirstMenu',
menu:...{
id:'basicMenu',
items:[...{
text:'Anitem',
handler:clickHandler
},...{
text:'Anotheritem',
handler:clickHandler
},
'-',
newExt.menu.CheckItem(...{
text:'Acheckitem',
checkHandler:checkHandler
}),
newExt.menu.CheckItem(...{
text:'Anothercheckitem',
checkHandler:checkHandler
}),
'-',...{
text:'DateMenuassubmenu',
menu:dateMenu,//assignthedateMenuwecreatedabovebyvariablereference,
handler:date
},...{
text:'SubmenuwithColorItem',
menu:'colorMenu'//weassignthesubmenucontainingaColorItemusingit'sid
}
]
}
}
]);

functionclickHandler(item,e)...{
alert('Clickedonthemenuitem:'+item.text);
}

functioncheckHandler(item,e)...{
alert('Checkedtheitem:'+item.text);
}

注意：留意几种不同的方法加入子菜单！还有even handing函数和Coloritem、DataMenu匿名函数之间的区别。

练一练

Ok我们用上述的方法，创建了toolbar和menu，看起来应该是这样的：

上文提及menu可摆放在UI的任何位置，这里将为你演示menu如何与Toolbars、MeneuButtons、Context Menus's配合工作，包括一些有用的方法和动态添加的功能。

MenuButton
newExt.MenuButton('menubutton',{text:'MenuButton1',menu:dateMenu});

动态添加菜单按钮到Toolbar

这条Toolbar有两个按钮。一个分隔符，和一个纯图标的按钮（附Quicktips）。你可尝试这样做，把zip文件中.gif加入

Ext.QuickTips.init();

tb.add('-',{
icon:'list-items.gif',//图标可单行显示
cls:'x-btn-icon',//纯图标
tooltip:'QuickTips提示文字'
});

更方便的是

一些代码片段，有助你提高效率，留意注释！

//Menus更多的API内容
//动态增、减元素

menu.addSeparator();//动态加入分隔符

varitem=menu.add({
text:'DynamicallyaddedItem'
});

//items完整支持ObservableAPI
item.on('click',onItemClick);

//itemscaneasilybelookedup
menu.add({
text:'DisabledItem',
id:'disableMe'//<--设置ID便于查找lookup
//disabled:true<--先不disabled而采用下面的方式
});

//用id或index访问
menu.items.get('disableMe').disable();