Sencha touch 选项卡面板中的Vbox布局问题

我对

vbox

布局有问题，所以我创建了一个简单的示例 这说明了问题所在，即如何将我的

vbox

布局设置为

fit

屏幕的高度

在

hbox

屏幕上，视图看起来与预期一致

---

但是，当我简单地将

hbox

更改为

vbox

时，所有文本覆盖在左上角

---

下面给出了所有的代码，它在

---

app.js

---

MainView.js

Ext.define("SenchaFiddle.view.MainView", {
  extend: 'Ext.tab.Panel',
  // ...    
  config: {
    tabBarPosition: 'bottom',
    items: [
      {xtype: 'hbox-view'}, // very nice code :)
      {xtype: 'vbox-view'},
    ]
  }
});

---

HboxView.js

---

VboxView.js

---

问题出在MainView.js结构中。 vbox包装容器没有布局：

{
  title: 'vbox',
  iconCls: 'action',
  layout: card, // or fit, etc. :)
  items: [
    {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Vbox'
    },
    {
      xtype: 'vbox-view'
    }
  ]
},

但这不是很好的代码。 最好将标题栏和一些配置添加到VBoxView和HboxView定义中：

 Ext.define("SenchaFiddle.view.VboxView", {
        extend: 'Ext.Container',
        xtype: 'vbox-view',
        config: {
            style: 'background-color: #0f0',
            layout: 'vbox',
            title: 'Vbox', // this is better place for title and iconCls :)
            iconCls: 'action',
            items: [
                // title bar is here :) 
                {
                   type: 'titlebar',
                   docked: 'top',
                   title: 'Navigation',
                },
                {
                    xtype: 'panel',
                    html: 'baz',
                    style: 'background-color: #ff0',
                    flex: 1
                },
                {
                    xtype: 'panel',
                    html: 'foo',
                    style: 'background-color: #f00',
                    flex: 2
                },
                {
                    xtype: 'panel',                
                    html: 'bar',
                    style: 'background-color: #fff',
                    flex: 3
                }
            ]
        }
    });

在MainView.js中

Ext.define("SenchaFiddle.view.MainView", {
  extend: 'Ext.tab.Panel',
  // ...    
  config: {
    tabBarPosition: 'bottom',
    items: [
      {xtype: 'hbox-view'}, // very nice code :)
      {xtype: 'vbox-view'},
    ]
  }
});

---

您使用的是什么版本的Sencha？您使用的CSS文件是什么？SenchaFIDLE上使用的是2.0.1。我认为它们包括CSS。默认情况下有自动布局吗？我添加了“适合”的布局，并创建了一个新的SenchaFIDLE：是的，它更干净，可以打破它。我使用Sencha的CLI工具生成了基本代码。他们可能应该这样做，但是每一个从教程/cmd开始的初学者都会得到这段代码。

{
  title: 'vbox',
  iconCls: 'action',
  layout: card, // or fit, etc. :)
  items: [
    {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Vbox'
    },
    {
      xtype: 'vbox-view'
    }
  ]
},

 Ext.define("SenchaFiddle.view.VboxView", {
        extend: 'Ext.Container',
        xtype: 'vbox-view',
        config: {
            style: 'background-color: #0f0',
            layout: 'vbox',
            title: 'Vbox', // this is better place for title and iconCls :)
            iconCls: 'action',
            items: [
                // title bar is here :) 
                {
                   type: 'titlebar',
                   docked: 'top',
                   title: 'Navigation',
                },
                {
                    xtype: 'panel',
                    html: 'baz',
                    style: 'background-color: #ff0',
                    flex: 1
                },
                {
                    xtype: 'panel',
                    html: 'foo',
                    style: 'background-color: #f00',
                    flex: 2
                },
                {
                    xtype: 'panel',                
                    html: 'bar',
                    style: 'background-color: #fff',
                    flex: 3
                }
            ]
        }
    });

Ext.define("SenchaFiddle.view.MainView", {
  extend: 'Ext.tab.Panel',
  // ...    
  config: {
    tabBarPosition: 'bottom',
    items: [
      {xtype: 'hbox-view'}, // very nice code :)
      {xtype: 'vbox-view'},
    ]
  }
});