ExtJS: How to make a panel full screen based on mobile browser
<p>My site has a top bar with dropdown buttons and a bottom bar with other information. In the main body I have a panel with 2 items-> a map and a grid.
On the map I have an afterrender listener which can detect mobile browser. On detecting a mobile browser I want to make the map full screen removing everything else in the window adding a button to go back to regular screen.</p>

<pre class="lang-js prettyprint-override"><code>items: [{
    xtype: 'gmappanel',
    listeners: {
        afterrender: function (map, eOpts) {
            var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
            if (isMobile) {
                //make the map full screen
            }

        }
    }
},
    anotherGrid
]
</code></pre>