switch views with button

[nofx]

I have two views. The main view has some text and a button. I want to use that button to switch to the second view. But i don't know how this works with sencha touch 2. This is basically how my code looks right now:

app.js


Ext.Loader.setConfig({ enabled: true });

Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
var app = new Ext.Application({
name: 'AM',
controllers: [
'Main'
]
});
}
});


The Main controller


Ext.define('AM.controller.Main', {
extend: 'Ext.app.Controller',
views : ['User'],
init: function() {
this.getUserView().create();
}
});


And the two views:


Ext.define('AM.view.User', {
extend: 'Ext.Container',
config: {
fullscreen:true,
items: [{
xtype: 'button',
text: 'New',
handler: function() {
// Call new view???
}
}
],
html: 'Testing<br />'
}
});


2nd view


Ext.define('AM.view.New', {
extend: 'Ext.Container',
config: {
fullscreen: true,
html: 'w00t'
}
});


Would be best if the new view is triggered from within a controller instead of a view ofcourse...

[nofx]

Fortunately i got a bit further. I added a Viewport.js which now loads the first view and i changed my app.js a bit. The first view has a button and when clicked, a controller succesfully responds to that. Next thing i need to do is switch to another view. But i still have problems with that... Here's my viewport:


Ext.define('AM.view.Viewport', {
extend: 'Ext.Container',
xtype: 'my-viewport',
config: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left'
}
},
fullscreen: true,
items: [{
xtype: 'User'
}]
}
});


The view i want to switch to:


Ext.define('AM.view.New', {
extend: 'Ext.Panel',
alias: 'widget.New',
config: {
//fullscreen:true,
html: 'Testing<br />'
}
});


And a small part from my controller where the button event is triggered, with all possible things i've tried (but none worked)...:


init: function() {
this.control ({
'#wut': {
tap: function() {
//alert('aaa'); <--- SHOWS
//this.getViewport().push({ xtype: 'New' });
//this.getViewport().setActiveItem('New');
//viewport = Ext.ComponentQuery.query('my-viewport');
//viewport[0].setActiveItem('New');
Ext.Viewport.setActiveItem('New');
}
}
});
}


Still hoping someone can help me out....

[estesbubba]

Try changing alias: 'widget.New' to xtype: 'New'

[nofx]

Try changing alias: 'widget.New' to xtype: 'New'

That's not working. It only seems to be working when i add an 'id' property to the second view. Then this code works:



this.getViewport().setActiveItem('New2'); // 'New2 is the ID of the view


BTW, when i add "xtype: 'New'" to the view, then everything stops rendering (white page).