PDA

View Full Version : Menu hiding



hemalatha.elluru
8 May 2013, 4:21 AM
Hi,


when i have multiple menus, if i click on any one i need to show that sub menu items by hiding all remaining main menus.Again if i click on any sub menu item in second level, then also i want to show sub sub menu items by hiding sub menu items in the second level.For example if we refer www.costco.com, i want to show the menus like in that site.


And for knowing where are we, i need to show breadcrum(for example home(having link)->Menu(having link)->SubMenu(having link)->SubSubMenu(not having link))

I am attaching the screen shots of my requirements.

Menus_list ->which is having all main menus
Selected_menu ->When i click any one in the Menus_list , it is showing selected sub menu list by hiding all menus list

Selected_second_level_menu ->When i click Selected_menu, it is showing the second level sub menu list by hiding selected_menu.

breadcrum -> If i selected the third level sub menu, then i need to show all parent level menu names and home with links to go to that particular link.

Thanks,

slemmon
10 May 2013, 9:28 AM
What have you tried so far to build the menu? Do you have some example code to show where you're stuck?

hemalatha.elluru
12 May 2013, 11:11 PM
Actually, i mainly wrote three files.
index.html:-
In this file i am dividing the window into 2 panels.north and center.For north item i am setting addVeticalMenuPathPanel.js and for center i am setting addVerticalMenuPanel.js.

addVerticalMenuPanel.js
addVeticalMenuPathPanel.js
index.html


<html>
<head>
<title>SCSPA</title>
<!--Starting inclusion of css files-->
<!--Starting inclusion of ExtJs CSS or ExtJs Theme CSS File-->
<link rel='stylesheet' href="resources/extjs/resources/css/ext-all.css" />
<link rel='stylesheet' href="resources/css/custom_css_cmc.css" />
<!--Ending inclusion Custom CSS CMC File-->
<!--Ending inclusion of css files-->
<!--Starting inclusion of js files-->
<script type='text/javascript' src="resources/extjs/ext-all.js"></script>
<!--Starting inclusion of custom componets files-->
<script type='text/javascript' src="resources/js/layouts/center.js"></script>
<script type='text/javascript' src="resources/extjs/cmc/cmc_displayfield.js"></script>
<script type='text/javascript' src="resources/extjs/cmc/cmc_form.js"></script>
<script type='text/javascript' src="resources/extjs/cmc/cmc_textfield.js"></script>
<script type='text/javascript' src="resources/extjs/cmc/cmc_button.js"></script>
<script type='text/javascript' src="resources/extjs/cmc/cmc_panel.js"></script>
<script type='text/javascript' src="resources/extjs/cmc/cmc_radiofield.js"></script>
<script type='text/javascript' src="resources/extjs/cmc/cmc_window.js"></script>
<script type='text/javascript' src="resources/js/common/namespaces.js"></script>
<script type='text/javascript' src="resources/js/Modules/VerticalMenu/addVeticalMenuPathPanel.js"></script>
<script type='text/javascript' src="resources/js/Modules/VerticalMenu/addVerticalMenuPanel.js"></script>

<!--Ending inclusion of custom componets files-->

<!--Starting inclusion of modules files-->

<script type='text/javascript'>
Ext.onReady(function () {

var win = Ext.create('Ext.cmc.Window',{
title:'South Carolina State Ports Authority(SCSPA)',
width:1500,
height:600,
showNorthItemCmc: true,
setNorthItemFuncCmc:Modules.VerticalMenu.addVeticalMenuPathPanel,
setCenterItemFuncCmc: Modules.VerticalMenu.addVerticalMenuPanel

});
win.show();
});
</script>
<!--Ending inclusion of modules files-->
<!--Ending inclusion of js files-->
</head>
<body>

</body>
</html>

addVerticalMenuPanel.js


Modules.VerticalMenu.addVerticalMenuPanel=function(){

var menu= Ext.create('Ext.menu.Menu', {

margin: '0 0 10 0',
floating: false, // usually you want this set to True (default)



items: [{
text: 'Menu item 1',
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
Ext.getCmp('cmcpanelcenter').getLayout().setActiveItem(1);
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]

},{
text: 'Menu item 2'
,
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]
},{
text: 'Menu item 3'
,
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]
},{
text: 'Menu item 4',
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]
},{
text: 'Menu item 5',
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]
},{
text: 'Menu item 6',
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]
},{
text: 'Menu item 7',
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]
},{
text: 'Menu item 8',
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]
}
]
});

var panel = {
xtype: 'cmcpanel',
layout: 'border',
title: '',
height:80,
bodyStyle:{"background-color":"white"},

items: [{
xtype:'cmcpanel',
region: 'west',
layout: 'border',
title: 'SCSPA Menu',
height:80,
width: 300,
bodyStyle:{"background-color":"white"},
items: [menu]


},
{
xtype:'cmcpanel',
region: 'east',
layout: 'border',
title: 'Item Content',
activeItem: 0,
id: 'cmcpanelcenter',
bodyStyle:{"background-color":"white"},
height:80,
width: 1200,
layout: 'card',
items: [
{ xtype: 'textfield',
fieldLabel: 'Name'},{xtype: 'textfield',
fieldLabel: 'Name',value: 100}
//{ html: 'Card 1' },
//{ html: 'Card 2' }
]
}
]


};
return panel;
}

addVeticalMenuPathPanel.js


Modules.VerticalMenu.addVeticalMenuPathPanel=function(){
var panel = {
xtype: 'cmcpanel',
layout: 'border',
title: 'Home Path',
height:80,
bodyStyle:{"background-color":"white"},
style:{"color":"#003366"},
collapsible:false

};
return panel;
}

mitchellsimoens
13 May 2013, 6:03 AM
Please use BBCode CODE tags when posting code.

http://en.wikipedia.org/wiki/Bbcode