使用Ext Js3.2实现的具有选择框的菜单，使用Ext.menu.Menu来实现

最新推荐文章于 2016-09-26 17:01:04 发布
最新推荐文章于 2016-09-26 17:01:04 发布
阅读量2.5k 收藏
点赞数
分类专栏： Ext Js 文章标签： ext menu stylesheet 产品 function string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshisap/article/details/6636296
版权

1：menu.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用ext实现helloworld</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
	<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext3.2/ext-all.js"></script>
	<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript">
			 Ext.onReady(function() {
				var newT = new Ext.Toolbar({
					width: '99%',
					renderTo: Ext.getBody()
				 });
				
				//关于我们的菜单
			var aboutUSMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items: [{
				   	text: '公司地址'
				}, {
				    text: '联系方式'
				}, {
				    text: '公司经理'
				}, {
				    text: '公司财产'
				}]
			});
			
			//新闻中心的菜单
			var newsCenterMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items: [{
				   	text: '新闻添加'
				}, {
				    text: '新闻删除'
				}, {
				    text: '新闻修改'
				}, {
				    text: '新闻查询'
				}]
			});
		
			//产品中心的菜单
			var productCenterMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items: [{
				   	text: '产品添加'
				}, {
				    text: '产品删除'
				}, {
				    text: '产品修改'
				}, {
				    text: '产品查询'
				}]
			});
		
			//客户服务的菜单
			var clientServiceMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items: [{
				   	text: '客户添加'
				}, {
				    text: '客户删除'
				}, {
				    text: '客户修改'
				}, {
				    text: '客户查询'
				}]
			});
				
			//经典案例的菜单
			var solutionMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items: [{
				   	text: '案例添加'
				}, {
				    text: '案例删除'
				}, {
				    text: '案例修改'
				}, {
				    text: '案例查询'
				}]
			});
			
			//高级管理的菜单
			var higeManageMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items: [{
				   	text: '管理财务'
				}, {
				    text: '人事管理'
				}]
			});
		
			//系统管理的菜单 
			var systemManageMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items: [{
				   	text: '基本管理'
				}, {
				    text: '样式管理'
				}, {
				    text: '栏目管理'
				}, {
				    text: '功能管理',
				    menu: new Ext.menu.Menu({
				    	items: [{
				    		text: '用户注册管理'
				    	}, {
				    		text: '删除用户管理'
				    	}]
				    })
				}, {
				    text: '菜单管理'
				}, {
				    text: '首页管理',
				    menu: new Ext.menu.Menu({
				    	items: [{
				    		text: '红色主题',
				    		checked: false,
				    		group: 'theme',
				    		checkHandler: onItemClick   //设置该按钮为单选按钮
				    	}, {
				    		text: '蓝色主题',
				    		checked: true,
				    		group: 'theme',
				    		checkHandler: onItemClick   //设置该按钮为单选按钮
				    	}, {
				    		text: '黑色主题',
				    		checked: false,
				    		group: 'theme',
				    		checkHandler: onItemClick   //设置该按钮为单选按钮
				    	}]
				    })
				}, {
				    text: '管理员列表'
				}]
			});
				
			function onItemClick(item) {
				alert(item.text);
			}
			
			//人才管理的菜单
			var humanManageMenu = new Ext.menu.Menu({
				shadow: 'frame',
				items: [{
				   	text: '人员添加'
				}, {
				    text: '人员删除'
				}, {
				    text: '人员修改'
				}, {
				    text: '人员查询'
				}]
			});
			
				newT.add({
						text: '关于我们',
						menu: aboutUSMenu
					});
				
				newT.add({
					text: '新闻中心',
					menu: newsCenterMenu
				});
				
				newT.add({
					text: '产品中心',
					menu: productCenterMenu
				});
				
				newT.add({
					text: '客户服务',
					menu: clientServiceMenu
				});
				
				newT.add({
					text: '经典案例',
					menu: solutionMenu
				});
				
				newT.add({
					text: '高级管理',
					menu: higeManageMenu
				});
				
				newT.add({
					text: '系统管理',
					menu: systemManageMenu
				});
				
				newT.add({
					text: '个人管理',
					menu: humanManageMenu
				});
			 
				newT.doLayout();
		    
		});
			 
	</script>
  </head>
  
  <body>
 
  </body>
</html>


2：程序效果图


总之，在一个或者多个同级菜单中只能选择一项的菜单为选择菜单，在菜单中不仅可以显示按钮，同时还可以显示带选择框的功能菜单

不仅如此，还可以在菜单上显示复选框等一系列的按钮，只需要设置checkbox和radio等属性即可



波哥的技术积累
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
EXT3.2 多选下拉框
04-06
extjs3.2 多选下拉框 复选下拉框
Extjs3 多选下拉框LovCombo
08-29
Extjs3 多选下拉框LovCombo，Extjs3 多选下拉框LovCombo
ExtJS3.2 下拉列表默认选择
cw370008359的专栏
12-29 1249
labelsizestore.on('load',function(store,records,options){  if(store.data.length>0){   Ext.getCmp('F_MarkSizeId').setValue(records[0].json.f_MarkSizeId);  } });   用SetValue方法   如果需要触发select方法，使
ExtJs教程----带复选框的菜单
早起吃虫的博客
09-26 1654
先来张效果图： 代码如下： 需要注意的是:需要先定义TreeStore,再定义MenuTestTree,最后定义MenuTestWithCheckBox //定义获取菜单数据的store var MenuStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', ur
基于内存多叉树的Ext JS无限级树形菜单实现方案
01-26
基于内存多叉树的Ext JS无限级树形菜单实现方案，一种构建多级JSON的方法；一次性构造多级JSON字符串，一次性生成树形菜单。
Ext Js权威指南(.zip.001
09-26
Ex4.0共2个压缩包特性，《ext js权威指南》 前　言 第1章　ext js 4开发入门 / 1 1.1　学习ext js必需的基础知识 / 1 1.2　json概述 / 3 1.2.1　认识json / 3 1.2.2　json的结构 / 3 1.2.3　json的例子 / 4 1.2.4　...
精通JS脚本之ExtJS框架.part2.rar
03-02
5.4.7 具有选择框的菜单 第6章 页面元素与模板 6.1 构成用户界面的元素 6.2 获取页面元素 6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法...
精通JS脚本之ExtJS框架.part1.rar
03-02
5.4.7 具有选择框的菜单 第6章 页面元素与模板 6.1 构成用户界面的元素 6.2 获取页面元素 6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法...
基于JAVA的记事本设计报告.doc
最新发布
05-30
" " " " " " " " " " " " " " " " " 格式菜单：包括字体、颜色、自动换行，其中为自动换行菜单项添加了复选框" "，应用类JcheckBoxMenuItem创建 " " " " " " " " " " " " " " " " 帮助菜单：包括帮助主题、关于写字...
复选框的且带右键菜单的树代码
09-03
下面是复选框的且带右键菜单的树代码。 HTML code Ext.BLANK_IMAGE_URL = "../resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); ...
Ext Web前端开发框架
05-11
作为Web前端开发的框架，对ext 3.x进行了深度改进，透过源码，看到了javascript的神奇用法。由于文件超过上传限制，删掉了docs文档
手风琴折叠菜单
06-06
手风琴折叠菜单效果！
Ext_菜单组件_Ext.menu.Menu
小冷在努力~
09-18 3353
连接地址：http://blog.csdn.net/lulu_jiang/article/details/5473035 菜单组件常用配置： [javascript] view plain copy /*  Ext.menu.Menu主要配置项表:  items          Mixed                   有效
使用Ext.js3.2实现简单的菜单栏，使用类Ext.menu.Menu
张波的技术积累
07-26 1867
1：menu1.jsp <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.ge
EXTJS多选下拉树
……
01-15 992
本组件是由单选下拉数改的，单选下拉树博客地址：http://blog.csdn.net/hao_ds/article/details/50522058 /** *下拉树类(Jelly) */ Ext.define('Ext.ux.TreeCombox', { extend: 'Ext.form.field.Picker', xtype: 'treecombox',
Extjs menu菜单怎么用
学习也休闲
10-16 2823
文章转载于： Extjs menu菜单的简单用法   http://www.studyofnet.com/news/156.html   在ExtJS中，菜单项由Ext.menu.Item类定义，该类直接继承自Ext.menu.BaseItem，我们只需创建一个菜单Menu对象，然后往Menu对象中加入菜单项，然后在需要显示菜单的时候调用菜单Menu对象的show或showAt方法即可在指
Ext Js 3.2中Ext.ajax.request方法详解
热门推荐
张波的技术积累
11-28 2万+
1：Ext.Ajax.request([Object options]):Number     options中的一些属性和含义如下：     url：指定请求的服务端url    params： 指定要传递的参数，可以是一个包含参数名称及值的对象，也可以是类似于name=xx&birthday=1978-1-1的url编码字符串，或者是一个能返回上述两种内容
使用ext js6调用电脑摄像头实现拍照并且保存录像的例子
03-26
很遗憾，由于安全性和隐私问题，浏览器不允许JavaScript直接访问摄像头和麦克风，除非用户授予许可。因此，您需要使用WebRTC技术来访问摄像头。以下是一个使用WebRTC和ExtJS 6创建视频聊天的示例代码： ```javascript Ext.define('MyApp.view.video.VideoWindow', { extend: 'Ext.window.Window', requires: [ 'Ext.container.Container', 'Ext.layout.container.VBox' ], width: 640, height: 480, layout: 'fit', maximizable: true, initComponent: function() { var me = this; me.items = { xtype: 'container', layout: 'fit', items: { xtype: 'video', autoEl: 'video', poster: 'resources/images/placeholder.png', controls: true, width: '100%', height: '100%' } }; me.callParent(arguments); me.on('afterrender', me.initWebRTC, me); }, initWebRTC: function() { var me = this, video = me.down('video'); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { video.setSrcObject(stream); }) .catch(function(err) { console.log('Unable to get stream', err); }); } else { console.log('WebRTC not supported'); } } }); ``` 此代码将创建一个视频窗口，该窗口使用HTML5 `<video>`元素显示摄像头的视频流。initWebRTC方法使用navigator.mediaDevices.getUserMedia方法访问摄像机，如果该方法未定义或遇到错误，则将打印错误消息。使用该模块就能够访问摄像头进行视频聊天功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

波哥的技术积累

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值