爲什麼TabPanel默認佈局在Sencha touch 2上是垂直的？

我正在跟進Sencha觸摸教程並製作簡單的Tabbar。
但是，tabbar的佈局顯示爲垂直。
反正我不能改變水平。
我做了什麼錯？爲什麼TabPanel默認佈局在Sencha touch 2上是垂直的？

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

我怎樣才能改變佈局水平？

來源

2013-01-12 gentlejo

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

來源

2013-01-14 12:51:54 CruorVult

爲什麼TabPanel默認佈局在Sencha touch 2上是垂直的？

回答

相關問題