Fixed height when panel is scrollable?

Question

the following code shows a definition of one of my views I'm using in my current app, that means this view is easily created and added to the Ext.Viewport when it should be displayed.

Its structure is quite easy: there's a toolbar with a panel underneath, which can contain any other components like buttons, panels etc.

But: my problem is, that since I added the config scrollable: true to the panel (as you can see below), I also have to set a fixed height for that panel (300 in this case). If I don't set a height, all components within the panel aren't displayed at all.

The even worse problem is, that I don't know what height I should set here, because my app should of course work on different devices with different screen-sizes (iPhone/iPad/...).

So what I want to achieve is that the panel under the toolbar uses the fully available height and - in case its contents are "higher" than its own height - it should be scrollable. Hope you can help me with that :-)

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

Alex Alex · Accepted Answer · 2012-08-16T18:49:00

You are looking for layout:'fit', as well as (possibly) 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'
                }
            ]
        }
    ]
}

Fixed height when panel is scrollable?

1 Answers