更改EXTjs的ext.tab.Tab组件的高度或添加填充

Changing the height or adding padding to an EXTjs ext.tab.Tab component

本文关键字：高度 添加 组件 填充 Tab EXTjs ext tab 更改      更新时间：2023-09-26

我有一个标签面板，里面有几个标签。我在标签中使用iconCls属性给每个标签一个图像和它的标题。我使用的是fam fam 16x16的图标，默认的标签空间是在顶部/底部切断图像。

我试着通过改变边缘来搞乱图标的类，但它没有帮助。根据文档，ext.tab.Tab组件具有padding和height属性，但是设置这些属性在运行时不会对制表符产生影响。

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
    },
});

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

编辑:它似乎我有同样的问题与"标题"(与+/-栏)当用作手风琴面板

您可以使用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'
    }

});

相关文章：