2011-08-18 64 views
4

我有一个带有几个选项卡的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 
    }, 
}); 

也许我误解了这些属性是如何工作的,但页面上的所有内容看起来都是一样的。

编辑:当用作手风琴面板时,出现“标题”(带有+/-的栏)时出现同样的问题。

+0

你为什么不尝试用CSS? – Unknown

+0

我试过了,我可以单独更改按钮的属性,但标签面板的内容窗口不会被推下来以适应新的高度。我希望将这些属性传递给按钮也会影响内容窗口。也许不会? – Robodude

+0

Ok.But尝试更改使用标签在css中的标签属性,你可以得到特定的CSS在firebug.Hope你会得到结果。 – Unknown

回答

2

可以通过使用上的TabPanel的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' 
    } 

});