Sencha Fullscreen Panel that detects Home Screen Bookmark ?

Question

When using Sencha Touch to create a panel - you can tell the panel to enable a fullscreen property. THe panel will fill the space available by the device.

It seems to have a bug or not deal with a bookmark that has been saved to the home screen - and floats underneath the status bar at the top.

Is there a property or setting to manage this behaviour OR are am I going to have to program the logic to determine how much padding is required dependent on device and orientation ?

Example below will fit nicely in mobile Safari, but if you save to Home Screen and load it up - the Toolbar sits underneath the Status Bar.

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

Thanks in advance.

Answer 1

Hi Ket — This is actually the default behavior... The status bar is always visible, even in a fullscreen web app. There are three tips you may find useful:

• You can use a translucent statusbar, which is still there but will overlay your content. To do this, in Ext.setup(), you can use "statusBarStyle: 'black-translucent'"
• "window.navigator.standalone" will detect whether you're in fullscreen mode or not.
• Instead of measuring window width/height, you could break your H2 and P into separate components, and give the P area a layout of 'fit'

Hope that helps-