Ext JS change card layout items on button click

Ext.define('AxsMarine.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires:[
        'Ext.layout.container.Fit',
        'AxsMarine.view.Main'
    ],

    layout: {
        type: 'hbox'
    },
    itemId: 'MainView',
    items:
    [
           // xtype: 'app-main'

        {
            xtype: 'button',
            text: 'Static',
            handler:function()
            {

                var wizard = this.up().down('#wizard');
                wizard.activeItem ++;

                if (wizard.items.getCount() == wizard.activeItem) wizard.activeItem = 0;
                wizard.getLayout().setActiveItem(wizard.activeItem);
            }
        },
        {
            xtype: 'container',
            layout:'card',
            alias:'widget.wizard',
            itemId: 'wizard',
            activeItem: 0, // index or id
            items:
            [
                {
                    id: 'card-0',
                    html: 'Step 1'
                },
                {
                    id: 'card-1',
                    html: 'Step 2'
                },
                {
                    id: 'card-2',
                    html: 'Step 3'
                }
            ]
        }

    ]
});