높이 변경 또는 EXTjs ext.tab.Tab 구성 요소에 패딩 추가

Question

내부에 몇 개의 탭이있는 탭 패널이 있습니다. 탭의 iconCls 속성을 사용하여 각 탭에 제목과 함께 이미지를 제공합니다. fam fam fam 16x16 icons을 사용하고 있고 기본 탭 공간은 이미지를 상단/하단에서 자르고 있습니다.

나는 여백을 변경함으로써 아이콘의 클래스를 어지럽 혔지 만 도움이되지 않았습니다. 문서에 따르면 ext.tab.Tab 구성 요소에는 패딩 및 높이 속성이 있지만 런타임에 탭에 영향을 미치지 않습니다.

Ext.define('AM.view.Tab.Standard', { 
    extend: 'Ext.tab.Panel', 
    alias: 'widget.TabStandard', 

    region: 'center', // a center region is ALWAYS required for border layout 
    deferredRender: false, 
    activeTab: 0,  // first tab initially active 

    initComponent: function() { 
     this.items = this.buildItems(); 

     this.callParent(arguments);  
    }, 

    buildItems: function(){ 
     var items = 
      [ 
       { 
        padding: 10, // nope :(
        title: 'Gantt', 
        autoScroll: true, 
        iconCls: 'gantt icon', 
       }, 
       { 
        height: 10, // nope :(
        title: 'Logs', 
        autoScroll: true, 
        iconCls: 'logs icon', 
       }, 
       { 
        title: 'Help', 
        autoScroll: true, 
        iconCls: 'help icon', 
       } 
      ]; 
     return items 
    }, 
}); 

아마 이러한 속성이 작동하는 방식을 잘못 이해하고 있지만 페이지의 모든 내용이 동일하게 보입니다.

편집 : 아코디언 패널로 사용할 때 "제목"(+/-가있는 막대)과 동일한 문제가 발생합니다.

Answer 1

당신은 탭 패널에 tabBar 재산 사용하여 탭 패널에서 탭을 사용자 정의 할 수 있습니다

var tabpanel = new Ext.tab.Panel({ 
    plain: true, 
    region: 'center', 
    tabBar: { 
     defaults: { 
      flex: 1, // if you want them to stretch all the way 
      height: 20, // set the height 
      padding: 6 // set the padding 
     }, 
     dock: 'top' 
    } 

을});