Sencha Touch 1.x TabPanel的左側TabBar

先看看效果

其實是會碰到問題滴

sencha touch里，tabBar只有設在上面或者下麵的時候，才能正常顯示。

如果設置到左側的話，預設就會產生這樣的結果：

要解決這個問題，我的第一反應就是用css。但是那無疑增加了複雜度。（我確實也那麼搞過，麻煩得要命）

其實只要對sencha touch的佈局熟一點，分析一下，很容易就能找到問題的關鍵。

水平一排過來的Tab1,Tab2,Tab3按鈕，這是什麼？這不就是hbox佈局嗎！

OK，也就是說要讓它變成垂直的，只需要把hbox佈局改為vbox佈局即可。

第一個措施

因為Tab1,Tab2,Tab3是在TabBar裡面的，所以我們把tabBar的layout改為vbox。

代碼如下：

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

發現沒有效果。折騰了一下發現以下的寫法才行得通：

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

原因嘛。。。沒弄懂。

這樣一來，運行的效果就成了這個樣子：

美化完善

緊挨在一起，很難看。於是我嘗試著配置margin。我試著用css的語法來配margin居然行得通。

驚喜呀。可以單獨配置每個方向的margin。

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

於是，得到了最終的結果。也就是我們開頭看到的那個樣子。

完整代碼如下：

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