开始！
W一步要做的是，下蝲本教E的CZ文g。Zip文g包括三个文gQ?strong>ExtMenu.html,?strong>ExtMenu.js?strong>ExtMenu.css?/strong>?strong>list-items.gif。解包这四个文g到Ext的安装目录中Q例如，Ext是在“C:\code\Ext\v1.0”中Q那应该?v1.0"里面新徏目录“menututorial”。双?strong>ExtMenu.htmQ接着你的览器打开启动面Q应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误Q请按照面上的指引操作?/p>
在你常用的IDE中或文本~辑器中Q打开ExtMenu.js看看Q?/p>
Ext.onReady(function() {
alert("You have Ext configured correctly! We are now ready to do some Ext Menu Magic!");
});
在Ext的介l中Q我们讨使用Ext的原因和Ext.onReady()函数的功能?/p>
创徏易的菜单
先看看怎么做一个基本的菜单Q然后再讨论代码中的各个lg和知识点。加入下列代码到onReady函数?
var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu // 分配menu到按?
}
]);
function clickHandler() {
alert('Clicked on a menu item');
}
function checkHandler() {
alert('Checked a menu item');
}
OK 仔细看看q里的代码，首先实例化一个MenucMؓ变量“menu”。然后Menu的构建函数接受一串的Object Literal作ؓ参数Q在先前的Ext教程中我们已l讨对ObjectLiteralq行了解。当前的ObjectLiteral包含了我们菜单中想要的属性。第一个属性是我们分配的IDQ稍后我们可以ID来获取Menu的引用?
各种Item的类?/h1>
属性“items”可能是最重要的属性当中的一个。留意一下语法其实我们是一个数l作为|value)传到属性中厅R数l里的数据就是我们想要在菜单中出现的每一V每本例中我们放了六个菜单项Q但何解每项的语法（SyntaxQ都不尽相同呢？W一Ҏ一串Object LiteralQ包含一l我们可配置的name/value。Ext的底层库会ؓq串Object Literal按其配置默认地创建item对象。接着W二ҎItem对象本nQ后面跟着分隔W，最后两个是单选框V整个过E演CZExt Widget如何动态的q行。下例各可填入到数l中Q?/p>
{text: 'Foo'} // Ext 转换q个配置对象到menu item
'Straight Text' //文本或原始html (U文?
'-' // 创徏分隔W?
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')) //允许你加入Q何元?
Item属?/h1>
Item接受什么类型的属性呢Q本例中我们使用了这两属性：
text: 'An item', handler: clickHandler
W一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函敎ͼevent handler functionQ。本例中我们函数clickHandler()和checkHandler()定义在代码的最后。作为演C用途，q仅仅是用alert()通知你有一个单ȝ消息?br />其它有用的属性是Q?/p>
cls: 'a-class-name' , // 为标准Item手动讄样式和图标ICON icon: 'url', // 如不想用CSS,可直接设|图标的URL group: 'name of group', //只适用多选项Q保证只有一被选中
完整的item属性列表在Menu Item文档中?/p>
在UI中摆放菜?/h1>
So,创徏好的Menu对象已经有两个基本的item了，然而我们怎么把它们摆攑ֈ面中呢?在UI中一个menu可以分配到多个位|（同一个对象，不同位置多次使用Q，q正是Ext如此强大的原因：每一个器ӞwidgetQ切成“一块一快”的c，来构建整个面向对象的动态结构（StructureQ。这意味着menu可用于不同的场合。我们可menu攑ֈ有按钮的toolbar中，或用面中的一个按钮来展开menuQ甚臛_在Ext的其它器件中QwidgetsQ用menu作ؓ上下文菜单（Context MenuQ?/p>
本例中分配一个menu到toolbar中：
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu // 分配menu到toolbar
}
]);
Ext.Toolbar构徏函数接受两个参数Q第一个是指定toolbar的容器（contrainerQ；W二个参数是包含全部按钮的数l。这?我们只用一个按?正如所见，按钮实质上是一串由数组l成的Object Literal,同时q个Object Litetal亦包含了不同的属性。下面是一l按钮对象的Object Litetal属性：
cls: 'a-class-name' , //手动讄样式和图标ICON icon: 'url', // 如不想用CSS,可直接设|图标的URL text:'Our first Menu', // 按钮提示之文? menu: menu // 可以是menu之id或配|对?
Menu的分配方式：
刚才谈到如何分配Menu到工h中（toolbarQ，l而亦讨论menu分配的不同方式，看看有关的细节是怎样的。So,因ؓmenu属性可以以不同方式地分配，x可以赋予一个menu对象Q或是已l徏好的menuIDQ或直接是一个menu config对象。你应该有机会就试一下以多种方式创徏menuQ因为类似的方式Ҏ在Ext的Widgets随处可见。下面的代码演示了如何用不同的方法来做出跟范例一L效果Q唯一相同的就是menu对象的config。菜单中包括两个子菜单、一个DataItem容器、一个ColorItem容器。另外注意event handing函数需两个参数来获取事件更多的信息和知道哪个item被单M。可以的话，把下面的代码也加入到onReady函数中，亲n体验一下：
var dateMenu = new Ext.menu.DateMenu({
handler : function(datepicker, date){
alert('Date Selected', 'You chose: '+ date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.Menu({
id: 'colorMenu', // the menu's id we use later to assign as submenu
items: [
new Ext.menu.ColorItem({
selectHandler: function(colorpicker, color){
alert('Color Selected', 'You chose: ' + color);
}
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: {
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
}, {
text: 'Another item',
handler: clickHandler
},
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
}),
'-', {
text: 'DateMenu as submenu',
menu: dateMenu, // assign the dateMenu we created above by variable reference,
handler: date
}, {
text: 'Submenu with ColorItem',
menu: 'colorMenu' // we assign the submenu containing a ColorItem using it's id
}
]
}
}
]);
function clickHandler(item, e) {
alert('Clicked on the menu item: ' + item.text);
}
function checkHandler(item, e) {
alert('Checked the item: ' + item.text);
}
注意Q?/strong>留意几种不同的方法加入子菜单Q还有even handing函数和Coloritem、DataMenu匿名函数之间的区别?/p> Ok我们用上q的ҎQ创Ztoolbar和menuQ看h应该是这LQ?/p> 上文提及menu可摆攑֜UI的Q何位|，q里ؓ你演Cmenu如何与Toolbars、MeneuButtons、Context Menus's配合工作Q包括一些有用的Ҏ和动态添加的功能?/p>MenuButton q条Toolbar有两个按钮。一个分隔符Q和一个纯图标的按钮（附QuicktipsQ。你可尝试这样做Q把zip文g?gif加入 一些代码片D，有助你提高效率，留意注释Q? 现在你已l了解菜单组件是如何工作了。下面的资源有助您进一步更深入学习菜单Q?/p>
l一l?/h1>
new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});
动态添加菜单按钮到Toolbar
Ext.QuickTips.init();
tb.add('-', {
icon: 'list-items.gif', //图标可单行显C?
cls: 'x-btn-icon', // U图?
tooltip: 'Quick Tips
提示文字'
});
更方便的?/h1>
// Menus更多的API内容
// 动?增、减元素
menu.addSeparator(); //动态加入分隔符
var item = menu.add({
text: 'Dynamically added Item'
});
// items 完整支持Observable API
item.on('click', onItemClick);
// items can easily be looked up
menu.add({
text: 'Disabled Item',
id: 'disableMe' // <-- 讄ID便于查找lookup
// disabled: true <-- 先不disabled 而采用下面的方式
});
// ?id ?index讉K
menu.items.get('disableMe').disable();
下一步是