`
simplehumn
  • 浏览: 186572 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

Ext.Toolbar异步加载菜单

    博客分类:
  • EXT
阅读更多
09年用Ext2.2.1,做了个Ext.Toolbar菜单,前几天又涉及到这样的菜单(Ext3.3.1),于是把原来的代码拷贝过来,居然还能用,在这里备份一下。
在网上也找过Ext.Toolbar异步加载的资料,说的不太详细,有些我看不太懂,但确实有menuStore这类的东西,后台动态加载,参考网址http://www.sencha.com/forum/showthread.php?70436-Toolbar-or-Menu-with-Json-items
http://www.lubber.de/extjs/storemenu/
不过我没看懂怎么用
以下是我自己写的一个循环,能在3层或3层菜单以内起作用,只需把对象属性换成自己的对象属性就行了。
JSP代码,需要引用java.util.List,和自己的menu对象类
 <%@ page contentType="text/html; charset=UTF-8"%>
 <% String path = request.getContextPath(); %>
 <%@ page import="com.xxx.xxx.model.*,java.util.*" %>

以下是菜单for循环
<%
//菜单树
List mList = (List)request.getAttribute("menuList");
Object[] obj = mList.toArray();
String menuStr = "'-'";	//开始的分隔符
boolean flag = false;
boolean flag2 = false;
int StrLength = 0;//定义子菜单头部字符串的长度,用来加{},{}之间的逗号
int StrLength2 = 0;//定义子菜单2头部字符串的长度,用来加{},{}之间的逗号
for(int i=0;i<obj.length;i++){
	MenuInfo menu1 = new MenuInfo();
	menu1 = (MenuInfo)obj[i];
	if(menu1.getMenuParentId().equals("rooto")){	//第一层,导航栏上的显示菜单
		menuStr += ",{";
		menuStr += "text:'";

		
		menuStr += menu1.getMenuName();
		menuStr += "'";
		String menuStr2 = "";	//定义一个字符串,接收第二层——下拉菜单
		
		String pid=menu1.getMenuParentId();
		flag = false;
		for(int j=0;j<obj.length;j++){
		
			MenuInfo menu2 = new MenuInfo();
			menu2 = (MenuInfo)obj[j];
			if(menu2.getMenuParentId().equals(menu1.getMenuId())){
				if(menuStr2.length()==0){	//new一个menu
					menuStr2 += ",menu:new Ext.menu.Menu({items:[";
					StrLength = menuStr2.length();	
				}
				if(menuStr2.length()> StrLength){
					menuStr2 += ",";
				}
				menuStr2 += "{text:'";
				menuStr2 += menu2.getMenuName();
				menuStr2 += "'";
				
				String menuUrl2 = "";
				//加第二层菜单的listener
				if(menu2.getRptName()!=null && !menu2.getRptName().equals("null") 
						&& menu2.getRptNamecn()!=null && !menu2.getRptNamecn().equals("null")){
				//if(menu2.getMenuUrl()!=null && !menu2.getMenuUrl().equals("null")){
					
					menuUrl2 = menu2.getRptName() + "_" + menu2.getRptNamecn();
					menuStr2 += ",listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id);  ";
					menuStr2 += "if (!n) {    n = tab.add({ 'id':node.id, 'title':node.text, ";
					menuStr2 += "closable:true, html:'<iframe scrolling=\"auto\" frameborder=\"0\" width=\"100%\" height=\"100%\" ";
					//menuStr2 += path + menu2.getMenuUrl();
					menuStr2 += "src=\""+ path +"/login/reportview.htmw?reportnameframe=" + menu2.getRptName() +"&rptName=" + menuUrl2 
							+"&rcType="+ menu2.getRcType() +"&reportenname="+ menu2.getRptNamecn()
							+"\" ></iframe>' });   }   tab.setActiveTab(n);  }}";
				}
				
					//第三层(开始)
					String menuStr3 = "";	//定义一个字符串,接收第三层菜单
					String pid2=menu1.getMenuParentId();
					flag2 = false;
					for(int k=0;k<obj.length;k++){
						MenuInfo menu3 = new MenuInfo();
						menu3 = (MenuInfo)obj[k];
						if(menu3.getMenuParentId().equals(menu2.getMenuId())){
							if(menuStr3.length()==0){	//new一个menu
								menuStr3 += ",menu:new Ext.menu.Menu({ items:[";
								StrLength2 = menuStr3.length();
							}
							if(menuStr3.length()> StrLength2){
								menuStr3 += ",";
							}
							menuStr3 += "{text:'";
							menuStr3 += menu3.getMenuName();
							menuStr3 += "'";	
							
							String menuUrl3 = "";
							//加第三层(最后一层)菜单的listener
							if(menu3.getRptName()!=null && !menu3.getRptName().equals("null") 
								&& menu3.getRptNamecn()!=null && !menu3.getRptNamecn().equals("null")){
							//if(menu3.getMenuUrl()!=null && !menu3.getMenuUrl().equals("null")){
								menuUrl3 = menu3.getRptName() + "_" + menu3.getRptNamecn();
								menuStr3 += ",listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id);  ";
								menuStr3 += "if (!n) {    n = tab.add({ 'id':node.id, 'title':node.text, ";
								menuStr3 += "closable:true, html:'<iframe scrolling=\"auto\" frameborder=\"0\" width=\"100%\" height=\"100%\" ";
								menuStr3 += "src=\""+ path +"/login/reportview.htmw?reportnameframe=" + menu3.getRptName() +"&rptName=" + menuUrl3 
								+"&rcType="+ menu3.getRcType() +"&reportenname="+ menu3.getRptNamecn()
								+"\" ></iframe>' });   }   tab.setActiveTab(n);  }}";
							}
							
							/**
								这一块留下来等待菜单扩展
							*/									
							menuStr3 += "}";
							flag2 = true;
						}							
					}
					if(flag2==true && !pid2.equals(menu2.getMenuId())){	//如果有子节点并且循环到列表的最后一行也加]}),然后跳出
							menuStr3 += "]})";
					}
					menuStr2 += menuStr3;
					//第三层(结束)
					
				menuStr2 += "}";
				flag = true;
			}
			
		}
		if(flag==true && !pid.equals(menu1.getMenuId())){
				menuStr2 += "]})";
		}
		menuStr += menuStr2;
		menuStr += "},'-'";
	}
}
%>

以下为JS代码,当然要在JSP文件里面有这个renderTo的标签<div id="toolbar"></div>,或者按照自己的需要写。
<script type="text/javascript">
Ext.onReady(function(){
	var tb = new Ext.Toolbar();
	tb.render('toolbar');
	tb.add(<%=menuStr %>);
	tb.doLayout();
});
</script>

后台java代码,其实只需要把对象的属性封装好直接仍出来,前台能拿到对象的属性(菜单名称、url等)就行
this.getRequest().setAttribute("menuList", ls);

ls为List<Object>集合
分享到:
评论

相关推荐

    extjs帮助文档pdf版

    - `Ext.data.MemoryProxy.loadData(data)`: 加载数据。 - `Ext.data.MemoryProxy.getAt(index)`: 获取指定索引的数据。 #### 30. Ext.data.ScriptTagProxy 类 (P.25) - **概述**:通过`&lt;script&gt;`标签获取数据。 -...

    ExtJS-3.4.0系列目录

    3. **Ext.toolbar.Toolbar和Ext.menu.Menu** - **工具栏(Toolbar)**:通常位于窗口或面板的顶部或底部,用于放置按钮、菜单和其他操作。你可以通过Ext.toolbar.Toolbar创建一个工具栏,并添加各种元素,如按钮、...

    Packtpub.Ext.JS.3.0.Cookbook.Oct.2009

    2. **组件库**:详细讲解各种UI组件,如面板(Panel)、表格(Grid)、表单(Form)、菜单(Menu)、工具栏(Toolbar)等,以及如何自定义和组合这些组件。 3. **数据绑定**:阐述如何使用Store和Model进行数据管理...

    Ext3.0 api帮助文档

    - **Ext.toolbar.Toolbar**: 显示按钮、分割线、文本等工具栏元素。 - **Ext.menu.Menu**: 创建下拉菜单,常用于按钮的右键菜单或工具栏的下拉菜单。 10. **其他功能** - **Ajax请求(Ajax Requests)**: 使用...

    老师整理的extjs学习笔记

    它支持异步加载子节点,以及节点的拖放等功能。 **9.2 构建一棵静态的树** 构建一棵静态的树通常需要预先定义好树的数据结构,然后通过 `Ext.tree.TreePanel` 的配置选项来展示。 **9.3 构建动态的树** 构建动态...

    Ext3.0英文API.CHM

    - **Ext.toolbar**:工具栏组件,可以添加按钮、下拉菜单等。 - **Ext.window**:弹出窗口组件,常用于对话框和浮动面板。 - **Ext.menu**:菜单系统,提供上下文菜单和主菜单功能。 5. **Ajax和Store** - **...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    在ExtJS4.2中,我们可以使用`Ext.menu.Menu`类来创建菜单,并通过监听事件或异步请求来更新菜单内容。例如,我们可以通过以下步骤实现动态菜单: 1. 创建基础菜单结构,定义菜单项。 2. 使用`itemId`或`id`为每个...

    ASP.NET与EXT实现动感后台管理界面

    为了优化用户体验,开发者还可以利用EXT.js的Ext.LoadMask进行加载提示,避免用户在等待响应时感到不耐烦。EXT.js的Ext.MessageBox则可以用于弹出警告、确认和信息提示框,增强交互性。 总之,"ASP.NET与EXT实现...

    ExtJS 3.2的中文参考手册

    - **分页栏 (Toolbar)**: 可以通过配置Grid的底部工具栏来实现分页功能,例如:`grid.bbar = new Ext.PagingToolbar({ store: store, displayInfo: true, displayMsg: '显示 {0} - {1} 条记录,共 {2} 条记录', ...

    ext说明文档和查阅手册

    6. **数据模型和存储**:EXT的数据模型(Model)和数据存储(Store)机制,实现了与服务器端的数据交换,支持异步加载和远程过滤,是EXT数据驱动UI的关键。 7. **树形结构**:TreePanel组件允许展示和操作层次结构...

    EXT 中文手册.pdf

    - **概述**:EXT内置了对Ajax的支持,使得异步请求变得非常简单。 - **请求方式**:EXT支持多种服务器端脚本语言,如PHP、ASP.NET、ColdFusion等。 - **示例**: - **PHP**:可以使用EXT的Ajax请求与PHP服务端进行...

    EXT 中文手册内具实例代码

    - **Ajax 通信**:Ext 提供了简单的方法来进行异步数据交换。 - **服务器端支持**:支持多种服务器端技术,如 PHP、ASP.NET、ColdFusion 等。 - **请求发送**:可以使用 `Ext.Ajax.request` 方法发送 Ajax 请求。 -...

    extjs详细讲解!并给出生动例子!并含有多个ext帮助文档

    - **Toolbar**: 用于放置按钮、菜单等工具栏组件。 **4. MVC模式** ExtJS采用MVC(Model-View-Controller)架构,将应用分为三个部分,增强了代码的组织性和可维护性。Controller负责监听和处理事件,Model管理数据...

    EXT例子,可以直接跑

    4. 动态加载和异步通信:EXT利用AJAX技术实现页面的动态加载和与服务器的异步通信,这在办公系统中至关重要,因为通常需要实时更新数据或者根据用户操作获取新的信息。`Ext.Ajax`或`Store`的远程代理可以实现这一...

    官方Ext3.0实例包

    5. 工具栏(Toolbar)和菜单(Menu):提供常用操作按钮和下拉选项。 6. 提示框(Dialog)和窗口(Window):弹出式组件,常用于提示信息或进行用户交互。 三、学习方法 1. 查阅文档:官方文档是学习Ext3.0的重要...

    ext-3.2.2.zip

    ExtJS提供了工具栏(Toolbar)和菜单(Menu)组件,便于添加各种操作按钮和下拉选项,增强了用户体验。 8. **图表组件**: 虽然ExtJS 3.2.2版本的图表功能相对有限,但还是包括了一些基本的图表类型,如柱状图、...

    很绚丽的EXT例子(功能还蛮多的)

    5. **EXT Toolbar and Menus**:EXT的工具栏(Toolbar)和菜单(Menu)组件提供了丰富的导航和操作选项。例子可能包括了自定义图标、分组按钮和下拉菜单。 6. **EXT Layouts**:EXT支持多种布局方式,如边界布局...

    EXT样式的页面原型

    EXT是一个前端框架,尤其在企业级应用中广泛应用,因为它提供了一套完整的组件系统,包括表格、网格、面板、窗口、菜单等,使得开发者可以快速地构建复杂的用户界面。 1. EXT框架:EXT是一个开源的JavaScript库,由...

    Ext.Net1.0(Examples)RC2实例

    1. **组件库**:Ext.NET提供了大量的UI组件,如面板(Panel)、表格(GridPanel)、表单(FormPanel)、树形视图(TreePanel)、菜单(Menu)、工具栏(Toolbar)等,这些组件都有丰富的配置选项和事件处理机制。...

    ext-3.1.1源码

    它可以用于导航菜单、文件系统视图等场景,支持拖放操作和动态加载子节点。 7. **图表组件**: 虽然EXTJS 3.1.1的图表功能相比后来版本较为有限,但依然提供了一些基础的图表类型,如柱状图、折线图、饼图等,可以...

Global site tag (gtag.js) - Google Analytics