1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    2
    Vote Rating
    0
    hemalatha.elluru is on a distinguished road

      0  

    Default Unanswered: Menu hiding

    Unanswered: Menu hiding


    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,
    Attached Images

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,417
    Answers
    435
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    What have you tried so far to build the menu? Do you have some example code to show where you're stuck?

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    2
    Vote Rating
    0
    hemalatha.elluru is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Please use BBCode CODE tags when posting code.

    http://en.wikipedia.org/wiki/Bbcode
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 2

Tags for this Thread