`

Ext动态生成菜单

    博客分类:
  • Ext
阅读更多
根据传递过来的参数生成单选和多选菜单,并在单击菜单子项和离开多选菜单项后提交请求
Ext.onReady(function(){
	// 图表报表工具条
	var repImgToolBar; 
	
	// 报表详情工具条
	var repDetailToolBar; 
	
	// 创建单选菜单
	function createChaMenu() { 
		// 对象的显示值
		// analyObjSeleValue是一个数组里面放的是每个菜单的title值,如 =[北京,上海,西安]
		var arr = analyObjSeleValue.split(","); 
		
		// 对象的key
		// objKey是一个数组里面放的是每个菜单的name值,如 =[beijing,shanghai,xian],与上面的对应
		var objKey = Ext.get("hide_ayobj_btn").dom.innerHTML.split(","); 
		
		var menuArray = []; 
		var curMenu; 
		for ( var i = 0; i < arr.length; i++) { 
			curMenu = { 
				text : arr[i], 
				name : i, 
				handler : function(text) { 
					alert(text.text + " , " + objKey[text.name]); 
					// 判断是否为局向
					if (analyObjValue == "landir") { 
						var opc = objKey[text.name].split("-")[0]; 
						var dpc = objKey[text.name].split("-")[1]; 
						
						var p1_sdrwhere = Ext.get('p1_where'); 
						p1_sdrwhere.dom.value = " dpc = 11500 "; 
					} 
					
					var p1_sdrwhere = Ext.get('p1_where'); 
					p1_sdrwhere.dom.value = " dpc = 11500 "; 
					
					// 提交表单
					var sdrFormImg = Ext.get('sdrFormImg'); 
					sdrFormImg.dom.submit(); 
				} 
			}; 
			menuArray.push(curMenu); 
		} 
		return menuArray; 
	} 
	
	// 创建多选菜单
	function createTarMenu(rownum) { 
		var menuArray = []; 
		var curMenu; 
		
		// 默认加载第一个分析指标(grid第一行)
		// changeAndKPIName = ["3#attemptcount,alerting...bability,sdcchdropcount",
		// "7#xldhl,tchdropcount,zp...rduration,pjzysc,pjthsc"]
		var targetArray = changeAndKPIName[rownum].split("#")[1].split(","); 
		
		// 默认不勾选,传递过来的指标设置为勾选
		for ( var m = 0; m < ay_all_target[0].length; m++) { 
			var isCheck = false; 
			for(var n = 0; n < targetArray.length; n++){ 
				// 有被选择的指标加上勾选状态
				if(targetArray[n] == ay_all_target[0][m].data.name){ 
					isCheck = true; 
				} 
			} 
			curMenu = { 
				checked : isCheck, 
				text : ay_all_target[0][m].data.title, 
				name : ay_all_target[0][m].data.name 
			}; 
			menuArray.push(curMenu); 
		} 
		return menuArray; 
	} 
	
	/**
	 * 为避免重复菜单,每次切换tabPanel时删除工具条和菜单
	 */ 
	function removeMenu() { 
		if (Ext.fly("objchange")) { 
			Ext.fly("objchange").remove(); 
		} 
		if (Ext.fly("targetsele")) { 
			Ext.fly("targetsele").remove(); 
		} 
		if (Ext.fly("repImgMenu")) { 
			Ext.fly("repImgMenu").remove(); 
		} 
	}
	// 动态生成菜单
	// tabVal 是当前的tabPanel对象,tabIndex是生成tabPanel时设定的参数
	// 在点击每个tabPanel时,调用此方法
	function dynamicCreateMenu(tabVal) { 
		var objChangeMenu = []; 
		objChangeMenu = createChaMenu(); 
		
		// first Menu
		var firstMenu = new Ext.menu.Menu( { 
			id : 'objchange', 
			items : objChangeMenu 
		}); 
		var rowIndex = tabVal.tabIndex; 
		var targetSeleMenu = []; 
		targetSeleMenu = createTarMenu(rowIndex); 
		
		// second Menu
		var secondMenu = new Ext.menu.Menu( { 
			id : 'targetsele', 
			items : targetSeleMenu, 
			listeners : { 
				/**
				 * 选中时只保存选中状态,不隐藏
				 * 
				 * @param {Object}
				 *            bi baseItem
				 * @param {Object}
				 *            e check EventObject
				 * @return {TypeName}
				 */ 
				'itemclick' : function(bi, e) { 
					if (bi.checked) { 
						bi.setChecked(false); 
					} else { 
						bi.setChecked(true); 
					} 
					return false; 
				}, 
				
				/**
				 * 让菜单隐藏之提交表单
				 * 
				 * @param {Object}
				 *            em 当前menu
				 */ 
				'beforehide' : function(em) { 
					Ext.each(em.items.items, function(ite) { 
						// 给相应的form里面的域赋值
						// 如果没有选择,隐藏表单中设为0
						if (!ite.checked) { 
							Ext.get("p1_" + ite.name).dom.value = 0; 
						} 
					}); 
					
					// 提交图表对比表单
					var sdrFormImg = Ext.get('sdrFormImg'); 
					sdrFormImg.dom.submit(); 
				} 
			} 
		}); 
		
		repImgToolBar = new Ext.Toolbar( { 
			id : 'repImgMenu', 
			renderTo : 'rightRepImgMenu', 
			style : 'align: right', 
			width : 150, 
			items : [ { 
				text : 'First', 
				menu : firstMenu 
			}, "-", { 
				text : 'Second', 
				menu : secondMenu 
			} ] 
		}); 
	} 
});
1
10
分享到:
评论

相关推荐

    Ext2.2动态生成ColumnModel

    5. **事件监听和响应**:动态生成ColumnModel可能需要监听用户的某些操作,如点击按钮或选择菜单项,然后根据这些事件动态调整ColumnModel。 6. **数据绑定**:如果数据源(Store)的结构发生变化,比如新增字段,...

    ext 自动生成器自动生成组件

    EXT 自动化生成器是一种强大的开发工具,专为EXT框架设计,旨在提高开发效率并减少重复劳动。EXT是一个流行的JavaScript库,主要用于构建富客户端Web应用,尤其在企业级应用中广泛应用。EXT框架提供了丰富的组件库,...

    动态生成ext

    总的来说,"动态生成ext"是一个涵盖广泛的概念,涉及到前端开发的多个方面,包括模块化、动态加载、服务器端渲染、性能优化和安全性等。理解和掌握这些知识点对于高效、安全地开发现代Web应用至关重要。

    Ext树形菜单(我自己做的)

    综上所述,这个自定义的Ext树形菜单组件结合了前端的JavaScript技术(主要为ExtJS)和后端的Java服务(可能用JSP或Spring MVC实现),实现了从服务器动态获取和显示层次数据的功能。开发者可能通过调整配置、扩展...

    Extjs动态加载菜单

    2. **动态生成菜单项**:通过JavaScript代码动态创建菜单项。这可以是在用户触发特定事件(如点击按钮)时,或者根据服务器返回的数据进行。 3. **添加子项**:使用`add`方法向已存在的菜单项中添加子菜单。例如,`...

    EXT实现动态树的功能

    在EXT中实现动态树的功能是一项常见的需求,特别是对于那些需要展示层次结构数据的应用。动态树允许用户在运行时进行编辑、添加、删除和批量操作节点,从而提供更加灵活的数据管理体验。 首先,我们要理解EXT中的树...

    Ext3.X横向菜单导航栏

    总的来说,创建Ext3.X的横向菜单导航栏需要理解`Ext.menu.Menu`和`Ext.menu.Item`的用法,结合JSON数据动态生成菜单,并正确引用库文件和样式文件。通过这样的方法,我们可以构建出功能丰富、易于使用的Web应用程序...

    EXTJS 动态生成下来树形框

    动态生成下拉树形框是EXTJS中一个常见的需求,它允许用户在一个下拉菜单中展示层次化的数据结构,比如组织架构或者文件系统。这篇博客()可能会详细讲解如何实现这个功能。 在EXTJS中,我们通常使用`Ext.tree....

    ext生成树节点带链接

    本文将详细介绍如何在ExtJS中生成树形菜单,并为每个子节点添加链接,以及如何通过点击这些链接触发相应的事件处理或页面跳转。 #### 2. 构建基础环境 为了构建一个能够生成树形菜单的基础环境,我们首先需要引入...

    Ext Designer Preview3.0汉化版,可生成代码

    4. **生成代码**:Ext Designer的一大优势在于它可以生成Ext JS的源代码,这些代码反映了在设计视图中创建的布局和组件。这使得开发者可以深入理解生成的代码,并根据需要进行修改和优化。 在实际开发中,使用Ext ...

    Ext扩展控件-----可以在代码中动态为表格增加一列或者删除一列

    这在需要根据业务需求或者用户交互动态改变列结构的场景下非常有用,例如在数据分析、报表生成或者配置式界面设计中。 要使用这个插件,首先你需要在Grid的配置中引入它。这通常涉及到创建一个Grid实例,并在`...

    ext树形动态菜单 .doc

    `Ext.tree.TreePanel` 是一个功能强大的树形菜单控件,支持自动滚动、动画效果、拖放等功能,并可以通过配置参数进行高度定制。 - **参数详解**: - `autoScroll`: 设置为 `true` 表示当内容超出容器时自动显示...

    Ext 中的Tree实现不同节点不同的右键菜单

    items: buildMenu(record.data) // 根据record的数据动态生成菜单 }); menu.showAt(e.getXY()); // 在鼠标位置显示菜单 } }, ... }); function buildMenu(nodeData) { // 根据nodeData生成对应的菜单项 var...

    Ext Designer+中文补丁+代码生成补丁

    在"Ext Designer+中文补丁+代码生成补丁"这个资源包中,我们可以推测包含以下几个关键部分: 1. **Ext Designer**:这是主要的应用程序,提供了图形化的界面设计界面,支持创建和编辑Ext JS应用的视图层。它具有...

    利用Ext Js生成动态树实例代码

    在讨论Ext Js生成动态树的实例代码之前,我们首先需要对Ext Js框架有一个基础的认识。Ext Js是一个基于JavaScript的框架,主要用于创建丰富的Web应用程序界面。它提供了一套丰富的UI组件,其中就包括用于表示层级...

    Ext 动态树

    在Ext中,"动态树"是指能够根据需求实时生成或更新的树形结构组件。这种组件在数据管理、目录结构展示、层级关系表示等方面非常有用。下面我们将详细探讨Ext动态树的相关知识点。 首先,我们要理解Ext的树...

    EXT安装包4.2.1-1

    1. **组件化**:EXT提供了大量的预构建组件,如表格、面板、窗口、菜单、按钮等,这些组件可以方便地组合起来创建复杂的用户界面。 2. **数据绑定**:EXT支持双向数据绑定,使得视图层和模型层之间的数据同步变得...

    菜单树,包含右击菜单 项目直接把js 导入 如果写成动态读取数据库要将代码稍微改改.树状表包含右击菜单

    若要改为动态读取数据库,你需要修改代码以在运行时根据服务器返回的数据动态生成菜单结构和关联的JavaScript函数。这可能涉及到使用Ajax请求获取数据库中的菜单数据,然后利用JavaScript(可能借助jQuery和Ext JS)...

    Ext官方中文教程(可打包下载)

    从源码生成Ext 基础用法: DomQuery基础 Ext中的事件 简述模板 模板(Templates)的函数 教你创建Ext UI控件 事件的处理 Ext中的继承 Ext的类设计 Ajax通讯 JSON处理方法 函数的原型扩展 组件的使用: Tab标签...

    ext js 中文手册

    模板(Templates)是Ext JS用来处理HTML内容的机制,它允许开发者在JavaScript中编写HTML代码,并在运行时动态地将数据绑定到模板中,生成最终的HTML内容输出。 表单组件是用户与Web应用交互的重要接口,Ext JS提供...

Global site tag (gtag.js) - Google Analytics