在具有邊框布局的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 Y。

第三，請注意，您所有的border布局項目都具有region: 'north' 。 閱讀此文檔頁面上有關如何正確配置區域的注釋。