Ext JS에서 멀티 컬러 탭 버튼을 만드는 방법은 무엇입니까?

Question

안녕하세요!

ExtJS를 기반으로 우리가 작업하는 프로젝트 fontend가 5.1 우리가 Ext.tab.Panel 몸뿐만 아니라 탭 버튼/헤더뿐만 아니라 사용하여 멀티 컬러 TabItem을 구현해야. 각각 TabItem의 바디 스타일을 변경할 수 있지만 변경할 수 없습니다 Tab Button/Header. 탭 단추/머리글에 대해 선택기를 설정할 수 없습니다.

여기에 일반 예이다 그러나 우리는 문제를 해결하기 위해 ExtJS로 MVVM

Ext.create('Ext.tab.Panel', { 
    width  : 300, 
    height : 200, 
    activeTab : 0, 
    items  : [{ 
     title : 'Tab 1', 
     html : 'A simple tab' 
    }, { 
     title : 'Tab 2', 
     html : 'Another one' 
    }], 
    renderTo : Ext.getBody() 
}); 

당신이 친절하게도시겠습니까에서 구현해야?

그것은 매우 간단

Answer 1

, 당신이 당신의 scss 또는 css 파일에서 별도로 스타일을 유지할 수있는 tabConfig에서 cls 속성을 추가 할 수 있습니다. 다음은 그 예입니다. -

Ext.create('Ext.tab.Panel', { 
    width  : 300, 
    height : 200, 
    activeTab : 0, 
    items  : [{ 
     title  : 'Tab 1', 
     cls  : 'tab-item-01-body', 
     tabConfig : { 
      tooltip : 'Tab 1', 
      cls  : 'tab-item-01-head' 
     }, 
     html  : 'A simple tab', 
    }, { 
     title  : 'Tab 2', 
     cls  : 'tab-item-02-body', 
     tabConfig : { 
      tooltip : 'Tab 2', 
      cls  : 'tab-item-02-head' 
     }, 
     html  : 'Another one' 
    }], 
    renderTo : Ext.getBody() 
});