sencha-touch - Sencha Touch - タブパネルのレイアウト

Question

デモをご覧ください: http://jsfiddle.net/JeaffreyGilbert/NGrry/1/

タブパネルのコンテンツを中央領域に表示するにはどうすればよいですか? 見出しは、ツールバーの下の上部にある必要があります。

予想されるレイアウト: http://dev.sencha.com/deploy/touch/examples/kitchensink/ . ソースは完全ではなく、tabPanel 自体だけだと思います。

助けてください。

Answer 1

通常、そのようなレイアウトを行うには、パネルをネストし、flex 属性を 1 に設定して空のパネルを使用する必要がありました。

コードを調整して、私が何を意味するかを示しましたhttp://jsfiddle.net/r9c2M/

たとえば、ツールバーのタイトルの下に「ホーム」というテキストを中央に配置するには、最初のタブパネル項目を次のように変更しました

{
    title: 'Home',
    layout: 'vbox',
    items: [
        {layout: 'hbox',
         items: [
            {flex: 1},
            {html: '<h2>Home</h2>'},
            {flex: 1}
        ]},
        {flex: 1}
    ],
    iconCls: 'home',
    cls: 'card card1'}

また、tabpanel は、dockedItem ではなく、メイン ビューポート パネルのアイテムである必要があります。それもレイアウトをめちゃくちゃにしていました。