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>集合
分享到:
相关推荐
- `Ext.data.MemoryProxy.loadData(data)`: 加载数据。 - `Ext.data.MemoryProxy.getAt(index)`: 获取指定索引的数据。 #### 30. Ext.data.ScriptTagProxy 类 (P.25) - **概述**:通过`<script>`标签获取数据。 -...
3. **Ext.toolbar.Toolbar和Ext.menu.Menu** - **工具栏(Toolbar)**:通常位于窗口或面板的顶部或底部,用于放置按钮、菜单和其他操作。你可以通过Ext.toolbar.Toolbar创建一个工具栏,并添加各种元素,如按钮、...
2. **组件库**:详细讲解各种UI组件,如面板(Panel)、表格(Grid)、表单(Form)、菜单(Menu)、工具栏(Toolbar)等,以及如何自定义和组合这些组件。 3. **数据绑定**:阐述如何使用Store和Model进行数据管理...
- **Ext.toolbar.Toolbar**: 显示按钮、分割线、文本等工具栏元素。 - **Ext.menu.Menu**: 创建下拉菜单,常用于按钮的右键菜单或工具栏的下拉菜单。 10. **其他功能** - **Ajax请求(Ajax Requests)**: 使用...
它支持异步加载子节点,以及节点的拖放等功能。 **9.2 构建一棵静态的树** 构建一棵静态的树通常需要预先定义好树的数据结构,然后通过 `Ext.tree.TreePanel` 的配置选项来展示。 **9.3 构建动态的树** 构建动态...
- **Ext.toolbar**:工具栏组件,可以添加按钮、下拉菜单等。 - **Ext.window**:弹出窗口组件,常用于对话框和浮动面板。 - **Ext.menu**:菜单系统,提供上下文菜单和主菜单功能。 5. **Ajax和Store** - **...
在ExtJS4.2中,我们可以使用`Ext.menu.Menu`类来创建菜单,并通过监听事件或异步请求来更新菜单内容。例如,我们可以通过以下步骤实现动态菜单: 1. 创建基础菜单结构,定义菜单项。 2. 使用`itemId`或`id`为每个...
为了优化用户体验,开发者还可以利用EXT.js的Ext.LoadMask进行加载提示,避免用户在等待响应时感到不耐烦。EXT.js的Ext.MessageBox则可以用于弹出警告、确认和信息提示框,增强交互性。 总之,"ASP.NET与EXT实现...
- **分页栏 (Toolbar)**: 可以通过配置Grid的底部工具栏来实现分页功能,例如:`grid.bbar = new Ext.PagingToolbar({ store: store, displayInfo: true, displayMsg: '显示 {0} - {1} 条记录,共 {2} 条记录', ...
6. **数据模型和存储**:EXT的数据模型(Model)和数据存储(Store)机制,实现了与服务器端的数据交换,支持异步加载和远程过滤,是EXT数据驱动UI的关键。 7. **树形结构**:TreePanel组件允许展示和操作层次结构...
- **概述**:EXT内置了对Ajax的支持,使得异步请求变得非常简单。 - **请求方式**:EXT支持多种服务器端脚本语言,如PHP、ASP.NET、ColdFusion等。 - **示例**: - **PHP**:可以使用EXT的Ajax请求与PHP服务端进行...
- **Ajax 通信**:Ext 提供了简单的方法来进行异步数据交换。 - **服务器端支持**:支持多种服务器端技术,如 PHP、ASP.NET、ColdFusion 等。 - **请求发送**:可以使用 `Ext.Ajax.request` 方法发送 Ajax 请求。 -...
- **Toolbar**: 用于放置按钮、菜单等工具栏组件。 **4. MVC模式** ExtJS采用MVC(Model-View-Controller)架构,将应用分为三个部分,增强了代码的组织性和可维护性。Controller负责监听和处理事件,Model管理数据...
4. 动态加载和异步通信:EXT利用AJAX技术实现页面的动态加载和与服务器的异步通信,这在办公系统中至关重要,因为通常需要实时更新数据或者根据用户操作获取新的信息。`Ext.Ajax`或`Store`的远程代理可以实现这一...
5. 工具栏(Toolbar)和菜单(Menu):提供常用操作按钮和下拉选项。 6. 提示框(Dialog)和窗口(Window):弹出式组件,常用于提示信息或进行用户交互。 三、学习方法 1. 查阅文档:官方文档是学习Ext3.0的重要...
ExtJS提供了工具栏(Toolbar)和菜单(Menu)组件,便于添加各种操作按钮和下拉选项,增强了用户体验。 8. **图表组件**: 虽然ExtJS 3.2.2版本的图表功能相对有限,但还是包括了一些基本的图表类型,如柱状图、...
5. **EXT Toolbar and Menus**:EXT的工具栏(Toolbar)和菜单(Menu)组件提供了丰富的导航和操作选项。例子可能包括了自定义图标、分组按钮和下拉菜单。 6. **EXT Layouts**:EXT支持多种布局方式,如边界布局...
EXT是一个前端框架,尤其在企业级应用中广泛应用,因为它提供了一套完整的组件系统,包括表格、网格、面板、窗口、菜单等,使得开发者可以快速地构建复杂的用户界面。 1. EXT框架:EXT是一个开源的JavaScript库,由...
1. **组件库**:Ext.NET提供了大量的UI组件,如面板(Panel)、表格(GridPanel)、表单(FormPanel)、树形视图(TreePanel)、菜单(Menu)、工具栏(Toolbar)等,这些组件都有丰富的配置选项和事件处理机制。...
它可以用于导航菜单、文件系统视图等场景,支持拖放操作和动态加载子节点。 7. **图表组件**: 虽然EXTJS 3.1.1的图表功能相比后来版本较为有限,但依然提供了一些基础的图表类型,如柱状图、折线图、饼图等,可以...