I,ve got some code and I'm not able to change my view by click on a button. Can any body help me?

Here's my code so far:


name : 'App',
defaultUrl : 'Home/index',
launch : function() {
this.viewport = new App.views.Viewport();


Ext.regController('Home', {

index : function() {
if (!this.indexView) {
this.indexView = this.render({
xtype : 'HomeIndex'


App.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen : true,
layout : 'card',
cardSwitchAnimation : 'slide',
dockedItems : [ {
xtype : 'toolbar',
title : 'SomeTitle'
} ]


App.views.HomeIndex = Ext.extend(Ext.Panel, {
styleHtmlContent: true,
style: 'background: #000000',
dockedItems: [
dock: 'top',
xtype: 'button',
itemId: 'infoBtn',
text: 'Info'
Ext.reg('HomeIndex', App.views.HomeIndex);

So far everthing is fine, when I start my App on my Smartphone it appears with the info-button. But now I have another view:


App.views.Info = Ext.extend(Ext.Panel, {
html: '<p>Here you can read the info about this page...</p>',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8efed'
Ext.reg('Info', App.views.Info);

And I want this InfoView Panel to slide in as a card when I press the info-button. How can I do that? And where? I need to get the button an set a handler, but how to get the button? And where to do that?

It would also be helpful if somebody showed me how navigation is done with sencha touch. Because this is the only way i found until now. Thanks a lot already.