次のコードは、現在のアプリで使用しているビューの 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'
}
]
}
]
}
});