今天,帮群友解决了一个动态的 Ext工具栏菜单问题。
工具栏菜单数据是从后台读取的。效果如图:
这里将群友提供的后台数据简化一下,改成本地读取json数据格式;
代码如下:直接copy下面代码,保存成htm文件,导入ext包,可以运行;注意文件保存编码格式(非传输编码):utf-8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Ext工具栏菜单_wayfoon </title>
<link rel="stylesheet" type="text/css" href="ext22/resources/css/ext-all.css" />
<script type="text/javascript" src="ext22/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext22/ext-all.js"></script>
<script type="text/javascript" src="ext22/ext-lang-zh_CN.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<script>
Ext.onReady(function(){
var bd = Ext.getBody();
var tb=new Ext.Toolbar();
//加载Menu数据源 简化的
var menuStr = '{root:[{"MenuItemId":1000,"PMenuItemId":0,"MenuItemName":"谐波监测点","MenuItemHref":"","ChildHmMenuList":[{"MenuItemId":10001,"PMenuItemId":1000,"MenuItemName":"用户谐波源管理","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10002,"PMenuItemId":1000,"MenuItemName":"检测终端维护","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10003,"PMenuItemId":1000,"MenuItemName":"监测点属性维护","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10004,"PMenuItemId":1000,"MenuItemName":"监测点拓扑维护","MenuItemHref":"","ChildHmMenuList":null}]},{"MenuItemId":1001,"PMenuItemId":0,"MenuItemName":"谐波分析","MenuItemHref":"","ChildHmMenuList":[{"MenuItemId":10011,"PMenuItemId":1001,"MenuItemName":"谐波电压分析","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10012,"PMenuItemId":1001,"MenuItemName":"谐波电流分析","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10013,"PMenuItemId":1001,"MenuItemName":"越限告警事项","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10014,"PMenuItemId":1001,"MenuItemName":"谐波数据报表","MenuItemHref":"","ChildHmMenuList":null}]},{"MenuItemId":1002,"PMenuItemId":0,"MenuItemName":"谐波高级分析","MenuItemHref":"","ChildHmMenuList":[{"MenuItemId":10021,"PMenuItemId":1002,"MenuItemName":"谐波趋势分析","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10022,"PMenuItemId":1002,"MenuItemName":"潮流计算","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10023,"PMenuItemId":1002,"MenuItemName":"谐波源定位","MenuItemHref":"","ChildHmMenuList":null}]},{"MenuItemId":1003,"PMenuItemId":0,"MenuItemName":"系统管理","MenuItemHref":"","ChildHmMenuList":[{"MenuItemId":10031,"PMenuItemId":1003,"MenuItemName":"组织结构管理","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10032,"PMenuItemId":1003,"MenuItemName":"权限管理","MenuItemHref":"","ChildHmMenuList":null},{"MenuItemId":10033,"PMenuItemId":1003,"MenuItemName":"谐波限值管理","MenuItemHref":"","ChildHmMenuList":null}]}]}';
var menuObj = eval("(" + menuStr + ")");
//alert(menuObj.root);
var panel=new Ext.Panel({
title:"wayfoon",
width:400,
height:200,
tbar:tb,
html:"<div>Paele里面的内容<br>wayfoon 南极光</div>",
renderTo: bd
});
//var tbItem;
var childmenu;
Ext.each(menuObj.root,function(item) {
childmenu = new Ext.menu.Menu();
Ext.each(item.ChildHmMenuList,function(childItem) {
childmenu.add(
{
text: childItem.MenuItemName, //菜单项的文本,
href: childItem.MenuItemHref, //指定链接地址
hrefTarget: "_blank" //链接打开的发式,在新窗口打开
});
}); //end childitem
tb.add({ text: item.MenuItemName, menu: childmenu });
});
});
</script>
</body>
</html>
分享到:
相关推荐
在这个名为"java-ext.zip_ext_ext java_ext 标签_ext java_java ext"的压缩包中,我们找到了关于如何在ExtJS中调用Java JSON服务的示例。 首先,让我们理解JSON(JavaScript Object Notation)。JSON是一种轻量级的...
【标题】"ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree" 暗示这是一个关于Ext JS库中TreePanel组件的实例,其中可能包含了用于创建和管理数据结构的树形视图,以及与数据库交互的功能。 【描述】"ext的树的...
【标题】"Ext_Demo.rar_DEMO_Ext demo_ext_demo_java ext demo_javaext demo" 指示了一个关于Java与EXT.js集成的演示项目。EXT是一个强大的JavaScript库,用于构建富客户端应用程序,而Java通常在后端提供数据和服务...
ext4文件系统相关工具,比如制作ext4文件系统镜像
S4ROM打包工具,ext4_utils_new ./make_ext4fs -s -l 2088M -a system leilei.img system ./sgs4ext4fs --bloat leilei.img system1.img
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
这个API文档的中文版,"Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2",是针对Ext JS 2.2框架的重要参考资料,对于开发者来说尤其有价值,特别是那些中文为母语的开发者,它使得理解框架的...
标题中的"ext+js.rar_ext_ext js_ext js java_java+ext"似乎是在组合提及几个关键词,包括"ext","js",以及它们与"java"的关联。这些词汇主要涉及JavaScript的一个流行库——Ext JS,它是一个用于构建富客户端Web...
标题中的"Ext2IFS_1_11a.zip"指的是一个名为"Ext2IFS"的软件的1.11a版本的压缩包文件。这个软件主要用于Windows操作系统,它允许用户在Windows环境下访问Unix文件系统。"Ext2IFS"是"Extended 2 Filesystem Interface...
在“EXT可视化工具,Ext_Designer_Preview附带安装说明.rar”这个压缩包中,我们可以推测包含的主要内容可能有EXT Designer的预览版本和相应的安装指南。预览版可能包含了工具的最新功能或改进,而安装说明则会指导...
EXT JS的组件库非常丰富,涵盖了大部分常见的Web UI元素,如表格(Grid)、树形视图(Tree)、表单(Forms)、菜单(Menus)、工具栏(Toolbars)等。这些组件都经过精心设计,具有高度可定制性和可扩展性。此外,...
标题中的“Ext_Designer_Preview_ext可视化环境_智能感知”指的是使用Ext Designer进行预览,这是一种基于ExtJS的可视化开发工具,它提供了强大的界面设计和布局管理功能。Ext Designer支持用户通过拖放的方式创建和...
由于Windows系统默认不支持ext4,因此需要这样的工具来帮助用户在Windows环境下读取或操作ext4格式的文件。 描述中提到"win平台打开ext4文件 ext4_unpacker",意味着这个程序允许用户在Windows上查看和操作原本为...
标题中的"oa.rar_ext_ext java oa_ext oa_ext tree_java ext tree"似乎是一个组合字符串,它可能代表了某个项目或教程的文件结构。其中,“oa”可能是项目或系统的名称,而“ext”、“java”、“oa_ext”、“tree_...
6. **设计与预览**:利用工具提供的拖放功能,将EXT组件从工具栏拖入设计画布,调整大小和位置,设置属性。实时预览功能让你能在设计过程中随时查看组件的最终效果。 7. **生成代码**:完成设计后,EXT_Designer_...
它提供了一套完整的组件模型,包括表格、面板、菜单、工具栏等,使得开发者可以方便地创建复杂的Web界面。在本项目中,Ext3用于构建文件上传的前端界面和交互逻辑。 2. **Swfupload**:Swfupload是一款流行的Flash...
【安卓解码工具ext4_unpacker详解】 在Android操作系统中,文件系统主要使用的是ext4,这是一种高效且广泛采用的日志文件系统。然而,对于普通用户来说,直接访问和操作ext4格式的文件系统并不常见,尤其是对于隐藏...
Ext6.0文档教学_ext_web_手册.zip
供应商库存查询平台C#EXT4_C#_excellentixg_ext4_ERPC#_库存.zip
供应商库存查询平台C#EXT4_C#_excellentixg_ext4_ERPC#_库存_源码.rar