Ext.menu.Menu菜单栏

1、Ext.menu.Menu主要配置项

Ext.menu.Menu组件主要配置项

配置项	参数类型	说明
items	Mixed	有效菜单项数组
ignoreParentClicks	Boolean	忽略任何作为父菜单项的单击事件，默认为false
plain	Boolean	是否移除菜单左侧的竖线，默认为false

菜单项主要类型

菜单元素名称	说明
Ext.menu.Item	菜单项基类
Ext.menu.Separator	菜单分隔符
Ext.menu.CheckItem	包含选择框的菜单项，也可以是一个单选组
Ext.menu.ColorPicker	颜色选择器
Ext.menu.DatePicker	日期选择器

Ext.menu.Item主要配置项

配置项	参数类型	说明
canActivate	Boolean	当鼠标移入菜单或菜单项获得焦点时，是否高亮显示菜单项，默认为true
clickHideDelay	Number	点击菜单项之后，隐藏菜单项的延时时间，默认为1ms
destoryMenu	Boolean	是否级联销毁子菜单，默认为true
hideOnClick	Boolean	点击菜单项之后是否隐藏菜单，默认为true
href	String	超链接，默认为#
hrefTarget	String	打开超链接的目标框架名称，默认为undefined
menuExpandDelay	Number	子菜单展开之前，鼠标移入菜单项之后的延时时间，默认为300ms，只有在菜单项具有子菜单时生效
menuHideDelay	Number	子菜单隐藏之前，鼠标移入菜单项之后的延时时间，默认为300ms，只有在菜单项具有子菜单时生效
menuAlign	String	设置子菜单与父菜单的对其关系
menu	Mixed	子菜单

2、简单示例

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Ext.menu.Menu菜单栏</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {var toolbar = Ext.create("Ext.Toolbar", {renderTo: Ext.getBody(),width: 500});var file = new Ext.menu.Menu({shadow: "drop",allowOtherMenus: true,items: [new Ext.menu.Item({text: "新建",handler: onMunuItem}),new Ext.menu.Item({text: "打开",handler: onMunuItem}),new Ext.menu.Item({text: "保存",handler: onMunuItem}),new Ext.menu.Item({text: "另存为",handler: onMunuItem}),new Ext.menu.Separator(),new Ext.menu.Item({text: "退出",handler: onMunuItem})]});var edit = new Ext.menu.Menu({shadow: "frame",allowOtherMenus: true,items: [new Ext.menu.Item({text: "撤销",handler: onMunuItem}),new Ext.menu.Separator(),new Ext.menu.Item({text: "剪切",handler: onMunuItem}),new Ext.menu.Item({text: "复制",handler: onMunuItem}),new Ext.menu.Item({text: "粘贴",handler: onMunuItem}),new Ext.menu.Item({text: "删除",handler: onMunuItem})]});toolbar.add({text: "文件",menu: file}, {text: "编辑",menu: edit});function onMunuItem(item) {Ext.MessageBox.alert(item.text);}});</script>
</head>
<body>
</body>
</html>

效果图：

3、二级或多级菜单

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Ext.menu.Menu菜单栏</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {var toolbar = Ext.create("Ext.Toolbar", {renderTo: Ext.getBody(),width: 500});var category = new Ext.menu.Menu({ignoreParentClicks: true,plain: true,items: [{text: "服装服饰",menu: new Ext.menu.Menu({ignoreParentClicks: true,items: [{text: "特色服饰",menu: new Ext.menu.Menu({items: [{text: "婚纱礼服"}, {text: "职业套装"}, {text: "舞台装"}]})}, {text: "时尚休闲"}]})}, {text: "数码家电"}]});toolbar.add({text: "商品分类",menu: category});});</script>
</head>
<body>
</body>
</html>

效果图：

4、具有选择框的菜单

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>动态更新消息文字</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {var toolbar = new Ext.toolbar.Toolbar({renderTo: Ext.getBody(),width: 300});var themeMenu = new Ext.menu.Menu({items: [{text: "主题颜色",menu: new Ext.menu.Menu({items: [{text: "红色主题",checked: true,group: "theme",checkHandler: onItemCheck}, {text: "蓝色主题",checked: false,group: "theme",checkHandler: onItemCheck}, {text: "灰色主题",checked: false,group: "theme",checkHandler: onItemCheck}]})}, {text: "是否启用",checked: false}]});toolbar.add({text: "选择风格",menu: themeMenu});function onItemCheck(item) {Ext.MessageBox.alert(item.text);}});</script>
</head>
<body>
</body>
</html>

效果图：

转载于:https://www.cnblogs.com/libingql/archive/2012/04/14/2446847.html

Ext.menu.Menu菜单栏相关推荐

[转]ExtJs4 笔记（13） Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更...
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其 ...
Android的Menu状态动态设置方法onPrepareOptionsMenu(Menu menu) (转载)
覆盖onPrepareOptionsMenu(Menu menu)这个方法非常的好用,我们可以定义boolean值来进行判断,如果满足条件就可以把菜单栏动态设置成某些状态,比如是否可见,text值等等 ...
Python之tkinter：动态演示调用python库的tkinter带你进入GUI世界(Menu/Menu的Command)
Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(Menu/Menu的Command) 目录 tkinter应用案例 1.添加右键弹出菜单 2.点击一个按钮弹 ...
Android无菜单键，如何触发onCreateOptionsMenu(Menu menu)
文章目录小结问题及解决无法触发onCreateOptionsMenu(Menu menu) 修改配置文件解决使用一个按钮来触发其它办法参考小结现在的Android有三个键: 任务键,H ...
Android Menu菜单栏
Android Menu菜单栏效果图 Android Menu菜单栏菜单: 菜单是许多类型的应用程序中的通用用户界面组件.要提供熟悉且一致的用户体验,您应该使用MenuAPI在活动中呈现用户操作和 ...
MFC基于对话框上插入MENU菜单栏并点击菜单弹出新窗口
一.创建基于对话框的应用程序框架 1.选择菜单项文件->新建->项目,弹出"新建项目"对话框. 2.直接选择"MFC应用程序"或左侧面板中模板的Vi ...
Android的菜单栏Menu用法详解（超详细）
菜单栏Menu用法讲解菜单是Android应用中非常重要且常见的组成部分.能够极大的节省我们页面的使用空间,提高页面的利用率. 安卓常用的菜单有三种: OptionMenu:选项菜单,android ...
Toolbar添加菜单栏Menu
1.res中menu包下新建菜单布局 2.Activity中 1)关联菜单布局 public boolean onCreateOptionsMenu(Menu menu) {//导入菜单布局getMe ...
Coolite Toolkit学习笔记五：常用控件Menu和MenuPanel
Coolite Toolkit里的Menu控件和其他的.NET Web控件不一样,如果只是设计好了Menu或是通过程序初始化菜单项,菜单是不会呈现在界面上的,因为Coolite Toolkit规定Me ...

Ext.menu.Menu菜单栏

Ext.menu.Menu菜单栏相关推荐

最新文章

热门文章