`

Ext工具栏菜单

阅读更多

今天,帮群友解决了一个动态的 Ext工具栏菜单问题。

工具栏菜单数据是从后台读取的。效果如图:

工具栏效果

这里将群友提供的后台数据简化一下,改成本地读取json数据格式;

代码如下:直接copy下面代码,保存成htm文件,导入ext包,可以运行;注意文件保存编码格式(非传输编码):utf-8

 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>   
    <script type="text/javascript" src="../ext-all.js"></script>

<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>

</head>
<body >
<div id =hello></div>
</body>
</html>

 

分享到:
评论

相关推荐

    Ext 文件,表格,工具栏,邮件,RSS,小图标素材

    这些图标在Ext框架中可能用于创建自定义工具栏或菜单,帮助用户更直观地进行文件管理。 其次,"表格操作图标"涉及到的数据处理领域。在电子表格或数据库应用中,用户可能需要排序、过滤、计算、插入或删除行或列。...

    ExtJS工具栏

    总结,ExtJS工具栏和菜单系统提供了一种灵活的方式来构建丰富的用户界面,结合按钮、分隔线和多级菜单,可以创建出满足各种需求的交互式Web应用。通过理解这些基本概念和使用方法,开发者可以高效地构建出具有专业...

    com atl shell extension_给任务栏右键菜单中添加菜单,工具栏菜单.zip

    在本例中,"com atl shell extension"指的是利用Microsoft的ATL(Active Template Library)库来创建Shell扩展,用于向任务栏的右键菜单和工具栏菜单添加自定义的菜单项。 ATL是微软提供的一组C++模板类,专为简化...

    Extjs教程_第四章_按钮、菜单和工具栏(2)

    在EXTJS开发中,按钮、菜单和工具栏是构建用户界面的关键元素,它们提供了丰富的交互性和可定制性。本章主要介绍EXTJS中关于这些元素的使用和配置。 1. Shortcuts(快捷方式) EXTJS提供了一系列的快捷方式来简化...

    EXTJS4 菜单栏

    例如,你可以将菜单栏添加到工具栏中,或者将其作为窗口的顶级元素。 ```javascript var toolbar = new Ext.toolbar.Toolbar({ dock: 'top', items: [menu] }); // 或者 var window = new Ext.window.Window({ ...

    ext3.jar ext使用非常多

    EXT框架的核心在于其丰富的组件库,包括数据网格、表单、窗口、工具栏、菜单等,这些组件具有高度可定制性和交互性,使得开发者可以轻松创建出功能强大、界面美观的Web应用。EXT3是EXT发展中的一个重要阶段,它引入...

    ext3.0所有控件演示代码

    这个压缩包文件提供了EXT3.0中的几乎全部控件的演示代码,覆盖了表格、表单、分页工具栏以及图标等多个重要组件的使用方法。下面将详细介绍这些知识点。 1. 表格(Grid):EXT3.0的表格控件是其核心功能之一,能够...

    Extjs 超级工具栏图标

    在EXTJS框架中,超级工具栏(Super Toolbar)是一种高度可定制的组件,它允许开发者在页面顶部创建一排或多排功能丰富的按钮、下拉菜单和分隔符,以实现各种用户交互操作。这些工具栏通常包含图标,使得用户能够快速...

    ext 3.3 中文 chm

    6. 工具栏和菜单(Toolbars and Menus):如何创建和使用工具栏、下拉菜单等交互元素。 7. 表单(Forms):表单组件的使用,包括字段验证、表单提交等。 8. 图表(Charts):EXT 3.3的图表组件,如何创建各种统计...

    Ext框架开发文档及ext-core.js

    6. **工具栏(Toolbars)**:EXT的工具栏组件可以轻松添加各种按钮、菜单和分割线,为用户提供便捷的操作入口。 7. **Ajax支持**:EXT内置了Ajax通信机制,能够方便地进行异步数据请求,与服务器端进行数据交互。 ...

    Ext模拟Windows桌面

    它提供了丰富的组件库,包括表格、树形视图、面板、窗口、菜单、工具栏等,可以构建出复杂的、具有桌面应用般功能的Web应用。在"Ext模拟Windows桌面"中,这些组件被巧妙地组合和定制,以模仿Windows桌面的特性,如...

    ext js 中文手册

    Ext JS支持多种类型的菜单项,如文本菜单项、分隔符、复选框菜单项等,并且支持将菜单项添加到工具栏(Toolbar)中。 模板(Templates)是Ext JS用来处理HTML内容的机制,它允许开发者在JavaScript中编写HTML代码,...

    EXT 最新icon图标大集合,节省时间专用

    EXT JS 提供了丰富的组件库,包括数据网格、表单、菜单、工具栏、对话框等,使开发者可以方便地创建功能完备、交互性强的Web应用。EasyUI则是EXT JS的一个轻量级版本,它基于EXT JS,但简化了一些高级功能,更加易于...

    EXT2.0,EXT4.0,JS

    EXT JS 2.0是该框架的一个早期版本,提供了丰富的组件库,包括表格、面板、菜单、工具栏等,使得开发者可以轻松创建复杂且美观的用户界面。此版本引入了新的布局管理器、拖放功能增强以及对Ajax的优化支持。 ...

    ext 中文源代码

    它提供了大量的预定义组件,如表格、树形视图、菜单、工具栏、面板等,这些组件可以灵活组合,快速搭建复杂的Web界面。EXT的组件系统基于MVC(Model-View-Controller)设计模式,有利于实现松耦合的代码结构,提高...

    ext UI效果模板

    3. 工具栏和菜单:提供常用操作的快捷入口,可以自定义图标和事件。 4. 导航和布局:如选项卡面板、 accordion布局、浮动窗口、弹出对话框等,帮助构建层次分明的页面结构。 5. 图标和图像:EXT内置了丰富的图标库,...

    ext-3.4.1包

    在EXT JS 3.4.1中,开发者可以找到一系列预定义的可复用组件,如表格、面板、菜单、工具栏、窗口等,这些组件都具有高度定制性,可以根据需求调整外观和行为。 这个压缩文件"ext-3.4.1.zip"很可能包含了EXT JS库的...

    Ext3.0 api帮助文档

    - **Ext.menu.Menu**: 创建下拉菜单,常用于按钮的右键菜单或工具栏的下拉菜单。 10. **其他功能** - **Ajax请求(Ajax Requests)**: 使用Ext.Ajax模块进行异步数据请求。 - **拖放(Drag and Drop)**: 支持...

    Extjs学习笔记之四 工具栏和菜单

    Extjs工具栏(Toolbar)和菜单(Menu)组件的学习笔记提供了丰富的知识点,帮助开发者在Web开发中实现类似桌面程序的用户界面。以下详细解析了Extjs在构建工具栏和菜单方面的关键知识点。 首先,Extjs是一个基于...

    Ext.Net1.0(Examples)RC2实例

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

Global site tag (gtag.js) - Google Analytics