Two menus from the same side

Question

I'm looking for an example of something I want to do or to hint how to do it. I want to create menu from one side of Viewport of Sencha Touch 2 and after this to replace this menu with other menu. When I call

 Ext.Viewport.setMenu(menu, {
     side: 'left'
 });

It working OK but after I call setMenu with other menu the new attached menu replaces old menu and that is the idea. But the problem appears when I want to return other menu. Is there is a way to keep instance of old menu somewhere? I just do not want to recreate the previous menu again. I tried to replace second menu with Container but it is no so flexible like menu.

Answer 1

I can't reproduce you problem. I wrote a Fiddle and create 3 menu's. I show and hide them without any problem. I can even select a menu using Ext.Viewport.down().

Code from the Sencha Fiddle:

var menu1 = Ext.create('Ext.Menu', {
    itemId: 'menu1',
    items: [{
        text: 'MenuItem 1',
        iconCls: 'settings'
    }]
});

var menu2 = Ext.create('Ext.Menu', {
    itemId: 'menu2',
    items: [{
        text: 'MenuItem 2',
        iconCls: 'compose'
    }]
});

var menu3 = Ext.create('Ext.Menu', {
    itemId: 'menu3',
    items: [{
        text: 'MenuItem 3',
        iconCls: 'star'
    }]
});



Ext.application({
    name: 'Fiddle',

    launch: function() {
        var me = this,
            menuus = new Array(menu1, menu2, menu3);

        me.showMenu(menu1);

        Ext.defer(function() {
            me.showMenu(menu2);
        }, 1000);

        Ext.defer(function() {
            me.showMenu(menu3);
        }, 2000);

        Ext.defer(function() {
            me.showMenu(menu1);
        }, 3000);

        Ext.defer(function() {
            var menuFromViewport = Ext.Viewport.down('#menu2');
            me.showMenu(menuFromViewport);
        }, 4000);
    },

    showMenu: function(menu) {        
        Ext.Viewport.hideMenu('left');

        Ext.Viewport.setMenu(menu, {
            side: 'left'
        });

        Ext.Viewport.showMenu('left');
    }
});