您现在的位置: 365建站网 > 365学习 > 使用xml构建Ext menu菜单

使用xml构建Ext menu菜单

文章来源:365jz.com     点击数:695    更新时间:2015-09-16 20:11   参与评论
废话就不多说了,将主要代码及效果图附上:
菜单效果:


代码如下:

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
});

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (695人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------