How to push a new view from menu (Ext.Menu)

Hi everybody,

My problem is the following:

I have a "Main.js" view with a navigation view defined and in the event "initialize", we create and load the menu, this is the code of my "Main.js" file:

Code:

Ext.define('MagallanesBBC.view.Main', {
    extend: 'Ext.navigation.View',
    requires: ['MagallanesBBC.view.Tabs'],
    fullscreen: true,
    config: {
        autoDestroy: false,
        navigationBar: {
            hidden: true
        },
        listeners: [
            {
                fn: 'onInitialize',
                event: 'initialize'
            },
            {
                fn: 'onBtnShowMenuTap',
                event: 'tap',
                delegate: '#btnShowMenu'
            }
        ],
        items: [
            {
                xtype: 'toolbar',
                id: 'MyToolbar',
                docked: 'top',
                title: 'Magallanes BBC',
                items: [
                    {
                        xtype: 'button',
                        docked: 'left',
                        ui: 'plain',
                        iconCls: 'menu',
                        id: 'btnShowMenu'
                    }
                ]
            },
            {
                xtype: 'tabs'
            }
        ]
    },


    onInitialize: function(component, eOpts) {


        var menu = Ext.create('Ext.Menu', {
            items: [


                {
                    xtype: 'button',
                    text: 'Juegos del Día',
                    iconCls: 'juegosdia',
                    scope: this,
                    itemId: 'btnJuegosDia',
                    cls: 'btn-navegacion',
                    ui: 'google',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Estadísticas',
                    iconCls: 'estadisticas',
                    scope: this,
                    itemId: 'estadisticas',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Resultados Anteriores',
                    iconCls: 'ball',
                    scope: this,
                    itemId: 'resultadosAnteriores',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Reporte de Prensa',
                    iconCls: 'reporteprensa',
                    scope: this,
                    itemId: 'reporte-prensa',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Radio',
                    iconCls: 'radio',
                    scope: this,
                    itemId: 'radio',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Videos',
                    iconCls: 'videos',
                    scope: this,
                    itemId: 'videos',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Wallpapers',
                    iconCls: 'wallpapers',
                    scope: this,
                    itemId: 'wallpapers',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Play by Play',
                    iconCls: 'pbp',
                    scope: this,
                    itemId: 'playbyplay',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Configuracion',
                    iconCls: 'settings',
                    scope: this,
                    itemId: 'configuracion',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Acerca',
                    iconCls: 'acerca',
                    scope: this,
                    itemId: 'acerca',
                    cls: 'btn-navegacion',
                    handler: function() {
                        Ext.Viewport.hideMenu('left');
                    }
                }


            ]
        });


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


    },
    onBtnShowMenuTap: function(button, e, eOpts) {


        if(Ext.Viewport.getMenus().left.isHidden())
        {
            Ext.Viewport.showMenu('left');
        }
        else
        {
            Ext.Viewport.hideMenu('left');
        }


    }


});

As you can see in the above code, we load a view called "Tabs" via the xtype "tabs", the content of this view is:

Code:

Ext.define('MagallanesBBC.view.Tabs', {
    extend: 'Ext.tab.Panel',
    xtype: 'tabs',


    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        tabBarPosition: 'bottom',
        
        items: [
            {
                xtype: 'homecard'
            },
            {
                xtype: 'noticiascard'
            },
            {
                xtype: 'calendariocard'
            },
            {
                xtype: 'resultadoscard'
            },
            {
                xtype: 'rostercard'
            }
        ]
    }
});

Well, everything it's fine until we need to push a new view when a item from the menu it's tapped.

I used a main controller called "Main.js" to listening the tap event, this it's the code:

Code:

Ext.define('MagallanesBBC.controller.Main', {
    extend: 'Ext.app.Controller',


    config: {
        refs: {
            juegosDelDia: '[itemId=btnJuegosDia]'
        },
        control: {
            juegosDelDia: {
                tap: 'onView1'
            },
            "tabpanel #ext-tab-1":{
                tap: 'onTabHome'
            },
            "tabpanel #ext-tab-2":{
                tap: 'onTabNoticias'
            },
            "tabpanel #ext-tab-3":{
                tap: 'onTabCalendario'
            },
            "tabpanel #ext-tab-4":{
                tap: 'onTabResultados'
            },
            "tabpanel #ext-tab-5":{
                tap: 'onTabRoster'
            }
        }
    },


    onTabHome: function(button, e, options) {
        Ext.getCmp('MyToolbar').setTitle('Magallanes BBC');
    },
    onTabNoticias: function(button, e, options) {
        Ext.getCmp('MyToolbar').setTitle('Noticias');
    },
    onTabCalendario: function(button, e, options) {
        Ext.getCmp('MyToolbar').setTitle('Calendario');
    },
    onTabResultados: function(button, e, options) {
        Ext.getCmp('MyToolbar').setTitle('Resultados');
    },
    onTabRoster: function(button, e, options) {
        Ext.getCmp('MyToolbar').setTitle('Roster');
    },


    onView1: function(button, e, options) {


        //Here i need to push a new view


    }




});

I'm using sencha touch 2.3.1 and apache cordova and i cannot to open a new view to show the content of each item on the menu.

What it's the best or correct way to do this?.

Someone can help me?

I appreciate every help that you can offer me,

Greetings,

Javier

How to push a new view from menu (Ext.Menu)