Sunday, July 22, 2012

Hide browser address bar in Sencha Touch 2 app

Hello,

This is quick blog on how to hide browser address bar in sencha touch 2 app.

You need to specify autoMaximize propery of view port in the application. Checkout following code.


Ext.application({
                            name: 'MyApp',
                            icon: 'resources/images/icon.png',
                            tabletStartupScreen: 'resources/images/tablet_startup.png',
                            phoneStartupScreen: 'resources/images/phone_startup.png',
                            glossOnIcon: false,
                            viewport: {
                                autoMaximize: true
                            },
                            models: ['MyModel'],
                            stores: ['MyStore'],
                            views: ['MyView'],
                            controllers: ['MyController'],
                         
                            launch: function () {

                                   Ext.Viewport.add({
                                                        xclass: ' MyApp .view. MyView'
                                  });
                           }
                });

That's it and open the application in any mobile browser, it will hide the browser address bar. Please note that this trick will only work for mobile browsers.