Почему макет TabPanel по умолчанию вертикальный на Sencha touch 2?

Я следую руководству по Sencha touch и делаю простую панель вкладок.
Но, кстати, панель вкладок отображается как вертикальная.
Я все равно не могу изменить ее на горизонтальную.
Что-то не так, что я сделал?

Учебник http://senchalearn.github.com/Tabs-and-Toolbars/
И мой код ниже..

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Sencha</title>
    <link rel="stylesheet" href="app.css" type="text/css">

    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript">
        Ext.Loader.setConfig({
            enabled: true,
            pathes: {'Ext':'touch/src'}
        });
    </script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js 

Ext.application({
    name: 'Sencha',

    views: ['Main'],

    launch: function() {
        Ext.Viewport.add({
            xclass: 'Sencha.view.Main'
        });
    }
});

Main.js

Ext.define('Sencha.view.Main', {
    extend: 'Ext.TabPanel',
    config: {
        tabBar: {
            docked: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        items: [
            {title: 'Home', iconCls: 'more'},
            {title: 'Schedule'},
            {title: 'Setting'}
        ]
    }
});

Но результат показывает так..

http://goo.gl/YoPPr

Как я могу изменить макет на горизонтальный?


extjs tabpanel
person gentlejo    schedule 12.01.2013    source источник