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