How Can I Make a Nested Scrollable Panel in ExtJS?

I'm new to ExtJS, and I'm trying to create a nested, scrollable panel within a window. Unfortunately, none of the answers I've researched so far have provided a solution to this particular problem (or I'm just not understanding them).

Extjs scrollable panel

Autoscroll on parent panel, when there is overflow on child panels.Extjs

Extjs 4.1 What layout for 3 components scrollable

Here is a set of examples that contains a scrollable panel ('Framed Panel: Width 280/Height 180'):

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/panel/panel.html

Evidently, this technique doesn't work when nesting panels inside a window, as per my sample code below (using version 4.2.1.883):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Nested Scrollable Panel Demo</title>

    <script type="text/javascript" src="ext/ext-all-dev.js"></script>
    <link rel="stylesheet" href="ext/resources/css/ext-all.css" />

    <script type="text/javascript">

    Ext.onReady(function(){

        var btnTest = Ext.create("Ext.Button",{
            text    : "Scrollable Nested Panel Test",
            renderTo: Ext.getBody()
        });

        btnTest.on('click', function(){

            var html_text = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, '+
    'porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, '+
    'lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis '+
    'vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>'+
    'Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing '+
    'eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt '+
    'diam nec urna. Curabitur velit. Lorem ipsum dolor sit amet.</p>';


            var win = Ext.create("Ext.window.Window",{
                title       : "Main Window",
                width       : 300,
                height      : 200,
                maximizable : true,
                defaults: {
                    xtype       : "panel",
                    height      : 60,
                    collapsible : true,
                    autoscroll  : true
                },
                items   : [{
                    title   : "Menu",
                    html    : 'menu panel content'
                },{
                    html: html_text,
                    frame   : true,
                    width   : '100%',
                    height  : 300
                }]
            });

            win.show();
        });

    });

    </script>
</head>
<body>
    <h1>Nested Scrollable Panel Demo</h1>
</body>
</html>

How can I get this to work, where the content of the second panel will scroll, like the panel entitled 'Framed Panel: Width 280/Height 180' in the linked example above?

Solution

If you add autoScroll: true to the window configuration the content of the window will be scrollable. (Example below)

However, like Evan is pointing out, if you want the content of the second panel to be scrollable you don't set a height on the panel and add the autoScroll: true property to the second panel, add a flex and vbox layout to the window. (second example)

First Example

Live Example

Ext.onReady(function(){

        var btnTest = Ext.create("Ext.Button",{
            text    : "Scrollable Nested Panel Test",
            renderTo: Ext.getBody()
        });

        btnTest.on('click', function(){

            var html_text = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, '+
    'porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, '+
    'lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis '+
    'vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>'+
    'Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing '+
    'eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt '+
    'diam nec urna. Curabitur velit. Lorem ipsum dolor sit amet.</p>';


            var win = Ext.create("Ext.window.Window",{
                title       : "Main Window",
                width       : 300,
                height      : 200,
                maximizable : true,
                autoScroll: true,

                defaults: {
                    xtype       : "panel",
                    height      : 60,
                    collapsible : true,
                    autoscroll  : true
                },
                items   : [{
                    title   : "Menu",
                    html    : 'menu panel content'
                },{
                    html: html_text,
                    frame   : true,
                    width   : '100%',
                    height  : 300
                }]
            });

            win.show();
        });

    });

Second Example

Live Example

var win = Ext.create("Ext.window.Window",{
    title       : "Main Window",
    width       : 300,
    height      : 200,
    maximizable : true,

    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        xtype       : "panel",
        collapsible : true,
        autoscroll  : true
    },
    items   : [{
        title   : "Menu",
        html    : 'menu panel content'
    },{
        html: html_text,
        frame   : true,
        flex: 1,
        autoScroll: true
    }]
});