Question

我正在跟进Sencha触摸教程并制作简单的Tabbar 但是tabbar的布局显示为垂直方向无论如何我不能改为水平我做的东西有问题吗？

教程是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

如何将布局更改为水平？

Answer 1

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

为什么Tabchanel默认布局在Sencha touch 2上是垂直的？

1 个答案: