Ambiguity about tabpanel tabPosition:left

Question

This is the test code:

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');

If you run the code in browser's console it works as expected but if you run that code tabs are on left side but not horizontally aligned.

Can anyone explain what's happening or how to fix it?

Saki Saki · Accepted Answer · 2014-06-15T12:06:45

What do you mean by "run in browsers' console"?

I haven't found any problems on the examples site.

It can be that if you copy & paste the above code to the browser console the required css styles are not loaded so the display can look weird/corrupted.

Use https://fiddle.sencha.com for playing with a code, it has all what's needed.

Ambiguity about tabpanel tabPosition:left

This is the test code:

1 Answers