0

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

But the result shows like this..

http://goo.gl/YoPPr

How can I change the layout to horizontal?

gentlejo
  • 2,690
  • 4
  • 26
  • 31

1 Answers1

0
Ext.define('Sencha.view.Main', {
extend: 'Ext.TabPanel',
config: {
    layout: 'hbox',
    ...
}
CruorVult
  • 823
  • 1
  • 9
  • 17