菜单栏的创造 _Web前端

菜单栏的创建

1.创建一个简单的菜单栏

<!-- Ext.menu.Menu主要配置项目表：
	items：一个有效菜单项的数组
	shadow: 阴影显示方式默认为true即sides方式（sides：左右下;frame:左右下上;drop:下右）
菜单项主要类型表：
	Ext.menu.TextItem：文本元素
	Ext.menu.Separator：菜单分隔符
	Ext.menu.CheckItem：包含选择框的菜单项,也可以是一个单选组
菜单组件常用的方法表：
	addElement():添加Element元素
	addItem()：添加一个已存在的菜单项
	addmenuItem()：根据一个菜单项配置对象添加菜单项
	addSeparator()：添加菜单分隔符
	addText()：添加一个字符串 -->
<HTML>
<HEAD>
	<TITLE>使用EXT输出HelloWorld</TITLE>
	<!-- 导入extjs配置 … ... -->
	<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';
			var Toolbar = new Ext.Toolbar({
				width: 300
			});
			var fileMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items:[{
					text: '新建',
					handler: onMenuItem
				},{
					text: '打开',
					handler: onMenuItem
				},{	
					text: '关闭',
					handler: onMenuItem}]
			});
			var editMenu = new Ext.menu.Menu({
				shadow: 'drop',
				items:[{
					text: '复制',
					handler: onMenuItem
				},{
					text: '粘贴',
					handler: onMenuItem
				},{
					text: '剪切',
					handler: onMenuItem
				}]
			});
			Toolbar.add({
					text: '文件',
					menu: fileMenu
				},{
					text: '编辑',
					menu: editMenu
				}
			);
			function onMenuItem(item){
				alert(item.text);
			}
			new Ext.Panel({
				renderTo: 'toolbar',
				width: 300,
				height: 200,
				tbar: Toolbar
			});
		});
	</script>
</HEAD>
<body id="toolbar">
</body>
</HTML>

?2.创建一个含有二级菜单的菜单栏

<HTML>
<HEAD>
	<TITLE>使用EXT输出HelloWorld</TITLE>
	<!-- 导入extjs配置 … ... -->
	<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';
			var Toolbar = new Ext.Toolbar({
				width: 300
			});
			var infoMenu = new Ext.menu.Menu({ //一级菜单
				items:[{
					text: '个人信息',  
					menu: new Ext.menu.Menu({  //二级菜单	
						items:[{
								text: '身高',
								handler: onMenuItem
							},{
								text: '体重',
								handler: onMenuItem,
								menu: new Ext.menu.ColorMenu({
									handler: onClickColor
								})
							},{
								text: '生日',
								handler: onMenuItem,
								menu: new Ext.menu.DateMenu({
									handler: onClickDate
								})
							}]
					})
				},{
					text: '公司信息'
				}]
			});
			Toolbar.add({
					text: '设置',
					menu: infoMenu
			});
			function onMenuItem(item){
				alert(item.text);
			}
			function onClickDate(dm,date){
				alert(date.format('Y-m-j'));
			}
			function onClickColor(dm,color){
				alert(color);
			}
			new Ext.Panel({
				renderTo: 'toolbar',
				width: 300,
				height: 200,
				tbar: Toolbar
			});
		});
	</script>
</HEAD>
<body id="toolbar">
</body>
</HTML>

?3.利用适配器创建菜单栏

<HTML>
<HEAD>
	<TITLE>使用EXT输出HelloWorld</TITLE>
	<!-- 导入extjs配置 … ... -->
	<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';
			var Toolbar = new Ext.Toolbar({
				width: 300
			});
		
			var fileMenu = new Ext.menu.Menu({
				items:[
				       	new Ext.menu.Adapter(new Ext.Button({
				       		text: '新建'
				       		//handler: onButtonClick
				       	})),
				       	new Ext.menu.Adapter(new Ext.Button({
				       		text: '打开'
				       		//handler: onButtonClick
				       	})),
				       	new Ext.menu.Adapter(new Ext.Button({
				       		text: '关闭'
				       		//handler: onButtonClick
				       	})),
				       ]
			});
			/* function onButtonClick(btn){
				alert(btn.text);
			} */
			
			Toolbar.add({
					text: '文件',
					menu: fileMenu
			});
			new Ext.Panel({
				renderTo: 'toolbar',
				width: 300,
				height: 200,
				tbar: Toolbar
			});
		});
	</script>
</HEAD>
<body id="toolbar">
</body>
</HTML>

?4.带有选择框的菜单栏

<HTML>
<HEAD>
	<TITLE>使用EXT输出HelloWorld</TITLE>
	<!-- 导入extjs配置 … ... -->
	<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./../ext/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';
			var Toolbar = new Ext.Toolbar({
				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){
				alert(item.text);
			}
			new Ext.Panel({
				renderTo: 'toolbar',
				width: 300,
				height: 200,
				tbar: Toolbar
			});
		});
	</script>
</HEAD>
<body id="toolbar">
</body>
</HTML>