4

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!

lito
  • 3,105
  • 11
  • 43
  • 71

1 Answers1

5

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.
rdougan
  • 7,217
  • 2
  • 34
  • 63
  • 1
    Unfortunately, this doesn't work when using Chrome on iOS. Resorted to the solution offered belo but that results in the bottom tabbar being cut-off. http://www.sencha.com/forum/showthread.php?231359-Chrome-in-iOS-%28autoMaximize%29 – occasl Jul 01 '13 at 18:09
  • Yeah. Unfortunately these browsers do not make it easy for us to do this. It is why we disabled it by default. I'm unsure of any solution at this time. – rdougan Jul 02 '13 at 11:15
  • what does autoMaximize actually do? technically-wise, what css/js algorythm does it rely on? – Sergey Sob Jul 19 '15 at 08:15
  • 1
    @SergeySob I believe it hard codes the width and height of the application to the width and height of the window on any size change. – rdougan Jul 20 '15 at 09:06