docs/source/Viewport.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-container-Viewport'>/**
  19 </span> * A specialized container representing the viewable application area (the browser viewport).
  20  *
  21  * The Viewport renders itself to the document body, and automatically sizes itself to the size of
  22  * the browser viewport and manages window resizing. There may only be one Viewport created
  23  * in a page.
  24  *
  25  * Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
  26  * on its child Components if you configure it with a {@link #layout}.
  27  *
  28  * A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
  29  * required layout is simpler, a different layout should be chosen.
  30  *
  31  * For example, to simply make a single child item occupy all available space, use
  32  * {@link Ext.layout.container.Fit fit layout}.
  33  *
  34  * To display one &quot;active&quot; item at full size from a choice of several child items, use
  35  * {@link Ext.layout.container.Card card layout}.
  36  *
  37  * Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
  38  * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
  39  * method of any of its child Panels may themselves have a layout.
  40  *
  41  * The Viewport does not provide scrolling, so child Panels within the Viewport should provide
  42  * for scrolling if needed using the {@link #autoScroll} config.
  43  *
  44  * An example showing a classic application border layout:
  45  *
  46  *     @example
  47  *     Ext.create('Ext.container.Viewport', {
  48  *         layout: 'border',
  49  *         items: [{
  50  *             region: 'north',
  51  *             html: '&lt;h1 class=&quot;x-panel-header&quot;&gt;Page Title&lt;/h1&gt;',
  52  *             autoHeight: true,
  53  *             border: false,
  54  *             margins: '0 0 5 0'
  55  *         }, {
  56  *             region: 'west',
  57  *             collapsible: true,
  58  *             title: 'Navigation',
  59  *             width: 150
  60  *             // could use a TreePanel or AccordionLayout for navigational items
  61  *         }, {
  62  *             region: 'south',
  63  *             title: 'South Panel',
  64  *             collapsible: true,
  65  *             html: 'Information goes here',
  66  *             split: true,
  67  *             height: 100,
  68  *             minHeight: 100
  69  *         }, {
  70  *             region: 'east',
  71  *             title: 'East Panel',
  72  *             collapsible: true,
  73  *             split: true,
  74  *             width: 150
  75  *         }, {
  76  *             region: 'center',
  77  *             xtype: 'tabpanel', // TabPanel itself has no title
  78  *             activeTab: 0,      // First tab active by default
  79  *             items: {
  80  *                 title: 'Default Tab',
  81  *                 html: 'The first tab\'s content. Others may be added dynamically'
  82  *             }
  83  *         }]
  84  *     });
  85  */
  86 Ext.define('Ext.container.Viewport', {
  87     extend: 'Ext.container.Container',
  88     alias: 'widget.viewport',
  89     requires: ['Ext.EventManager'],
  90     alternateClassName: 'Ext.Viewport',
  91
  92     // Privatize config options which, if used, would interfere with the
  93     // correct operation of the Viewport as the sole manager of the
  94     // layout of the document body.
  95
  96 <span id='Ext-container-Viewport-cfg-applyTo'>    /**
  97 </span>     * @cfg {String/HTMLElement/Ext.Element} applyTo
  98      * Not applicable.
  99      */
 100
 101 <span id='Ext-container-Viewport-cfg-allowDomMove'>    /**
 102 </span>     * @cfg {Boolean} allowDomMove
 103      * Not applicable.
 104      */
 105
 106 <span id='Ext-container-Viewport-cfg-hideParent'>    /**
 107 </span>     * @cfg {Boolean} hideParent
 108      * Not applicable.
 109      */
 110
 111 <span id='Ext-container-Viewport-cfg-renderTo'>    /**
 112 </span>     * @cfg {String/HTMLElement/Ext.Element} renderTo
 113      * Not applicable. Always renders to document body.
 114      */
 115
 116 <span id='Ext-container-Viewport-cfg-hideParent'>    /**
 117 </span>     * @cfg {Boolean} hideParent
 118      * Not applicable.
 119      */
 120
 121 <span id='Ext-container-Viewport-cfg-height'>    /**
 122 </span>     * @cfg {Number} height
 123      * Not applicable. Sets itself to viewport width.
 124      */
 125
 126 <span id='Ext-container-Viewport-cfg-width'>    /**
 127 </span>     * @cfg {Number} width
 128      * Not applicable. Sets itself to viewport height.
 129      */
 130
 131 <span id='Ext-container-Viewport-cfg-autoHeight'>    /**
 132 </span>     * @cfg {Boolean} autoHeight
 133      * Not applicable.
 134      */
 135
 136 <span id='Ext-container-Viewport-cfg-autoWidth'>    /**
 137 </span>     * @cfg {Boolean} autoWidth
 138      * Not applicable.
 139      */
 140
 141 <span id='Ext-container-Viewport-cfg-deferHeight'>    /**
 142 </span>     * @cfg {Boolean} deferHeight
 143      * Not applicable.
 144      */
 145
 146 <span id='Ext-container-Viewport-cfg-monitorResize'>    /**
 147 </span>     * @cfg {Boolean} monitorResize
 148      * Not applicable.
 149      */
 150
 151     isViewport: true,
 152
 153     ariaRole: 'application',
 154
 155     initComponent : function() {
 156         var me = this,
 157             html = Ext.fly(document.body.parentNode),
 158             el;
 159         me.callParent(arguments);
 160         html.addCls(Ext.baseCSSPrefix + 'viewport');
 161         if (me.autoScroll) {
 162             html.setStyle('overflow', 'auto');
 163         }
 164         me.el = el = Ext.getBody();
 165         el.setHeight = Ext.emptyFn;
 166         el.setWidth = Ext.emptyFn;
 167         el.setSize = Ext.emptyFn;
 168         el.dom.scroll = 'no';
 169         me.allowDomMove = false;
 170         Ext.EventManager.onWindowResize(me.fireResize, me);
 171         me.renderTo = me.el;
 172         me.width = Ext.Element.getViewportWidth();
 173         me.height = Ext.Element.getViewportHeight();
 174     },
 175
 176     fireResize : function(w, h){
 177         // setSize is the single entry point to layouts
 178         this.setSize(w, h);
 179     }
 180 });
 181 </pre>
 182 </body>
 183 </html>