sencha-touch-2 - 複数のビューを備えたSenchaTouch2レイアウト

Question

3つの異なるビュー（上部ツールバー、コンテンツパネル、下部ツールバー）を含むビューがあります。問題は、コンテンツパネル（データビュー付きのパネル）がツールバーの後ろに隠れていることです（アイテムの順序によって異なります）。

メインビューは次のとおりです。

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

config Ext.Panelこんにちは@ItayMからコンテナを変更できます、

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

に

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

たぶんlayout: { type: 'fit', },、他の要素をあなたのにオーバーラップさせますExt.Panel。

これらがお役に立てば幸いです。:)

Answer 2

了解しました-ツールバーをContainer内に配置し、Containerを上下にドッキングする必要がありました。

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

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