sencha-touch-2 - 面板可滚动时固定高度？

Question

以下代码显示了我在当前应用程序中使用的视图之一的定义，这意味着该视图很容易创建并在应该显示时添加到Ext.Viewport 。

它的结构很简单：有一个工具栏，下面有一个面板，它可以包含任何其他组件，如按钮、面板等。

但是：我的问题是，由于我将配置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'
                    }
                ]
            }
        ]
    }
});

Answer 1

您正在寻找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'
                }
            ]
        }
    ]
}