Sencha touch 2 面板可滚动时的固定高度？

下面的代码显示了我在当前应用程序中使用的一个视图的定义，这意味着可以轻松创建该视图，并在显示该视图时将其添加到Ext.视口中

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

但是：我的问题是，由于我在面板中添加了configscrollable:true（如下所示），因此我还必须为该面板设置一个固定高度（本例中为300）。如果我不设置高度，面板中的所有组件都不会显示

更糟糕的问题是，我不知道我应该在这里设置什么高度，因为我的应用程序当然应该在不同屏幕大小的设备上工作（iPhone/iPad/…）

因此，我想要实现的是，工具栏下的面板使用完全可用的高度，如果其内容“高于”其自身高度，则应可滚动。希望你能帮我：-）

Ext.define（'PV.view.Menu'{
扩展：“Ext.Panel”，
xtype:'菜单'，
配置：{
项目：[
{
xtype:'工具栏'，
标题：“我的菜单”
},
{
xtype:'面板'，
可滚动：对，
身高：300，
项目：[
{
xtype:'按钮'，
文本：“导航到视图1>”，
操作：“导航到视图1”
},
{
xtype:'按钮'，
文本：“导航到视图2>”，
行动：“导航到视图2”
},
{
html:“大量文本
大量文本
大量文本
大量文本
大量文本
大量文本”
}
]
}
]
}
});

您正在寻找

布局：'fit'

，以及（可能）

minHeight

config:{
布局：'适合'，
项目：[
{
xtype:'工具栏'，
标题：“我的菜单”
},
{
xtype:'面板'，
可滚动：对，
//身高：300，
项目：[
{
xtype:'按钮'，
文本：“导航到视图1>”，
操作：“导航到视图1”
},
{
xtype:'按钮'，
文本：“导航到视图2>”，
行动：“导航到视图2”
},
{
html:“大量文本
大量文本
大量文本
大量文本
大量文本
大量文本”
}
]
}
]
}

感谢您的快速回答！：-）我用

布局：fit

尝试了你的建议，但没有成功。您可以在我创建的senchafiddle.com上的示例中看到：。使用

layout:fit

时，整个布局似乎已损坏：-（minHeight的定义并不能真正解决我认为不同屏幕尺寸的问题，是吗？我的意思是，当我将minHeight定义为iPhone的高度时，iPad上的面板太短。当我将minHeight定义为iPad的高度时，iPhone上的面板太长：-（我觉得很困惑……工具栏上添加了一个停靠点和更多文本的提琴，正是我理解您想要的？哎哟，非常感谢！：-）工具栏上添加停靠点非常有用；-）我还找到了另一个解决方案：你也可以使用

layout:'vbox'

，给工具栏

flex:0

和面板

flex:1

（请参阅），但我认为你的解决方案更干净、更简单，谢谢！

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'
                    }
                ]
            }
        ]
    }
});

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'
                }
            ]
        }
    ]
}