Ext.menu.Menu实例

最新推荐文章于 2025-12-07 19:41:07 发布

原创最新推荐文章于 2025-12-07 19:41:07 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #百度 #JavaScript #CSS #ViewUI

EXTJS 专栏收录该内容

8 篇文章

订阅专栏

本文通过四个实例展示了如何使用ExtJS框架创建工具栏和下拉菜单，包括简单的按钮组、带阴影效果的菜单、多级菜单以及带有图标样式的工具栏组件。

1、

<head>
<script type="text/javascript">
  		Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
  		Ext.onReady(function(){
  			//工具条
  			var toolbar = new Ext.Toolbar({
  				renderTo:'toolbar',
  				width:500,
  				height:30
  			});
  			
  			//添加菜单到工具条
  			toolbar.add(
  				{text:'新建'},
  				'-',
  				{text:'复制'},
  				'-',
  				{text:'黏贴'},
  				'-',
  				{text:'剪切'},
  				'-',
  				new Ext.form.TextField({
  					width:100
  				}),
  				'->',
  				document.getElementById('a'),
  				'-',
  				'菜单实例'
  			);
		});
  	</script>
</head>
<body>
<div id="toolbar"></div>
<a href="http://www.baidu.com" id="a">百度</a>
</body>

2、

<head>
<script type="text/javascript">
  		Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
  		Ext.onReady(function(){
  			//工具条
  			var toolbar = new Ext.Toolbar({
  				renderTo:'toolbar',
  				width:window.screenX,
  				height:30
  			});
  			//文件菜单
  			var fileMenu = new Ext.menu.Menu({
  				//设置菜单四条边都有阴影
  				shadow : 'frame',
  				//添加菜单项
  				items:[
					{
						text:'新建',
						handler:onMenuCheck
					},
					{
						text:'打开',
						handler:onMenuCheck
					},
					{
						text:'保存',
						handler:onMenuCheck
					}
  				]
  			});
  			//编辑菜单
  			var editMenu = new Ext.menu.Menu({
  				shadow : 'frame',
  				items:[
					{
						text:'复制',
						handler:onMenuCheck
					},
					{
						text:'黏贴',
						handler:onMenuCheck
					},
					{
						text:'剪切',
						handler:onMenuCheck
					}
  				]
  			});
  			//添加菜单到工具条
  			toolbar.add(
  				{text:'文件',menu:fileMenu},
  				{text:'编辑',menu:editMenu}
  			);
  			//菜单项被点击时候的回调函数
  			function onMenuCheck(item){
  				alert(item.text);
  			}
		});
  	</script>
  </head>
  
  <body>
  	<div id="toolbar"></div>
  </body>

3、

<head>
<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
  			//工具条
  			var toolbar = new Ext.Toolbar({
  				renderTo:'toolbar',
  				width:window.screenX,
  				height:30
  			});
  			//文件菜单
  			var infoMenu = new Ext.menu.Menu({
  				//设置菜单四条边都有阴影
  				shadow : 'frame',
  				//添加菜单项
  				items:[
					{
						text:'个人信息',
						menu:new Ext.menu.Menu({
							items:[
								{text:'身高',handler:onMenuCheck},
								{text:'体重',handler:onMenuCheck},
								{
									text:'生日',
									menu:new Ext.menu.DateMenu({
									})
								}
							]
						})
					},
					{
						text:'公司信息',
						handler:onMenuCheck
					}
  				]
  			});
  			//添加菜单到工具条
  			toolbar.add(
  				{text:'信息',menu:infoMenu}
  			);
  			
  			//菜单项被点击时候的回调函数
  			function onMenuCheck(item){
  				alert(item.text);
  			}
		});
  	</script>
  </head>
  
  <body>
  	<div id="toolbar"></div>
  </body>

4、

<head>
<STYLE TYPE="text/css">
		.newIcon { background-image: url(images/new.gif) !important; }
		.copyIcon {	background-image: url(images/copy.gif) !important; }
		.pasteIcon {background-image: url(images/paste.gif) !important; }
		.cutIcon {background-image: url(images/cut.gif) !important; }
  	</STYLE>
	<script type="text/javascript">
  		Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
  		Ext.onReady(function(){
  			//工具条
  			var toolbar = new Ext.Toolbar({
  				renderTo:'toolbar',
  				width:500,
  				height:30
  			});
  			
  			//添加菜单到工具条
  			toolbar.add(
  				{text:'新建',iconCls:'newIcon'},
  				'-',
  				{text:'复制',iconCls:'copyIcon'},
  				'-',
  				{text:'黏贴',iconCls:'pasteIcon'},
  				'-',
  				{text:'剪切',iconCls:'cutIcon'},
  				'-',
  				new Ext.form.TextField({
  					width:100
  				}),
  				'->',
  				document.getElementById('a'),
  				'-',
  				'菜单实例'
  			);
		});
  	</script>
  </head>
  
  <body>
  	<div id="toolbar"></div>
  	<a href="http://www.baidu.com" id="a">百度</a>
  </body>