Question

这是一个我很难研究和追踪的问题。在视图中加载以下面板时，每个选项卡标题上都会显示滚动条（对于所有选项卡，不是一个长滚动条，而是单个选项卡标题）。这对我来说不是一个大问题，因为我在Mountain Lion上使用小滚动条，但是旧版OS X版本的其他用户拥有巨大的蓝色滚动条，可以阻止整个标签。

当我拿到截图时，我会发布截图，但这是代码：

Ext.define('App.view.case.CasePanel', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.case-panel',
    title : 'Edit Case',
    layout: 'fit',
    border: false,
    autoScroll: true,
    constrainHeader: true,

    initComponent: function() {
        this.items = [{
            xtype: 'panel',
            autoScroll: true,
            layout: 'border',
            items: [{
                region: 'west',
                xtype: 'case-edit-case-info',
                split: true,
                border: true,
                width: 300
            },{
                region: 'center',
                xtype: 'tabpanel',
                activeTab: 0,
                autoScroll: true,
                border: false,
                defaults: {border:false, bodyStyle:'padding:5px'},
                items: [{
                    title: 'One',
                    xtype: 'case-edit-tab-one'   // these aren't the actual tab names, but you get the idea.
                },{
                    title: 'Two',
                    xtype: 'case-edit-tab-two'
                },{
                    title: 'Three',
                    xtype: 'case-edit-tab-three'
                },{
                    title: 'Four',
                    xtype: 'case-edit-tab-four'
                },{
                    title: 'Five',
                    xtype: 'case-edit-tab-five'
                },{
                    title: 'Six',
                    xtype: 'case-edit-tab-six'
                },{
                    title: 'Seven',
                    xtype: 'case-edit-tab-seven'
                }]
            }]
        }];

        this.bbar = [{
            text: 'Save',
            action: 'save'
        }, {
            text: 'Cancel',
            action: 'cancel'
        }];

        this.callParent(arguments);
    }
});

关于它为什么要这样做的任何想法？

（Mac OS X，最新Chrome版本）

Answer 1

尝试从第一个面板中删除autoScroll：

initComponent: function() {
    this.items = [{
        xtype: 'panel',
        autoScroll: true,
        layout: 'border',
        ...
    }]
}

ExtJS水平滚动条阻止TabPanel中的标签标题

1 个答案: