how to fullscreen a Sencha Touch 2 page on a WebKit browser?

sencha-touch-2

Solution

You are looking for the autoMaximize configuration for Viewport:

Ext.application({
    viewport: {
        autoMaximize: true
    },
    ...
});

Remember though that it may cause some issues (taken from the Sencha docs):

- Orientation change performance is drastically reduced when this is enabled, on all devices.

- On some devices (mostly Android) this can sometimes cause issues when the default browser zoom setting is changed.

- When wrapping your phone in a native shell, you may get a blank screen.

Problem

When I visit http://www.wikpic.com/ on my Android-WebKit-browser the page renders on fullscreen, in other words the navigation bar that shows the URL disappear. How can I do that? I tried this option but it doesn't work: ``` Ext.create('MyApp.view.MyList', {fullscreen: true}); ``` This is my app.js code: ``` Ext.Loader.setConfig({ enabled: true }); Ext.application({ models: [ 'Contacto' ], stores: [ 'Contactos' ], views: [ 'MyList' ], name: 'MyApp', launch: function() { Ext.create('MyApp.view.MyList', {fullscreen: true}); } }); ``` Thanks!

Original source