`
alfredgao
  • 浏览: 137947 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

Ext2:使用xml构建Ext menu菜单

阅读更多

var menuObj=[{
  text:"快捷",
  icon:'etc/default/images/icons/quick.gif'
    },'-'];
//下面两个函数用于解析xml为树结构输出
function createXMLMenu(xmlsrc) {
    var xmlDom=loadXML(xmlsrc);  //加载xml串或url,loadXML函数的定义见http://ajaxbbs.net/blog/post/268/
    var str=menuItemFromXML(xmlDom.documentElement||xmlDom);
    return str;
}
function menuItemFromXML(XmlEl) {
    var t=((XmlEl.nodeType==3)?XmlEl.nodeValue:XmlEl.tagName);
    if(t.replace(/\s/g,'').length==0){return null}
    var result = {  //构建菜单项
      text : t,  //菜单文本读取xml标记
      icon:'etc/default/images/icons/quick.gif'  //图标
    };
    
    if(XmlEl.nodeType==1){  //节点
        Ext.each(XmlEl.attributes,function(a){
            if(a.nodeName=="href"&&XmlEl.hasChildNodes()) return;    //目录不添加链接属性
            result[a.nodeName=="href"?"url":a.nodeName]=a.nodeValue;  //添加属性到当前菜单项中
        });

        Ext.each(XmlEl.childNodes,function(el){  //解析子节点,生成子菜单
            if((el.nodeType==1)||(el.nodeType ==3)){
                var c=menuItemFromXML(el);
                if(c){
      if(!result["menu"]){  //如果还没有子菜单,则添加menu属性
                    result["menu"]={
                          cls:"menu",
                          items:[c]  //将当前项加入到menu的items中
        }
                  }else{
                    result["menu"]["items"].push(c);  //否则直接添加到items中
                  }
             }
            }
        });
    }
    return result;
}
menuObj.push(createXMLMenu("etc/menu.xml"));  //将创建的菜单项添加到menuObj中
//继续添加其他菜单
menuObj=menuObj.concat(['-',{  
                text: '主页',
                handler:function(){window.open('http://192.168.3.1');},
                icon:'etc/default/images/icons/home.gif'
            },{
                text: '重新登陆',
                handler:function(){onrelogin();},
                icon:'etc/default/images/icons/work.gif'
            },{
                text: '更改密码',
                handler:function(){changePassword();},
                icon:'etc/default/images/icons/knowledge.gif'
            },{
                text: '退出',
                handler:function(){window.close();window.open('index.htm');},
                icon:'etc/default/images/icons/exit.gif'
            }
]);

//创建菜单面板
var menu = new Ext.menu.Menu({
  id: 'mainMenu',
  cls:"menu",
  items: menuObj
});

分享到:
评论

相关推荐

    解析Xml构建Ext树形菜单

    在本文中,我们将深入探讨如何使用XML来构建EXT框架中的动态树形菜单。EXT是一个流行的JavaScript库,用于创建丰富的用户界面,而XML则是一种结构化的数据格式,常用于存储和交换数据。结合两者,我们可以创建出功能...

    ext.net Menu + TreePanel

    Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单系统,可以包含各种选项和子菜单。菜单可以被关联到按钮、工具栏或者页面的其他元素上,用户只需点击就能触发相应的操作。菜单项可以...

    ext带右键菜单的树

    4. **创建右键菜单**:在监听器内部,我们可以创建一个Ext.menu.Menu实例,定义菜单项及相应的操作。菜单项可以包含图标、文本和事件处理器。 5. **定位菜单**:在菜单创建后,我们需要将其显示在鼠标点击的位置。...

    Ext3.0 api帮助文档

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

    ext 3.3.1 api 不可缺少的学习资料

    2. **EXT Components**:EXT提供了大量的预定义组件,如表格(Grid)、面板(Panel)、窗口(Window)、菜单(Menu)等。这些组件都有丰富的配置项和事件,通过组合和定制这些组件,可以快速构建出复杂的用户界面。 ...

    ext2.0(jsp标签)

    5. **菜单系统**:EXT 2.0的Menu组件不仅包括基本的上下文菜单,还提供了QQ风格的弹出式菜单,可以自定义样式和行为,为用户提供丰富的操作选项。 6. **Ajax集成**:EXT 2.0内置了Ajax通信模块,可以方便地与服务器...

    Ext Tree示例

    至于 `menu.xml`,这可能是用于创建树的样本数据,它可能包含了菜单项的层级结构,比如在应用中常见的导航菜单。每个 XML 元素将被映射为一个树节点,元素的属性(如 `text` 和 `leaf`)将决定节点的文本和是否为...

    ext js 中文手册

    在Ext JS的学习路径上,初学者通常会从下载、安装框架开始,然后通过学习Ext的基本概念,如Element、Widgets、Ajax等,逐步过渡到布局的使用、Grid组件和Menu组件的创建,再到模板的使用和表单组件的构建,最后深入...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    ext_ext_knew7pi_ajax_

    在`knew7pi`这个标签中,可能是指某个个人或团队对EXT 1.1的深入理解和实践,他们分享了一些关于EXT AJAX的实例,包括如何使用EXT组件(如GridPanel、Menu和Window)与服务器进行AJAX交互,实现动态内容展示和用户...

    ext2.0 详解和API

    7. **菜单和工具栏**:如Ext.menu.Menu和Ext.toolbar.Toolbar,提供下拉菜单和顶部工具栏功能。 8. **工具提示**:如Ext.tip.ToolTip,用于显示浮动的提示信息。 **EXT2.0的Demos** "Demos_Ext2.0.rar"可能包含了...

    ext生成树节点带链接

    这里定义了一个`TreePanel`,它使用`AsyncTreeNode`作为根节点,并配置了异步加载器(`TreeLoader`),该加载器指向了一个XML文件,该文件包含了树形菜单的具体数据。 #### 4. 添加链接及事件处理 为了让树形菜单中...

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

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

    ext-1.0.1.rar

    2. **Components**:EXT提供了大量的UI组件,如表格(Grid)、面板(Panel)、菜单(Menu)、按钮(Button)等。这些组件具有丰富的功能和高度可定制性,可以满足各种复杂的界面需求。 3. **Data Package**:数据包...

    ext-3.0.0框架(带Demo)

    1. **EXTJS组件库**:EXT 3.0.0包含了大量的UI组件,如表格(Grid)、树形视图(Tree)、面板(Panel)、表单(Form)、菜单(Menu)、工具栏(Toolbar)等。这些组件都经过精心设计,具备高度可定制性和可扩展性,...

    ext3.0中文api

    10. **工具栏和菜单**:EXT提供了丰富的工具栏(Toolbar)和下拉菜单(Menu)组件,方便创建功能丰富的用户界面。 “Ext 3.0 中文.CHM”文件是帮助文档的CHM格式,这是一种常见的Windows帮助文件,包含了EXT3.0中文...

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

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

    Ext中文手册

    - **Ext结构构建**:使用Ext的API初始化TabPanel。 - **Tab控制逻辑**:实现Tab之间的切换逻辑。 #### 9. **EXT源码概述** - **源码结构**:介绍Ext的文件组织结构,以及各个模块的功能。 - **源码分析**:深入...

    权限实现实例(Ext+java)

    因为EXT应用程序的界面是动态生成的,所以权限控制必须与前端功能菜单紧密配合。当用户在前端看到某个功能菜单时,意味着他们具有访问对应后台功能的权限。 JOffice的权限配置主要在`menu.xml`文件中进行。这个文件...

Global site tag (gtag.js) - Google Analytics