关于tabpanel tabPosition的歧义：左

Question

这是测试代码：

Ext.define('App.TabsWin', {
    extend: 'Ext.Window',

    width: 600,
    height: 400,
    layout: 'fit',
    autoShow: true,
    viewModel: true,

    initComponent: function() {
        Ext.apply(this, {
            width: 740,
            items: [{
                xtype: 'tabpanel',
                reference: 'tabpanel',
                border: false,
                defaults: {
                    bodyPadding: 10,
                    autoScroll: true,
                    closable: true,
                    border: false
                },
                tabPosition: 'left',
                tabRotation: 0,
                items: [{
                    title: 'Tab 1',
                    icon: null,
                    glyph: 42,
                    html: 'long text'
                }, {
                    title: 'Tab 2',
                    icon: null,
                    glyph: 70,
                    html: 'extra long text'
                }, {
                    title: 'Tab 3',
                    icon: null,
                    glyph: 86,
                    html: 'long text'
                }]
            }]
        });

        this.callParent();
    }
});
Ext.create('App.TabsWin');

如果您在浏览器控制台中运行the code，它会按预期运行，但如果您运行该代码，则标签位于左侧但不是水平对齐。

任何人都可以解释发生了什么或如何解决它？

Answer 1

“在浏览器控制台中运行”是什么意思？

我在示例网站上没有发现任何问题。

如果你复制＆amp;将上述代码粘贴到浏览器控制台，未加载所需的css样式，因此显示可能看起来很奇怪/已损坏。

使用https://fiddle.sencha.com来播放代码，它可以满足所有需要。