无法使用 Sencha Architect 导航 CardLayout

Posted 2023-02-26

【中文标题】无法使用 Sencha Architect 导航 CardLayout

【英文标题】：Unable to Navigate CardLayout using Sencha Architect

【发布时间】：2014-02-21 23:32:49

【问题描述】：

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

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


);

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

【问题讨论】：

你得到的错误是什么？

【参考方案1】：

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

cardContainer.getActiveItem();

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

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

【讨论】：

还有一件事，当您从按钮调用 setactiveitem 时，您应该从轮播中调用它，类似于 button.up().up().setAcceitem （即按钮来自工具栏，工具栏来自caurosel（我认为）