extjstabs

Why TabPanel default layout is vertical on Sencha touch 2?

I'm following up Sencha touch tutorial and making simple Tabbar.
But the layout of tabbar is shown as vertical by the way.
I can't change to horizontal anyway.
Is there something wrong what I made?

Tutorial is http://senchalearn.github.com/Tabs-and-Toolbars/
And my code is below..

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

How can I change the layout to horizontal?

Solution 
  • Ext.define('Sencha.view.Main', {
extend: 'Ext.TabPanel',
config: {
    layout: 'hbox',
    ...
}