The left TabBar and senchatabbar of Sencha Touch 1.x TabPanel

The left TabBar and senchatabbar of Sencha Touch 1.x TabPanel
First look at the effect

Actually, problems may occur.

In sencha touch, tabBar can be displayed normally only when it is set on or below.

If it is set to the left side, the following result is generated by default:

To solve this problem, my first reaction is to use css. But that undoubtedly increases complexity. (I did that too, so it's so troublesome)

In fact, as long as you are familiar with the layout of sencha touch, you can easily find the key to the problem.

Tab1, Tab2, and Tab3 buttons in a horizontal row. What is this? Isn't that the hbox layout!

OK, that is, to make it vertical, you only need to change the hbox layout to the vbox layout.

First measure

Because Tab1, Tab2, and Tab3 are in TabBar, we change layout of tabBar to vbox.

The Code is as follows:

tabBar : {
    layout: 'vbox',
    dock: 'left'
}

No effect was found. After a while, I found that the following statements work:

tabBar : {
    layout: {
        type: 'vbox'
    },
    dock: 'left'
}

Why... I don't understand.

In this way, the running effect is like this:

Improved beautification

It's hard to see them together. So I tried to configure margin. I tried to use the css syntax to match margin.

Surprise. You can configure the margin in each direction separately.

tabBar : {
    layout: {
        type: 'vbox'
    },
    defaults: {
        margin: '10 0 0 0',
    },
    dock: 'left'
}

Therefore, the final result is obtained. That is what we see at the beginning.

The complete code is as follows:

Ext.setup({
    onReady: function() {
        new Ext.TabPanel({
            fullscreen: true,
            type: 'dark',
            tabBar : {
                layout: {
                    type: 'vbox'
                },
                defaults: {
                    margin: '10 0 0 0',
                },
                dock: 'left'
            },
            sortable: true,
            items: [{
                title: 'Tab 1',
                html: '1',
                cls: 'card1'
            }, {
                title: 'Tab 2',
                html: '2',
                cls: 'card2'
            }, {
                title: 'Tab 3',
                html: '3',
                cls: 'card3'
            }]
        });
    }
});