如何将 extjs Carousel 用于选项卡项

Posted 2023-02-25

【中文标题】如何将 extjs Carousel 用于选项卡项

【英文标题】：How to use extjs Carousel for tab items

【发布时间】：2017-09-15 21:18:23

【问题描述】：

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

下面是代码

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

【问题讨论】：

在 ExtJs 经典 中没有 carousel。为此，您需要根据您的要求创建自定义组件。 example

谢谢@Njdhv 我修改了代码，现在我正在尝试对卡片和标签使用相同的项目。请你看看这个。因为我只将它用于现代。

如果你只想要现代，请参考ExtJs Docs这将帮助你现代

【参考方案1】：

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

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

//关于换卡

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

,