如何为选项卡项目使用 extjs 轮播

Question

我在选项卡中有 3 个项目，想像 extjs 轮播一样显示点导航。这是我的代码使用布局卡指示器修改代码。因此指示器适用于卡片相同的卡片内容和选项卡所需的指示器功能，因为我在工具栏中添加了选项卡。请任何指导..

下面是代码

Ext.define('MyPage.view.search.CardIndicator', {
    extend: 'Ext.Container',
    xtype: 'layout-card-indicator',
    controller: 'layout-card-indicator',

    requires: [
        'Ext.layout.Card',
        'Ext.tab.Panel'
    ],

    height: 300,
    layout: 'fit',
    width: 400,

    viewModel: {
        data: {
            tapMode: 'direction'
        }
    },

    items: [{
        xtype: 'panel',
        reference: 'panel',
        shadow: 'true',
        bodyPadding: 15,

        layout: {
            type: 'card',
            // The controller inserts this indicator in our bbar
            // and we publish the active index and card count
            // so we can easily disable Next/Prev buttons.
            indicator: {
                reference: 'indicator',
                bind: {
                    tapMode: '{tapMode}'
                },
                publishes: [
                    'activeIndex',
                    'count'
                ]
            }
        },

        items: [{
            title:'abc',
            html: '<h2>Welcome to the Demo Wizard!</h2><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
        }, {
            title:'abc',
            html: '<p>Step 2 of 3</p><p>Almost there.  Please click the "Next" button to continue...</p>'
        }, {
            title:'abc',
            html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
        }],

        bbar: {
            reference: 'bbar',
            items: [
            {
                text: '&laquo; Previous',
                handler: 'onPrevious',
                bind: {
                    disabled: '{!indicator.activeIndex}'
                }
            },
            // the indicator is inserted here
            {
                text: 'Next &raquo;',
                handler: 'onNext',
                bind: {
                    disabled: '{indicator.activeIndex == indicator.count - 1}'
                }
            }
            ]
        }
    }, 
    {
        xtype: 'toolbar',
        docked: 'top',
        ui: 'transparent',
        padding: '5 8',
        layout: 'hbox',

        defaults: {
            shadow: 'true',
            ui: 'action'
        },

        items: [{
            xtype: 'tabpanel',
            // bind: '{tapMode}',

            tabBar: {
        docked: 'top',
        scrollable: 'horizontal',
        height:'44px',
        cls:'tabbuttons',
    },

    items: [
    {
        title: 'Tab 1'
    }, {
        title: 'Tab 2'
    }, {
        title: 'Tab 3'
    }
    ],
        }]
    }
    ]
});

控制器

Ext.define('MyPage.view.search.CardIndicatorController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.layout-card-indicator',

    init: function (tabspanel, value, oldValue) {
        var bbar = this.lookup('bbar');
        var card = this.lookup('panel').getLayout();

        // Lazily create the Indicator (wired to the card layout)
        var indicator = card.getIndicator();

        // Render it into our bottom toolbar (bbar)
        bbar.insert(1, indicator);
        var tabs = tabspanel.config.items;

        console.log(tabs);

    },

    onNext: function () {
        var card = this.lookup('panel').getLayout();

        card.next();
    },

    onPrevious: function () {
        var card = this.lookup('panel').getLayout();

        card.previous();
    }
});

Answer 1

使用卡片索引和标签索引更改方法解决此问题。

分享我的答案，它将帮助您为带有底部指示器的选项卡创建视图

// 换卡

cardindexchange: function(panel, value, oldValue) {
    var activeCard = Ext.getCmp('cards').getActiveItem();
    activeIndex = Ext.getCmp('cards').indexOf(activeCard);
    Ext.getCmp('tabs').setActiveItem(activeIndex);

},

如何为选项卡项目使用 extjs 轮播

How to use extjs Carousel for tab items

javascript

extjs

sencha-touch-2

extjs6-modern