Sencha Touch 2 - switch views - sencha-touch-2

Question

I started to use the Sencha Touch 2 MVC, but I can't overcome the problem below.
I have an Ext.application code:
Ext.application({
name: 'ProjectName',
appFolder: APP_URL + "app",
enableQuickTips: true,
extend: 'Ext.app.Controller',
phoneStartupScreen: 'LOGO.png',
controllers: ['Site'],
views: ['Viewport_login', 'Viewport_reg'],
layout: 'vbox',
launch: function() {
//bootstrap
Ext.create("Ext.Container", {
requires: [
],
items: [
Ext.create("ProjectName.view.Viewport_login", {}),
Ext.create("ProjectName.view.Viewport_reg", {})
]
});
return true;
}
});
view 'Viewport_login' code:
Ext.define('ProjectName.view.Viewport_login', {
extend: 'Ext.Panel',
requires: [
'ProjectName.view.Login',
'ProjectName.view.Header'
],
fullscreen: true,
initialize: function() {
console.log("init viewpor_login");
Ext.create("Ext.Container", {
//fullscreen: true,
style: 'background-color: white;',
layout: 'vbox',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'Bheader'
},
Ext.create("widget.login")
]
});
this.callParent();
}
});
View 'Viewpoer_reg' code:
Ext.define('ProjectName.view.Viewport_reg', {
extend: 'Ext.Panel',
requires: [
'ProjectName.view.Reg',
'ProjectName.view.Header'
],
fullscreen: true,
initialize: function() {
console.log("init viewpor_reg");
Ext.create("Ext.Container", {
//fullscreen: true,
style: 'background-color: white;',
layout: 'vbox',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'Bheader'
},
Ext.create("widget.reg")
]
});
this.callParent();
}
});
view 'Header' code:
Ext.define('ProjectName.view.Header', {
extend: 'Ext.Panel',
alias: 'Bheader',
xtype: 'Bheader',
requires: [
'Ext.Img'
],
initialize: function() {
console.log("header inited");
},
config: {
cls: 'bg-holder',
items: [
Ext.create("Ext.Img", {
src: BASE_URL + 'assets/images/header3.png',
height: 35,
width: "100%",
style: "background-position: center 0px; "
})
]
}
});
And finally the 'Site' controller's code:
Ext.define('ProjectName.controller.Site', {
extend: 'Ext.app.Controller',
config: {
views: ['Viewport_login', 'Viewport_reg']
},
init: function() {
console.log('Init site controller');
// Start listening for events on views
this.control({
// example of listening to *all* button taps
'#login_button': {
tap: function () {
// HOW CAN I SWITCH TO 'VIEWPORT_REG' VIEW?
}
}
});
},
renderRegFOrm: function() {
},
onLaunch: function() {
console.log('onLaunch site controller');
},
});
First, I have a problem right now: The 'Header' does'nt appear if I load both views ('Viewport_login', 'Viewport_reg') in Container which created in Ext.application launch function. Can anyone help me, why?
Second, in the Controller code you can see the this.control(... section. How can I switch to other view in here?

Answer 1

From looking at your code, it appears that you only want one of login and register to appear at one time. I would recommend looking at the setActiveItem method for containers and switching views in this way.
I didn't understand your first question. Also, didn't understand why you have widget.login and widget.reg classes when you already have views called login and reg (can't you just use those?)