在 Ext JS 中获取带有边框布局的滚动条

Question

我正在尝试使用 ExtJS 5.0 框架为整个窗口获取滚动条。我目前遇到的问题是浏览器窗口切断了页面。

我尝试在谷歌上搜索解决方案，看看我是否可以让它与边框布局一起使用，但我没有任何成功。我尝试将“scrollable：true”配置插入父容器，但这似乎没有做任何事情。

这是我的 Main.js 代码（目前我的主页和应用程序的主视图所在的位置）。

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "autoCreateViewport" property. That setting automatically applies the "viewport"
 * plugin to promote that instance of this class to the body element.
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('QCQA.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'QCQA.view.main.MainController',
        'QCQA.view.main.MainModel'
    ],

    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },
    scrollable: true,
    renderTo: Ext.getBody(),
    items: [
        // HEADER
        {
            region: 'north',
            xtype: 'container',
            layout: 'container',
            loader: {
                url: 'app/templates/qcqa-header.html',
                autoLoad: true
            }
        },
        // NAV MENU
        {
            region: 'north',
            xtype: 'container',
            layout: 'container',
            loader: {
                url: 'app/templates/qcqa-nav.html',
                autoLoad: true
            }
        },
        // HOMEPAGE BODY START
        {
            xtype: 'container',
            region: 'north',
            items: [
                // HERO SECTION
                {
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        pack: 'center',
                        align: 'middle'
                    },
                    cls: 'qcqa-hero',
                    items: [
                        {
                            xtype: 'tabpanel',
                            width: 1040,
                            cls: 'qcqa-hero__tabs',
                            activeTab: 0,
                            plain: true,
                            items: [
                                {
                                    title: '<img class="tab-icon" src="resources/images/icon-contractor.png" alt="" class="icon">' +
                                           '<h2>For Contractors</h2>',
                                    bodyPadding: 15,
                                    html: 'A simple tab'
                                },
                                {
                                    title: '<img class="tab-icon" src="resources/images/icon-engineer.png" alt="" class="icon">' +
                                           '<h2>For Engineers</h2>',
                                    bodyPadding: 15,
                                    html: 'Another one'
                                }
                            ]
                        }
                    ],
                },
                // SITEWIDE NOTIFICATION
                {
                    xtype: 'container',
                    tpl: '<div class="qcqa-notification">' +
                           '<img src="resources/images/icon-info.png" alt="" class="icon">' +
                           '<span>{qcqaNotification}</span>' +
                         '</div>',
                    data: {
                        qcqaNotification: 'Sitewide Notice, Maintenance Schedule Can Go Here'
                    }
                },
                // BLOG SECTION
                {
                    xtype: 'container',
                    tpl: '<div class="qcqa-blog">' +
                           '<div class="container">' +
                             '<div class="qcqa-blog__article">' +
                               '<h3>{blog_entry.blog_title}</h3>' +
                               '<p>{blog_entry.blog_content}<a href="{blog_entry.blog_url}" class="qcqa-blog__read-more-link">Read More</a></p>' +
                             '</div>' +
                           '</div>' +
                         '</div>',
                    data: {
                        blog_entry: {
                            blog_title: 'Title of the Latest News / Announcement',
                            blog_content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis ist perspiciatis unde omnis ist',
                            blog_url: ''
                        }
                    }
                }
            ]
        },
        // HOMEPAGE BODY END

        // PEOPLE PROFILES
        {
            region: 'north',
            xtype: 'container',
            layout: 'container',
            loader: {
                url: 'app/templates/qcqa-people-profiles.html',
                autoLoad: true
            }
        }

    ]
});

如果有人可以为我指出解决此问题的正确方向，我将不胜感激。谢谢。

Answer 1

首先，scrollable 仅适用于 5.1。在 5.0 中，使用 overflowY 和 overflowX。

其次，border 布局容器根据定义不能滚动，因为它应该适应其所有子项——根据region 为每个子项分配一部分视图。尽管如此，没有什么能阻止您让每个单独的孩子都可滚动：在需要时将 overflowY / overflowY 添加到其中的任何一个。

第三，注意你所有的border布局项都有region: 'north'。阅读this doc page 上的注释，了解如何正确配置区域。