Sencha Touch 1.x TabPanel to the left Tabbar

First look at the effect

Actually, it's going to hit a problem.

Sencha Touch, the Tabbar can only be displayed if it is set above or below.

If you set it to the left, the default is to produce the result:

To solve this problem, my first reaction is to use CSS. But that undoubtedly adds to the complexity. (I did, too, and it was a terrible problem.)

In fact, as long as the layout of Sencha touch cooked a little, analysis, it is easy to find the key to the problem.

Level a row over the Tab1,tab2,tab3 button, what is this? This is not the Hbox layout!

OK, which means to make it vertical, just change the Hbox layout to VBox layout.

The first of these measures

Because TAB1,TAB2,TAB3 is inside the Tabbar, we changed the layout of Tabbar to VBox.

The code is as follows:

TabBar: {
    ' VBox ' ,
    '  Left '
}

Found no effect. Toss it out. Find the following wording to work:

TabBar: {
    Layout: {
        ' VBox '
    },
    '  Left '
}

Reason why ... Didn't understand.

In this way, the effect of the operation is as follows:

Beautifying and Perfecting

Close together, it's hard to see. So I tried to configure the margin. I tried to use CSS syntax to match the margin to make sense.

Surprise. You can configure margin for each direction individually.

TabBar: {
    Layout: {
        ' VBox '
    },
    Defaults: {
        ' Ten 0 0 0 ' ,
    },
    '  Left '
}

Thus, the final result was obtained. That's the way we saw it at the beginning.

The complete code is as follows:

Ext.setup ({
Onready:function() {
        NewExt.tabpanel ({
Fullscreen:true,
Type:'Dark',
TabBar: {
Layout: {
Type:'VBox'
},
Defaults: {
Margin:'Ten 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'
}]
});
}
});

Sencha Touch 1.x TabPanel to the left Tabbar