How Can I Make a Nested Scrollable Panel in ExtJS?

0
votes

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?

1
extjsextjs4.2
The test case doesn't really make sense. The bottom panel has a height which is larger than the size of the content, so it doesn't scroll. – Evan Trimboli
@Evan, did you try running my sample code? When I click on the button, the sample html content clearly doesn't fit within the second panel. – Doug
No, that's not correct. The second panel has a height of 300 specified which is more than enough to hold the content, however it's larger than the height of window (200). The second panel doesn't fit inside the window. The content inside the second panel fits inside the second panel. That's why I asked you to clarify. – Evan Trimboli
Depends on what you interpret as 'content' the text in the second panel or the 2 panels in the window – VDP
@Evan, now I understand what you meant. Ironically, had I spelled 'autoscroll' correctly ('autoScroll') this would have been immediately apparent. :) – Doug

1 Answers

2
votes

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