1

次のコードは、現在のアプリで使用しているビューの 1 つの定義を示しています。つまり、このビューは簡単に作成され、表示する必要があるときにExt.Viewportに追加されます。

その構造は非常に簡単です。ツールバーの下にパネルがあり、ボタンやパネルなどの他のコンポーネントを含めることができます。

しかし、私の問題は、config scrollable: trueをパネルに追加したため (以下に示すように)、そのパネルに固定の高さ (この場合は 300) を設定する必要があることです。高さを設定しないと、パネル内のすべてのコンポーネントがまったく表示されません。

さらに悪い問題は、ここでどの高さを設定すればよいかわからないことです。これは、もちろん、アプリはさまざまな画面サイズ (iPhone/iPad/...) のさまざまなデバイスで動作する必要があるためです。

だから私が達成したいのは、ツールバーの下のパネルが完全に利用可能な高さを使用し、その内容がそれ自体の高さよりも「高い」場合は、スクロール可能にすることです。あなたがそれで私を助けてくれることを願っています:-)

Ext.define('PV.view.Menu', {
    extend: 'Ext.Panel',

    xtype: 'menu',

    config: {
        items: [
            {
                xtype: 'toolbar',
                title: 'My Menu'
            },
            {
                xtype: 'panel',
                scrollable: true,
                height: 300,
                items: [
                    {
                        xtype: 'button',
                        text: 'Navigate to view 1 >',
                        action: 'nav-to-view1'
                    },
                    {
                        xtype: 'button',
                        text: 'Navigate to view 2 >',
                        action: 'nav-to-view2'
                    },
                    {
                        html: 'A lot of text<br />A lot of text<br />A lot of text<br />A lot of text<br />A lot of text'
                    }
                ]
            }
        ]
    }
});
4

1 に答える 1

0

を探してlayout:'fit'いるだけでなく、(おそらく)minHeight

http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-minHeight

http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.Fit

config: {
    layout:'fit',
    items: [
        {
            xtype: 'toolbar',
            title: 'My Menu'
        },
        {
            xtype: 'panel',
            scrollable: true,
//                height: 300,
            items: [
                {
                    xtype: 'button',
                    text: 'Navigate to view 1 >',
                    action: 'nav-to-view1'
                },
                {
                    xtype: 'button',
                    text: 'Navigate to view 2 >',
                    action: 'nav-to-view2'
                },
                {
                    html: 'A lot of text<br />A lot of text<br />A lot of text<br />A lot of text<br />A lot of text'
                }
            ]
        }
    ]
}
于 2012-08-16T18:49:00.773 に答える