Question

使用Sencha Touch创建面板时 - 您可以告诉面板启用全屏属性。该面板将填充设备可用的空间。

似乎有一个错误或者没有处理已保存到主屏幕的书签 - 并浮动在顶部状态栏下方。

是否有属性或设置来管理此行为或者我是否需要对逻辑进行编程以确定根据设备和方向需要多少填充？

下面的示例非常适合移动版Safari，但如果您保存到主屏幕并加载它 - 工具栏位于状态栏下方。

        var buttons = [
        {text: 'Button'},
        {xtype: 'spacer'},
        {text: 'Blue', ui: 'action'},
    ];

    var toolbar1 = new Ext.Toolbar({
        dock: 'top',
        title: 'Panel',
        items: buttons
    });

    var windowHeight = Ext.Element.getViewportHeight();
    var windowWidth = Ext.Element.getViewportWidth();

    var homePage = new Ext.Panel ({
        fullscreen: true,
        cls: 'homePage',
        dockedItems: [toolbar1],
        layout: 'fit',
        html: '<h2>Testing Ext.js Panel</h2><p>Height:' + windowHeight +'</p><p> Width:' + windowWidth +'</p>',
        animation: 'slide'
    });

提前致谢。

Answer 1

Hi Ket - 这实际上是默认行为...状态栏始终可见，即使在全屏Web应用程序中也是如此。您可能会发现有三个有用的提示：

您可以使用半透明状态栏，该状态栏仍然存在，但会覆盖您的内容。为此，在Ext.setup（）中，您可以使用“statusBarStyle：'black-translucent'”
“window.navigator.standalone”将检测您是否处于全屏模式。
您可以将H2和P分解为单独的组件，而不是测量窗口宽度/高度，并为P区域提供“适合”的布局

希望有所帮助 -

Sencha全屏面板检测主屏幕书签？

1 个答案: