Question

有人能指出我在下面的代码中做错了吗？我想要做的就是使用容器创建一个cardlayout并使用两个简单的按钮处理函数导航它们。

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启动事件，然后发布一个链接到小提琴，我们可以玩它，看看发生了什么。 SA是一个很棒的工具，但对调试这样的问题没有帮助。

无法使用Sencha Architect导航CardLayout

1 个答案: