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

내부에 몇 개의 탭이있는 탭 패널이 있습니다. 탭의 iconCls 속성을 사용하여 각 탭에 제목과 함께 이미지를 제공합니다. fam fam fam 16x16 icons을 사용하고 있고 기본 탭 공간은 이미지를 상단/하단에서 자르고 있습니다.높이 변경 또는 EXTjs ext.tab.Tab 구성 요소에 패딩 추가

나는 여백을 변경함으로써 아이콘의 클래스를 어지럽 혔지 만 도움이되지 않았습니다. 문서에 따르면 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 
    }, 
});

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

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

출처

2011-08-18 Robodude

왜 CSS를 사용하지 않으셨습니까? – Unknown

나는 그것을 시도하고 개별적으로 버튼의 속성을 변경할 수 있지만 탭 패널의 내용 창은 새로운 높이를 수용하기 위해 아래로 밀리지 않습니다. 단추에 이러한 속성을 전달하면 내용 창에도 영향을 주길 바랬습니다. 아마? – Robodude

좋습니다. 그러나 CSS의 탭 ID를 사용하는 탭 속성을 변경하려고 시도하십시오. 귀하는 firebug에서 특정 CSS를 얻을 수 있습니다. 결과를 얻을 수 있기를 바랍니다. – Unknown

당신은 탭 패널에 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' 
    }

을});

출처

2013-06-18 21:19:41

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

답변

관련 문제