Extjs 탭 패널의 현대 단순 버튼 Tab Bar

Question

Tab 키가 여러 개인 탭 패널이 있습니다. 이제는 작업이있는 간단한 버튼을 탭 표시 줄에 추가하려고합니다. 클릭하면 다른 것들처럼 Tab을 열면 안되며 자바 스크립트 기능 만 실행하면됩니다.

Extjs에서는 어떻게 가능합니까?

Answer 1

예 가능합니다. tabBar 구성으로이 작업을 수행 할 수 있습니다. setActive 메서드를 추가해야하며 탭을 변경하려면 이벤트를 처리해야합니다.

각 탭 머리글마다 다른 스타일을 지정하고 여러 유형의 머리글을 사용할 수 있으며 피들에 표시된 것처럼 사용자 지정 색의 특정 탭을 쉽게 강조 표시 할 수 있습니다.

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     Ext.Viewport.add({ 
      xtype: 'panel', 
      layout: 'fit', 
      title: 'Tab Panel with custom button', 
      items: [{ 
       xtype: 'tabpanel', 
       id: 'tabPanel', 
       tabBar: { 
        items: [{ 
         xtype: 'button', 
         text: 'Batman', 
         ui: 'action', 
         setActive: function (active) { 
          this.setPressed(active); 
         }, 
         handler: function() { 
          var tabPanel = Ext.getCmp('tabPanel'); 
          tabPanel.setActiveItem(0); 
         } 
        }, { 
         xtype: 'button', 
         text: 'Goku', 
         ui: 'action', 
         setActive: function (active) { 
          this.setPressed(active); 
         }, 
         handler: function() { 
          var tabPanel = Ext.getCmp('tabPanel'); 
          tabPanel.setActiveItem(1); 
         } 
        }, { 
         xtype: 'spacer', 
         setActive: function() {} 
        }, { 
         xtype: 'button', 
         text: 'Custom button', 
         ui: 'decline', 
         setActive: function() {}, 
         handler: function() { 
          Ext.Msg.alert('Custom Message', 'This way you can do custom js function execution on tab bar'); 
         } 
        }] 
       }, 
       items: [{ 
        items: [{ 
         html: 'Batman is cool' 
        }] 
       }, { 
        items: [{ 
         html: 'Goku can defeat superman' 
        }] 
       }] 
      }] 
     }); 
    } 
}); 

예 바이올린 :https://fiddle.sencha.com/#view/editor&fiddle/29r1