how to create a fullscreen sencha touch 2 web app?

Question

I've created a web app with sencha touch 2. Now I want to make iOS/android hide de browser address bar when I open this app. I've tried to do it in many ways I found on the internet, but none worked. Most people suggest me to do as in the answer of this question: how to fullscreen a Sencha Touch 2 page on a WebKit browser?

But that didn't work either. I spoke to some guys that work with sencha longer than me here on the office. They said that the autoMaximize config never worked for any of them, but that one former co-worker had once managed to do it some other way.

So... anybody know any other way to make my webapp run in fullscreen mode, or why the autoMaximize may not work?

update: sample code

Ext.application({
name: 'App',

viewport: {
  autoMaximize: true
},

requires : [
    'Ext.Panel'
],

launch: function() {
    Ext.Viewport.add({
        xtype:'panel',
        fullscreen:true,
        html:'hi'
    });
},});

Update 2: It seems to be working fine on android.

Jakub Koszuliński Jakub Koszuliński · Accepted Answer · 2012-12-13T01:18:37

If you want to have truly fullscreen web app on your mobile, you have to deploy it as hybrid one. It means to compile it against native OS SDK. You can simply accomplish this using PhoneGap and given OS SDK.

Check this out for more info: http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/

In Android, the bottom line is to extend org.apache.cordova.DroidGap and override method onCreate() like so:

public class App extends DroidGap
{
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();

        super.setIntegerProperty("loadUrlTimeoutValue", 60000);
        loadUrl("file:///android_asset/www/index.html");
    }
}

where 'index.html' is your ST web page.

Hope it helps. Cheers.

how to create a fullscreen sencha touch 2 web app?

2 Answers