Unable to Navigate CardLayout using Sencha Architect

Question

Can anyone point out what I am doing wrong in the following code ?. All I am trying to do is Create a cardlayout using a container and navigate them using two simple button handler functions.

P.S: I am using Sencha Architect 3 to do this. Therefore only the handler function code is editable for me.

Ext.define('Chatper04.view.cardContainer', {
extend: 'Ext.Container',
alias: 'widget.cardContainer',

requires: [
    'Ext.Toolbar',
    'Ext.Button',
    'Ext.Spacer'
],

config: {
    fullscreen: true,
    itemId: 'cardContainer',
    scrollable: 'horizontal',
    layout: {
        type: 'card',
        animation: 'slide'
    },
    items: [
        {
            xtype: 'toolbar',
            docked: 'top',
            title: 'Card Layout',
            items: [
                {
                    xtype: 'button',
                    handler: function(button, e) {
                        var currentContainer = cardContainer.getActiveItem(),
                            innerItems = cardContainer.getInnerItems(),
                            totalItems = innerItems.length,
                            currentIndex = innerItems.indexOf(currentContainer),
                            direction,
                            newIndex;

                        newIndex = currentIndex > 0 ? (currentIndex - 1) : (totalItems - 1);
                        cardContainer.animateActiveItem(newIndex, { type : 'slide',direction : 'right' });


                    },
                    ui: 'back',
                    text: 'Back'
                },
                {
                    xtype: 'spacer'
                },
                {
                    xtype: 'button',
                    handler: function(button, e) {
                        var currentContainer = cardContainer.getActiveItem(),
                            innerItems = cardContainer.getInnerItems(),
                            totalItems = innerItems.length,
                            currentIndex = innerItems.indexOf(currentContainer),
                            direction,
                            newIndex;

                        newIndex = currentIndex < (totalItems - 1) ? (currentIndex + 1) : 0;
                        cardContainer.animateActiveItem(newIndex, { type : 'slide',direction : 'left' });


                    },
                    ui: 'forward',
                    text: 'Forward'
                }
            ]
        },
        {
            xtype: 'component',
            html: 'Card 1',
            style: 'background-color: #99F;'
        },
        {
            xtype: 'component',
            html: 'Card 2',
            style: 'background-color: #F99;'
        },
        {
            xtype: 'component',
            html: 'Card 3',
            style: 'background-color: #9F9;'
        }
    ]
}

});

I have been struggling for hours with this now. Therefore any help on this is highly appreciated.

Answer 1

are you getting javascript errors? I'm not sure I understand this line:

cardContainer.getActiveItem();

what are you expecting "cardContainer" to be? I assume you want it to be the container itself which I think would be more "this" but not sure.

My advice is to put this in a very simple fiddle.sencha.com with it's own Ext.application launch event and then post a link to the fiddle and we can play with it and see what is going on. SA is a great tool but not that helpful for debugging problems like this.