0

我正在跟进 Sencha touch 教程并制作简单的 Tabbar。
但是tabbar的布局顺便显示为垂直的。
反正我不能换成水平的。
我做错了什么吗？

教程是http://senchalearn.github.com/Tabs-and-Toolbars/
我的代码在下面..

索引.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>

应用程序.js 

Ext.application({
    name: 'Sencha',

    views: ['Main'],

    launch: function() {
        Ext.Viewport.add({
            xclass: 'Sencha.view.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

如何将布局更改为水平？

4

1 回答 1

0 
Ext.define('Sencha.view.Main', {
extend: 'Ext.TabPanel',
config: {
    layout: 'hbox',
    ...
}
于 2013-01-14T12:51:54.960 回答