无法使用 Sencha Architect 导航 CardLayout

Question

谁能指出我在以下代码中做错了什么？我要做的就是使用容器创建卡片布局并使用两个简单的按钮处理程序函数导航它们。

P.S：我正在使用 Sencha Architect 3 来执行此操作。因此只有处理函数代码对我来说是可编辑的。

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;'
        }
    ]
}

});

我已经为此苦苦挣扎了好几个小时。因此，我们非常感谢您对此提供任何帮助。

Answer 1

您是否收到 javascript 错误？我不确定我是否理解这一行：

cardContainer.getActiveItem();

您期望“cardContainer”是什么？我假设您希望它成为容器本身，我认为它会更“这个”但不确定。

我的建议是把它放在一个非常简单的 fiddle.sencha.com 中，并带有它自己的 Ext.application 启动事件，然后发布一个指向 fiddle 的链接，我们可以玩它，看看发生了什么。 SA 是一个很棒的工具，但对于调试此类问题没有多大帮助。