Cannot call method 'getMargin' of undefined

[wannes]

I've looked around and didn't find any solutions yet, so here's my q:
I got a button and I want it to load a new panel when it's clicked.
When i click it it says : Cannot call method 'getMargin' of undefined
So I'm guessing he doesn't know what App.views.viewport is in the controller file

app.js

Ext.regApplication({    name: 'App',
    defaultUrl: 'Home/index',
    layout: "card",

    launch: function()
    {
        this.views.viewport = new App.views.Viewport();
    },
});

viewport

App.views.Viewport = Ext.extend(Ext.Panel, {    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    dockedItems: [
        {
            xtype: 'toolbar',
            title: 'ChinaTown',
            items: [
                {xtype: 'spacer'},
                new Ext.Button({
                    text: 'Bestellingen',
                    itemId:'bestellingOverzicht',
                    listeners: {
                        tap: function(){
                            Ext.dispatch({
                                controller: 'Home',
                                action: 'showCart',
                                displayObject: new App.views.Cart(),
                                animation: {
                                    type: 'slide',
                                    direction: 'down',
                                    duration: 500
                                }
                            });
                        }
                    }
                })
            ],
        },
    ]
});

controller

Ext.regController('Home', {
showCart: function(options){
         
         App.views.viewport.setActiveItem(options.displayObject,options.animation);
    }

});

I feel kinda silly that it won't work, so can anyone push me in the right direction ?

[mitchellsimoens]

Two things come to mind right away... I wouldn't use new Ext.Button like you are, you should just be using config objects. What is App.views.Cart?