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

Question

我的vbox布局有问题，所以我创建了一个简单的例子来说明这个问题，就是让我的vbox布局达到fit 屏幕的高度。

在hbox屏幕上，视图看起来像预期的那样。

---

但是，当我简单地更改hbox为vbox左上角的所有文本覆盖时。

---

所有代码都在下面给出，它在Sencha Fiddle

---

应用程序.js

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'SenchaFiddle',

    views: ['MainView', 'HboxView', 'VboxView'],

    launch: function() {
        Ext.Viewport.add(Ext.create('SenchaFiddle.view.MainView'));

    }
});

---

MainView.js

Ext.define("SenchaFiddle.view.MainView", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [{
            title: 'hbox',
            iconCls: 'action',

            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Hbox'
            }, {
                xtype: 'hbox-view'
            }]
        }, {
            title: 'vbox',
            iconCls: 'action',
            items: [{
                docked: 'top',
                xtype: 'titlebar',
                title: 'Vbox'
            }, {
                xtype: 'vbox-view'
            }]
        }]
    }
});

---

HboxView.js

Ext.define("SenchaFiddle.view.HboxView", {
    extend: 'Ext.Container',
    xtype: 'hbox-view',
    config: {
        style: 'background-color: #0f0',
        layout: 'hbox',
        items: [{
            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
        }]
    }
});

---

VboxView.js

Ext.define("SenchaFiddle.view.VboxView", {
    extend: 'Ext.Container',
    xtype: 'vbox-view',
    config: {
        style: 'background-color: #0f0',
        layout: 'vbox',

        items: [{
            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
        }]
    }
});

Answer 1

问题出在 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'},
    ]
  }
});