如何在 Sencha 中创建将停靠的页脚，除非内容溢出页面

How do I create a footer in Sencha that will be docked unless the content overflows the page?

本文关键字：溢出 Sencha 创建 停靠      更新时间：2023-09-26

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

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

功能示例图像

好的，

所以其中一些取决于您正在使用的组件以及影响它们的布局......但是经过几分钟的混乱，我想出了这个。 

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

相关文章：