Sencha Touch 2 MVC: cómo cambiar las vistas con el botón
Tengo este controlador:
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
config: {
},
refs: [
{
ref: 'first',
selector: '#first'
},
{
ref: 'second',
selector: '#second'
}
],
views : [
'TestMain',
'TestSecond'
],
init: function() {
this.getTestMainView().create();
this.control({
'#first': {
tap: function() {
//how do I go to second view here?
}
},
'#second': {
tap: function() {
}
}
});
}
});
y estas 2 vistas:
Ext.define('MyApp.view.TestMain', {
extend: 'Ext.Container',
xtype: 'testmain',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
items: [
{
xtype: 'button',
ui: 'normal',
id: 'first',
text: 'Go To Second Screen',
handler: function() {
//how do I go to second view here?
}
}
]
}
});
...
Ext.define('MyApp.view.TestSecond', {
extend: 'Ext.Container',
xtype: 'testsecond',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
items: [
{
xtype: 'button',
ui: 'normal',
id: 'second',
text: 'Go To First Screen',
handler: function() {
}
}
]
}
});
Me gustaría que se cargue la segunda vista cuando hago clic en el primer botón y viceversa cuando hago clic en el segundo botón. Parece que puedo agregar código en mi controlador de botones o en la sección de control; agradecería un ejemplo de ambos (a menos que sean los mismos) y tal vez una explicación de qué método es mejor y por qué.
Tenga en cuenta que NO quiero usar el diseño de la tarjeta o el panel de pestañas: quiero saber cómo cambiar de una vista independiente a otra (en mi aplicación tengo un panel de tarjeta y una etiqueta de pestañas y necesito cambiar entre ambos grupos usando los botones )
¡¡Gracias!