sencha-touch-2 - Sencha Touch 2 多视图布局

Question

我有一个包含 3 个不同视图（顶部工具栏、内容面板、底部工具栏）的视图，问题是内容面板（带有 Dataview 的面板）隐藏在 \ 隐藏工具栏（取决于项目的顺序）之后。

主要观点是：

Ext.define("myapp.view.myview", {
    extend: "Ext.Panel",
    alias: "widget.myview",
    requires: [
        'myapp.view.topMenu',
        'myapp.view.bottomMenu',
        'myapp.view.DataContainer'
   ],
   config: {
       fullscreen: true,
       layout: {
            type: 'fit',
       },
       items: [                                
          { xtype: 'DataContainer'},          
          { xtype: 'topMenu' }, 
          { xtype: 'bottomMenu' }
       ]
   }
});

我尝试过使用 Container 并尝试过 Spacers，但它并没有改变任何事情。谢谢。

Answer 1

嗨@ItayM，您可以更改您的config Ext.Panel容器，

config: {
   fullscreen: true,
   layout: {
        type: 'fit',
   },
   ...
}

至

config: {
   layout: 'vbox',
   ...
}

也许layout: { type: 'fit', },将其他元素重叠到您的Ext.Panel.

希望这些有所帮助。:)

Answer 2

明白了-我必须将工具栏放在容器内并将容器停靠在顶部/底部：

Ext.define("App.view.topMenu", {
extend: "Ext.Container",
alias: "widget.topMenu",

config: {          
    docked: "top",
    items: [
    {
        xtype: "toolbar",