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();
    }
});

In **ExtJs classic** don't have **carousel**. for this you need to create custom component as per your requirement. [example](https://github.com/parham-fazel/extjs-carousel) — Narendra Jadhav, Sep 16 '17 at 05:32
Thanks @Njdhv I modified the code now i am trying to use same items for card and tab.. Can you please look in to this. As i am using this for modern only. — Sagar, Sep 16 '17 at 12:56
for if you want only **modern** than please refer [ExtJs Docs](https://docs.sencha.com/extjs/6.5.1/modern/Ext.carousel.Carousel.html) this will help you for modern — Narendra Jadhav, Sep 16 '17 at 13:29

score 0 · Accepted Answer · answered Sep 17 '17 at 12:39

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);

},

How to use extjs Carousel for tab items

1 Answers1