您的位置:首页 > 其它

动态创建一个Accordion的菜单

2009-04-24 13:33 369 查看
function getMenu()
{
var menus =[
{title:'Menu1',id:'Menu1',items:[{title:'menu11',id:'menu11',url:'url11'},{title:'menu12',id:'menu12',url:'url12'}]},
{title:'Menu2',id:'Menu2',items:[{title:'menu21',id:'menu21',url:'url21'},{title:'menu22',id:'menu22',url:'url22'}]},
{title:'Menu3',id:'Menu3',items:[{title:'menu31',id:'menu31',url:'url31'},{title:'menu32',id:'menu32',url:'url32'}]}
];

var menuRoot = Ext.get('menu');

for(var i=0;i<menus.length;i++)
{
var menuItem = menus[i];

var menuItemRoot = Ext.DomHelper.append(menuRoot,"<div id = "+menuItem.id+"></div>",false);

for(var j=0;j<menuItem.items.length;j++)
{
Ext.DomHelper.append(menuItemRoot,"<br><a href="+menuItem.items[j].url+" mce_href="+menuItem.items[j].url+" id = "+menuItem.items[j].id+">"+menuItem.items[j].title+"</a>",false);
}
}

var accordionItems = [];

for(var i=0;i<menus.length;i++)
{
accordionItems[i]={title:menus[i].title,contentEl:menus[i].id};
}

return accordionItems;
}

Ext.onReady(onReady);
function onReady()
{
var panel = new Ext.Panel({
layout:'accordion',
layoutConfig:
{
activeOnTop:false,
fill:true,
hideCollapseTool:false,
titleCollapse:true,
animate:true
},
frame:true,
height:150,
width:250,
applyTo:'menu',
items:getMenu()
});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: