ExtJS：如何基于移动浏览器制作面板全屏答案

【问题标题】：ExtJS: How to make a panel full screen based on mobile browserExtJS：如何基于移动浏览器制作面板全屏
【发布时间】：2016-09-13 20:46:23
【问题描述】：

我的网站有一个带有下拉按钮的顶部栏和一个带有其他信息的底部栏。在主体中，我有一个带有 2 个项目的面板-> 一个地图和一个网格。在地图上，我有一个可以检测移动浏览器的后渲染侦听器。在检测到移动浏览器时，我想让地图全屏显示，删除窗口中的所有其他内容，添加一个返回常规屏幕的按钮。

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
]

【问题讨论】：

标签： javascript extjs fullscreen

【解决方案1】：

您可以将您的 gmap 面板包装到一个具有最大化配置的窗口中：

Ext.create('Ext.window.Window', {
    maximized: true,
    title: 'Map',
    frame: false,
    modal: true,
    renderTo: Ext.getBody()
}).show();

https://fiddle.sencha.com/#fiddle/1gnj

【讨论】：

感谢 Tyr 的回答，但我需要在不打开新窗口的情况下“全屏显示”地图