0

使用 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'
    });

提前致谢。

4

1 回答 1

1

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

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

希望有帮助-

于 2010-09-30T18:55:55.207 回答