Question

我是ExtJS的新手，我正在尝试在窗口中创建一个嵌套的可滚动面板。不幸的是，到目前为止我所研究的答案都没有提供这个特定问题的解决方案（或者我只是不理解它们）。

以下是一组包含可滚动面板的示例（'框架面板：宽度280 /高度180'）：

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

显然，根据下面的示例代码（使用版本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>

如何才能使第二个面板的内容滚动，如上面链接示例中标题为“框架面板：宽度280 /高度180”的面板？

Answer 1

如果将autoScroll: true添加到窗口配置中，窗口的内容将可滚动。（以下示例）

然而，就像Evan指出的那样，如果您希望第二个面板的内容可滚动，则不要在面板上设置高度并将autoScroll: true属性添加到第二个面板，添加一个flex和vbox布局到窗口。（第二个例子）

第一个例子

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

    });

第二个例子

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

如何在ExtJS中创建嵌套的可滚动面板？

1 个答案:

如何在ExtJS中创建嵌套的可滚​​动面板？

1 个答案:

如何在ExtJS中创建嵌套的可滚动面板？