How to use extjs Carousel for tab items

Question

I have 3 items in tabs and want to show dots navigation like extjs Carousel. Here is my code Modified the code using layout card indicator. So indicator works for card same card content and indicator functionality required for tabs as I had added tabs in toolbar. Any Guidance please..

below is the code

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

Controller

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

Fix this using card index and tab index change methods.

sharing my answer it will help you to create a view for tab with bottom indicator

// on card change

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

},