使用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
});
本文作者:
«
»