-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-container.Viewport-method-constructor'><span id='Ext-container.Viewport'>/**
-</span></span> * @class Ext.container.Viewport
- * @extends Ext.container.Container
-
-A specialized container representing the viewable application area (the browser viewport).
-
-The Viewport renders itself to the document body, and automatically sizes itself to the size of
-the browser viewport and manages window resizing. There may only be one Viewport created
-in a page.
-
-Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
-on its child Components if you configure it with a {@link #layout}.
-
-A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
-required layout is simpler, a different layout should be chosen.
-
-For example, to simply make a single child item occupy all available space, use {@link Ext.layout.container.Fit fit layout}.
-
-To display one "active" item at full size from a choice of several child items, use {@link Ext.layout.container.Card card layout}.
-
-Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
-added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
-method of any of its child Panels may themselves have a layout.
-
-The Viewport does not provide scrolling, so child Panels within the Viewport should provide
-for scrolling if needed using the {@link #autoScroll} config.
-{@img Ext.container.Viewport/Ext.container.Viewport.png Ext.container.Viewport component}
-An example showing a classic application border layout:
-
- Ext.create('Ext.container.Viewport', {
- layout: 'border',
- renderTo: Ext.getBody(),
- items: [{
- region: 'north',
- html: '<h1 class="x-panel-header">Page Title</h1>',
- autoHeight: true,
- border: false,
- margins: '0 0 5 0'
- }, {
- region: 'west',
- collapsible: true,
- title: 'Navigation',
- width: 150
- // could use a TreePanel or AccordionLayout for navigational items
- }, {
- region: 'south',
- title: 'South Panel',
- collapsible: true,
- html: 'Information goes here',
- split: true,
- height: 100,
- minHeight: 100
- }, {
- region: 'east',
- title: 'East Panel',
- collapsible: true,
- split: true,
- width: 150
- }, {
- region: 'center',
- xtype: 'tabpanel', // TabPanel itself has no title
- activeTab: 0, // First tab active by default
- items: {
- title: 'Default Tab',
- html: 'The first tab\'s content. Others may be added dynamically'
- }
- }]
- });
-
- * @constructor
- * Create a new Viewport
- * @param {Object} config The config object
- * @markdown
- * @xtype viewport
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-container-Viewport'>/**
+</span> * A specialized container representing the viewable application area (the browser viewport).
+ *
+ * The Viewport renders itself to the document body, and automatically sizes itself to the size of
+ * the browser viewport and manages window resizing. There may only be one Viewport created
+ * in a page.
+ *
+ * Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
+ * on its child Components if you configure it with a {@link #layout}.
+ *
+ * A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
+ * required layout is simpler, a different layout should be chosen.
+ *
+ * For example, to simply make a single child item occupy all available space, use
+ * {@link Ext.layout.container.Fit fit layout}.
+ *
+ * To display one "active" item at full size from a choice of several child items, use
+ * {@link Ext.layout.container.Card card layout}.
+ *
+ * Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
+ * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
+ * method of any of its child Panels may themselves have a layout.
+ *
+ * The Viewport does not provide scrolling, so child Panels within the Viewport should provide
+ * for scrolling if needed using the {@link #autoScroll} config.
+ *
+ * An example showing a classic application border layout:
+ *
+ * @example
+ * Ext.create('Ext.container.Viewport', {
+ * layout: 'border',
+ * items: [{
+ * region: 'north',
+ * html: '<h1 class="x-panel-header">Page Title</h1>',
+ * autoHeight: true,
+ * border: false,
+ * margins: '0 0 5 0'
+ * }, {
+ * region: 'west',
+ * collapsible: true,
+ * title: 'Navigation',
+ * width: 150
+ * // could use a TreePanel or AccordionLayout for navigational items
+ * }, {
+ * region: 'south',
+ * title: 'South Panel',
+ * collapsible: true,
+ * html: 'Information goes here',
+ * split: true,
+ * height: 100,
+ * minHeight: 100
+ * }, {
+ * region: 'east',
+ * title: 'East Panel',
+ * collapsible: true,
+ * split: true,
+ * width: 150
+ * }, {
+ * region: 'center',
+ * xtype: 'tabpanel', // TabPanel itself has no title
+ * activeTab: 0, // First tab active by default
+ * items: {
+ * title: 'Default Tab',
+ * html: 'The first tab\'s content. Others may be added dynamically'
+ * }
+ * }]
+ * });
*/
Ext.define('Ext.container.Viewport', {
extend: 'Ext.container.Container',
requires: ['Ext.EventManager'],
alternateClassName: 'Ext.Viewport',
- /*
- * Privatize config options which, if used, would interfere with the
- * correct operation of the Viewport as the sole manager of the
- * layout of the document body.
- */
-<span id='Ext-container.Viewport-cfg-applyTo'> /**
-</span> * @cfg {Mixed} applyTo @hide
+ // Privatize config options which, if used, would interfere with the
+ // correct operation of the Viewport as the sole manager of the
+ // layout of the document body.
+
+<span id='Ext-container-Viewport-cfg-applyTo'> /**
+</span> * @cfg {String/HTMLElement/Ext.Element} applyTo
+ * Not applicable.
*/
-<span id='Ext-container.Viewport-cfg-allowDomMove'> /**
-</span> * @cfg {Boolean} allowDomMove @hide
+
+<span id='Ext-container-Viewport-cfg-allowDomMove'> /**
+</span> * @cfg {Boolean} allowDomMove
+ * Not applicable.
*/
-<span id='Ext-container.Viewport-cfg-hideParent'> /**
-</span> * @cfg {Boolean} hideParent @hide
+
+<span id='Ext-container-Viewport-cfg-hideParent'> /**
+</span> * @cfg {Boolean} hideParent
+ * Not applicable.
*/
-<span id='Ext-container.Viewport-cfg-renderTo'> /**
-</span> * @cfg {Mixed} renderTo @hide
+
+<span id='Ext-container-Viewport-cfg-renderTo'> /**
+</span> * @cfg {String/HTMLElement/Ext.Element} renderTo
+ * Not applicable. Always renders to document body.
*/
-<span id='Ext-container.Viewport-cfg-hideParent'> /**
-</span> * @cfg {Boolean} hideParent @hide
+
+<span id='Ext-container-Viewport-cfg-hideParent'> /**
+</span> * @cfg {Boolean} hideParent
+ * Not applicable.
*/
-<span id='Ext-container.Viewport-cfg-height'> /**
-</span> * @cfg {Number} height @hide
+
+<span id='Ext-container-Viewport-cfg-height'> /**
+</span> * @cfg {Number} height
+ * Not applicable. Sets itself to viewport width.
*/
-<span id='Ext-container.Viewport-cfg-width'> /**
-</span> * @cfg {Number} width @hide
+
+<span id='Ext-container-Viewport-cfg-width'> /**
+</span> * @cfg {Number} width
+ * Not applicable. Sets itself to viewport height.
*/
-<span id='Ext-container.Viewport-cfg-autoHeight'> /**
-</span> * @cfg {Boolean} autoHeight @hide
+
+<span id='Ext-container-Viewport-cfg-autoHeight'> /**
+</span> * @cfg {Boolean} autoHeight
+ * Not applicable.
*/
-<span id='Ext-container.Viewport-cfg-autoWidth'> /**
-</span> * @cfg {Boolean} autoWidth @hide
+
+<span id='Ext-container-Viewport-cfg-autoWidth'> /**
+</span> * @cfg {Boolean} autoWidth
+ * Not applicable.
*/
-<span id='Ext-container.Viewport-cfg-deferHeight'> /**
-</span> * @cfg {Boolean} deferHeight @hide
+
+<span id='Ext-container-Viewport-cfg-deferHeight'> /**
+</span> * @cfg {Boolean} deferHeight
+ * Not applicable.
*/
-<span id='Ext-container.Viewport-cfg-monitorResize'> /**
-</span> * @cfg {Boolean} monitorResize @hide
+
+<span id='Ext-container-Viewport-cfg-monitorResize'> /**
+</span> * @cfg {Boolean} monitorResize
+ * Not applicable.
*/
isViewport: true,
ariaRole: 'application',
+
initComponent : function() {
var me = this,
html = Ext.fly(document.body.parentNode),
el.setSize = Ext.emptyFn;
el.dom.scroll = 'no';
me.allowDomMove = false;
- //this.autoWidth = true;
- //this.autoHeight = true;
Ext.EventManager.onWindowResize(me.fireResize, me);
me.renderTo = me.el;
+ me.width = Ext.Element.getViewportWidth();
+ me.height = Ext.Element.getViewportHeight();
},
fireResize : function(w, h){
// setSize is the single entry point to layouts
this.setSize(w, h);
- //this.fireEvent('resize', this, w, h, w, h);
}
});
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff