同一侧的两个菜单

Question

我正在寻找我想做的事情的示例或提示如何做。我想从 Sencha Touch 2 视口的一侧创建菜单，之后用其他菜单替换此菜单。当我打电话给

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

它工作正常，但在我用其他菜单调用 setMenu 后，新的附加菜单替换了旧菜单，这就是我的想法。但是当我想 return 其他菜单时出现问题。有没有办法将旧菜单的实例保存在某处？我只是不想再次重新创建以前的菜单。我尝试用 Container 替换第二个菜单，但它不像菜单那样灵活。

Answer 1

我来解决如何做到这一点。这是我的解决方案示例：

    Ext.application({
    name : 'Test',

    launch : function() {
        Ext.Viewport.add({
            xtype: 'container',
            fullscreen: true,
            html: 'Application panel',
            items: [{
                xtype: 'button',
                text: 'Show first menu',
                listeners: {
                    tap: function() {
                        Ext.Viewport.removeMenu('left');
                        var menu = Ext.create('Ext.Menu', {
                            items: [
                                {
                                    text: 'Settings on first menu',
                                    iconCls: 'settings'
                                },
                                {
                                    text: 'New Item on first menu',
                                    iconCls: 'compose'
                                },
                                {
                                    text: 'Star on first menu',
                                    iconCls: 'star'
                                }
                            ]
                        });
                        Ext.Viewport.setMenu(menu, {
                            side: 'left',
                            reveal: true
                        });
                        Ext.Viewport.showMenu('left');
                    }
                }
            },
                {
                    xtype: 'button',
                    text: 'Show second menu',
                    listeners: {
                        tap: function() {
                            Ext.Viewport.removeMenu('left');

                            var secondmenu = Ext.create('Ext.Menu', {
                                items: [
                                    {
                                        text: 'Settings on second menu',
                                        iconCls: 'settings'
                                    },
                                    {
                                        text: 'New Item on second menu',
                                        iconCls: 'compose'
                                    },
                                    {
                                        text: 'Star on second menu',
                                        iconCls: 'star'
                                    }
                                ]
                            });
                            Ext.Viewport.setMenu(secondmenu, {
                                side: 'left',
                                reveal: true
                            });
                            Ext.Viewport.showMenu('left');
                        }
                    }
                }
            ]
        });
    }
});

Answer 2

我无法重现你的问题。我写了一个 Fiddle 并创建了 3 个菜单。我毫无问题地显示和隐藏它们。我什至可以 select 使用 Ext.Viewport.down() 的菜单。

来自 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');
    }
});

同一侧的两个菜单

Two menus from the same side

javascript

extjs

sencha-touch-2