Comment utiliser extjs Carousel pour les éléments de l'onglet

Question

J'ai 3 éléments dans des onglets et je veux afficher des points de navigation comme extjs Carousel. Voici mon code Modifié le code en utilisant l'indicateur de carte de disposition. Ainsi, l'indicateur fonctionne pour le même contenu de carte et la fonctionnalité d'indicateur requis pour les onglets car j'ai ajouté des onglets dans la barre d'outils. Toute orientation s'il vous plaît ..

ci-dessous est le 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' 
    } 
    ], 
     }] 
    } 
    ] 
}); 

Contrôleur

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

fixez-le avec des méthodes d'index de la carte et le changement d'index de tabulation.

partager ma réponse, il vous aidera à créer une vue pour onglet avec indicateur inférieur

// sur le changement de carte

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

},