/** * This class acts as a factory for environment-specific viewport implementations. * * Please refer to the {@link Ext.Viewport} documentation about using the global instance. * @private */Ext.define('Ext.viewport.Viewport', { requires: [ 'Ext.viewport.Ios', 'Ext.viewport.Android', 'Ext.viewport.WindowsPhone' ], singleton: true, setup: function (config) { var osName = Ext.os.name, viewportName, viewport; switch (osName) { case 'Android': viewportName = (Ext.browser.name === 'ChromeMobile') ? 'Default' : 'Android'; break; case 'iOS': viewportName = 'Ios'; break; case 'Windows': viewportName = (Ext.browser.name === 'IE') ? 'WindowsPhone' : 'Default'; break; case 'WindowsPhone': viewportName = 'WindowsPhone'; break; default: viewportName = 'Default'; break; } Ext.Viewport = viewport = Ext.create('Ext.viewport.' + viewportName, config); // If there are already floated components at the global level, ensure the global floatRoot // is top of the DOM otherwise the viewport body element occludes it. if (Ext.floatRoot) { viewport.floatWrap = Ext.floatRoot; viewport.element.dom.appendChild(Ext.floatRoot.dom); Ext.floatRoot.getData().component = viewport; } return viewport; }}); // Docs for the singleton instance created by above factory: /** * @class Ext.Viewport * @extends Ext.viewport.Default * @singleton * * Ext.Viewport is an instance created when you use {@link Ext#setup}. Because {@link Ext.Viewport} extends from * {@link Ext.Container}, it has a {@link #layout} that defaults to {@link Ext.layout.Card}. This means you * can add items to it at any time, from anywhere in your code. The {@link Ext.Viewport} {@link #cfg-fullscreen} * configuration is `true` by default, so it will take up your whole screen. * * @example raw * Ext.setup({ * onReady: function() { * Ext.Viewport.add({ * xtype: 'container', * html: 'My new container!' * }); * } * }); * * If you want to customize anything about this {@link Ext.Viewport} instance, you can do so by adding a property * called `viewport` into your {@link Ext#setup} object: * * @example raw * Ext.setup({ * viewport: { * layout: 'vbox' * }, * onReady: function() { * //do something * } * }); * * **Note** if you use {@link Ext#onReady}, this instance of {@link Ext.Viewport} will **not** be created. Though, in most cases, * you should **not** use {@link Ext#onReady}. */