javascript - 如何在 Sencha 中创建一个页脚，除非内容溢出页面，否则该页脚将被停靠？

Question

我正在使用 Phonegap 和 Sencha(不是我的选择)创建 native 应用程序。我有一些内容很少的页面，我希望页脚位于底部。所以，我只是将页脚停靠在底部。但是，在内容溢出视口(viewport)的其他页面上，我不希望页脚笨拙地停靠在现在已经超过它的内容的顶部。在那种情况下，当内容溢出视口(viewport)时，我希望页脚在页面流中，可以随页面滚动。只需将页脚移动到页面流中即可轻松解决此问题。因此，理论上我可以简单地将页脚配置为停靠或在每个页面的页面流中。但是，对于应用程序中从数据库动态生成内容的页面来说，这是不合理和不现实的，创建的页面包含一个元素，而其他页面则包含数百个元素。

那么，我如何创建一些查看页面的功能，将页面上的内容与视口(viewport)进行比较，然后自动将页脚设置为停靠在小页面的底部，或者在较长的页面流中页数？

Functionality Example Image

Answer 1

好吧，其中一些取决于您正在使用的组件以及影响它们的布局..但经过几分钟的困惑之后，我想出了这个。

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    requires: [
        'Ext.TitleBar'
    ],
    config: {

        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'Titebar'
        }, {
            xtype: 'container',

            // represents a page
            // the height of this container is set to 100%
            //
            height: '100%',
            scrollable: true,
            items: [{
                // extra long content
                // html: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 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.",

                // shorter content
                html: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 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.",

                // min height of container is 100% of viewport height (vh)
                // then subtract the height of the footer.
                //
                style: 'min-height: calc(100vh - 95px);'

            }, {

                // if toolbar is the same across multiple pages
                // you can create a new class of this toolbar and
                // reference it by xtype: 'myreusablefooter'
                //
                xtype: 'toolbar',
                items: [{
                    text: 'footer items...'
                }]
            }]
        }]
    }
});

你可以在这里玩。

https://fiddle.sencha.com/fiddle/14uo/preview

你可以在这里看到代码

https://fiddle.sencha.com/?fiddle=14uo#fiddle/14uo