4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-container-Viewport-method-constructor'><span id='Ext-container-Viewport'>/**
19 </span></span> * @class Ext.container.Viewport
20 * @extends Ext.container.Container
22 A specialized container representing the viewable application area (the browser viewport).
24 The Viewport renders itself to the document body, and automatically sizes itself to the size of
25 the browser viewport and manages window resizing. There may only be one Viewport created
28 Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
29 on its child Components if you configure it with a {@link #layout}.
31 A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
32 required layout is simpler, a different layout should be chosen.
34 For example, to simply make a single child item occupy all available space, use {@link Ext.layout.container.Fit fit layout}.
36 To display one "active" item at full size from a choice of several child items, use {@link Ext.layout.container.Card card layout}.
38 Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
39 added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
40 method of any of its child Panels may themselves have a layout.
42 The Viewport does not provide scrolling, so child Panels within the Viewport should provide
43 for scrolling if needed using the {@link #autoScroll} config.
44 {@img Ext.container.Viewport/Ext.container.Viewport.png Ext.container.Viewport component}
45 An example showing a classic application border layout:
47 Ext.create('Ext.container.Viewport', {
49 renderTo: Ext.getBody(),
52 html: '<h1 class="x-panel-header">Page Title</h1>',
61 // could use a TreePanel or AccordionLayout for navigational items
66 html: 'Information goes here',
78 xtype: 'tabpanel', // TabPanel itself has no title
79 activeTab: 0, // First tab active by default
82 html: 'The first tab\'s content. Others may be added dynamically'
88 * Create a new Viewport
89 * @param {Object} config The config object
93 Ext.define('Ext.container.Viewport', {
94 extend: 'Ext.container.Container',
95 alias: 'widget.viewport',
96 requires: ['Ext.EventManager'],
97 alternateClassName: 'Ext.Viewport',
100 * Privatize config options which, if used, would interfere with the
101 * correct operation of the Viewport as the sole manager of the
102 * layout of the document body.
104 <span id='Ext-container-Viewport-cfg-applyTo'> /**
105 </span> * @cfg {Mixed} applyTo @hide
107 <span id='Ext-container-Viewport-cfg-allowDomMove'> /**
108 </span> * @cfg {Boolean} allowDomMove @hide
110 <span id='Ext-container-Viewport-cfg-hideParent'> /**
111 </span> * @cfg {Boolean} hideParent @hide
113 <span id='Ext-container-Viewport-cfg-renderTo'> /**
114 </span> * @cfg {Mixed} renderTo @hide
116 <span id='Ext-container-Viewport-cfg-hideParent'> /**
117 </span> * @cfg {Boolean} hideParent @hide
119 <span id='Ext-container-Viewport-cfg-height'> /**
120 </span> * @cfg {Number} height @hide
122 <span id='Ext-container-Viewport-cfg-width'> /**
123 </span> * @cfg {Number} width @hide
125 <span id='Ext-container-Viewport-cfg-autoHeight'> /**
126 </span> * @cfg {Boolean} autoHeight @hide
128 <span id='Ext-container-Viewport-cfg-autoWidth'> /**
129 </span> * @cfg {Boolean} autoWidth @hide
131 <span id='Ext-container-Viewport-cfg-deferHeight'> /**
132 </span> * @cfg {Boolean} deferHeight @hide
134 <span id='Ext-container-Viewport-cfg-monitorResize'> /**
135 </span> * @cfg {Boolean} monitorResize @hide
140 ariaRole: 'application',
141 initComponent : function() {
143 html = Ext.fly(document.body.parentNode),
145 me.callParent(arguments);
146 html.addCls(Ext.baseCSSPrefix + 'viewport');
148 html.setStyle('overflow', 'auto');
150 me.el = el = Ext.getBody();
151 el.setHeight = Ext.emptyFn;
152 el.setWidth = Ext.emptyFn;
153 el.setSize = Ext.emptyFn;
154 el.dom.scroll = 'no';
155 me.allowDomMove = false;
156 //this.autoWidth = true;
157 //this.autoHeight = true;
158 Ext.EventManager.onWindowResize(me.fireResize, me);
162 fireResize : function(w, h){
163 // setSize is the single entry point to layouts
165 //this.fireEvent('resize', this, w, h, w, h);