Skip to content

Instantly share code, notes, and snippets.

@ExtAnimal

ExtAnimal/AccordionMenu.html

Created January 20, 2012 19:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ExtAnimal/1649274 to your computer and use it in GitHub Desktop.
Save ExtAnimal/1649274 to your computer and use it in GitHub Desktop.
Download ZIP
Accordion of Menus. Drop into extjs/examples/<anywhere>
Raw
AccordionMenu.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
.my-menu .x-menu-item-link {
padding-left: 4px;
}
</style>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function(){
// Menu bug override!
Ext.override(Ext.menu.Menu, {
// inherit docs
getFocusEl: function() {
return this.focusedItem || this.el;
}
});
var menus = [];
for (var menu = 0; menu < 4; menu++) {
var menuConfig = {
title: 'Menu ' + (menu + 1),
xtype: 'menu',
cls: 'my-menu',
showSeparator: false,
floating: false,
hideHeader: false,
items: [],
collapsed: menu > 0
};
for (var menuItem = 0; menuItem < 10; menuItem++) {
menuConfig.items.push({text: 'Menu ' + (menu + 1) + ', item ' + (menuItem + 1)});
}
menus.push(menuConfig);
}
new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
title: 'Navigation',
width: 200,
autoScroll: true,
layout: {
type: 'accordion',
multi: true,
fill: false
},
items: menus
}, {
region: 'center',
title: 'Center'
}]
});
});
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment