同一側的兩個菜單

Question

我正在尋找我想做的事或暗示如何做的例子。 我想從Sencha Touch 2的視口的一側創建菜單，然后將其替換為其他菜單。 當我打電話

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

它工作正常，但是在我使用其他菜單調用setMenu之后，新的附加菜單替換了舊菜單，這就是想法。 但是當我想返回其他菜單時出現了問題。 有沒有辦法將舊菜單的實例保存在某個地方？ 我只是不想再次重新創建上一個菜單。 我試圖用Container替換第二個菜單，但是它不像菜單那樣靈活。

Answer 1

我無法重現您的問題。 我寫了一個小提琴並創建了3個菜單。 我顯示並隱藏它們沒有任何問題。 我什至可以使用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');
    }
});

Answer 2

我來解決如何做到這一點。 這是我的解決方案的示例：

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