| Sencha Touch 2 | Como mostrar vistas en un navigationview
Buenas tardes estimados amigos.
Hace poco que empece a desarrollar aplicaciones móviles con Phonegap y Sencha Touch 2.
Mi problema es el siguiente:
1. Tengo una vista de tipo navigation.View la cual contiene el siguiente código:
Código:
Ext.define('MagallanesBBC.view.Main', {
extend: 'Ext.navigation.View',
fullscreen: true,
requires: ['MagallanesBBC.view.Tabs'],
title: 'Magallanes BBC',
config: {
ui: 'light',
autoDestroy: false,
navigationBar: {
hidden: true
},
listeners: [
{
fn: 'onNvMasterInitialize',
event: 'initialize'
},
{
fn: 'onBtnShowMenuTap',
event: 'tap',
delegate: '#btnShowMenu'
}
],
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Magallanes BBC',
items: [
/*{
xtype: 'label',
html: 'Adisyonum',
id: 'lblPanelTittle'
},*/
{
xtype: 'button',
docked: 'left',
//height: 34,
id: 'btnShowMenu',
itemId: 'mybutton11',
ui: 'plain',
//width: 62,
iconCls: 'menu'
}
]
}
]
},
onNvMasterInitialize: 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');
}
},
constructor : function(){
this.callParent(arguments);
this.push(new MagallanesBBC.view.Tabs());
}
});
Esta vista carga otra vista de tipo tab.Panel la cual contiene lo siguiente:
Código:
Ext.define('MagallanesBBC.view.Tabs', {
extend: 'Ext.tab.Panel',
xtype: 'tabs',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
cls: 'back',
styleHtmlContent: true,
scrollable: true,
/* items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},*/
items : [
/*{
docked : 'top',
xtype : 'titlebar',
title : 'Magallanes BBC',
items: [{
align: 'left',
//name: 'nav_btn',
iconCls: 'menu',
ui: 'plain',
handler: function() {
Ext.Viewport.toggleMenu('left');
}
}]
},*/
{
xtype : 'button',
cls : 'modus-button default',
text : 'Default Button'
},
{
xtype : 'button',
cls : 'modus-button primary',
text : 'Success Button'
},
{
xtype : 'button',
cls : 'modus-button info',
text : 'Info Button'
},
{
xtype : 'button',
cls : 'modus-button danger',
text : 'Danger Button'
}
]
},
{
xtype: 'noticiascard'
}
]
}
});
y tengo un controlador llamado Main que contiene lo siguiente
Código:
Ext.define('MagallanesBBC.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
juegosDelDia: '[itemId=btnJuegosDia]'
},
control: {
juegosDelDia: {
tap: 'onView1'
},
}
},
onView1: function(button, e, options) {
alert("Aquiii Estoy");
button.up('navigationview').push({
xtype: 'secondpage',
title: 'View2'
});
this.getMain().push({
xtype: 'secondpage'
});
},
});
Cuando se abre el menu lateral y le doy a la primera opcion que es la que tengo programada por ahora para capturar el evento tap, entonces me muestra el mensaje de alert() que dice "Aquiii Estoy" pero luego he intantado de varias maneras hacer el push de la vista que deseo pero no logro dar con eso.
Alguno tiene alguna idea sobre como puedo hacerlo? estoy usando el sencha touch 2.3.
Saludos y esperando que puedan ayudarme.
Javier |