extjs를 사용하는 방법 탭 항목에 캐 러셀

Question

탭에 3 개의 항목이 있으며 확장 상자와 같은 점 탐색을 표시하려고합니다. 여기 내 코드는 레이아웃 카드 표시기를 사용하여 코드를 수정했습니다. 따라서 표시기는 툴바에 탭을 추가 할 때와 동일한 카드 내용 및 표시기 기능을 카드에 사용합니다. 모든 지침하시기 바랍니다 .. 아래

코드

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

수정이 사용하는 카드 지수 및 탭 인덱스 변경 방법입니다.

// 카드의 변화에 ​​**의 ExtJS 고전에서

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

},