Question

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

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

但是：我的问题是，因为我将配置 scrollable：true 添加到面板（如下所示），我还必须为该面板设置固定高度（300 in这个案例）。如果我没有设置高度，则面板中的所有组件都不会显示。

更糟糕的问题是，我不知道我应该在这里设置什么高度，因为我的应用当然应该在不同屏幕尺寸的不同设备上工作（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'
                }
            ]
        }
    ]
}

面板可滚动时固定高度？

1 个答案: