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="../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; }
  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> * @class Ext.container.Viewport
  20  * @extends Ext.container.Container
  21
  22 A specialized container representing the viewable application area (the browser viewport).
  23
  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
  26 in a page.
  27
  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}.
  30
  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.
  33
  34 For example, to simply make a single child item occupy all available space, use {@link Ext.layout.container.Fit fit layout}.
  35
  36 To display one &quot;active&quot; item at full size from a choice of several child items, use {@link Ext.layout.container.Card card layout}.
  37
  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.
  41
  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:
  46
  47     Ext.create('Ext.container.Viewport', {
  48         layout: 'border',
  49         renderTo: Ext.getBody(),
  50         items: [{
  51             region: 'north',
  52             html: '&lt;h1 class=&quot;x-panel-header&quot;&gt;Page Title&lt;/h1&gt;',
  53             autoHeight: true,
  54             border: false,
  55             margins: '0 0 5 0'
  56         }, {
  57             region: 'west',
  58             collapsible: true,
  59             title: 'Navigation',
  60             width: 150
  61             // could use a TreePanel or AccordionLayout for navigational items
  62         }, {
  63             region: 'south',
  64             title: 'South Panel',
  65             collapsible: true,
  66             html: 'Information goes here',
  67             split: true,
  68             height: 100,
  69             minHeight: 100
  70         }, {
  71             region: 'east',
  72             title: 'East Panel',
  73             collapsible: true,
  74             split: true,
  75             width: 150
  76         }, {
  77             region: 'center',
  78             xtype: 'tabpanel', // TabPanel itself has no title
  79             activeTab: 0,      // First tab active by default
  80             items: {
  81                 title: 'Default Tab',
  82                 html: 'The first tab\'s content. Others may be added dynamically'
  83             }
  84         }]
  85     });
  86
  87  * @markdown
  88  */
  89 Ext.define('Ext.container.Viewport', {
  90     extend: 'Ext.container.Container',
  91     alias: 'widget.viewport',
  92     requires: ['Ext.EventManager'],
  93     alternateClassName: 'Ext.Viewport',
  94
  95     /*
  96      * Privatize config options which, if used, would interfere with the
  97      * correct operation of the Viewport as the sole manager of the
  98      * layout of the document body.
  99      */
 100 <span id='Ext-container-Viewport-cfg-applyTo'>    /**
 101 </span>     * @cfg {Mixed} applyTo @hide
 102      */
 103 <span id='Ext-container-Viewport-cfg-allowDomMove'>    /**
 104 </span>     * @cfg {Boolean} allowDomMove @hide
 105      */
 106 <span id='Ext-container-Viewport-cfg-hideParent'>    /**
 107 </span>     * @cfg {Boolean} hideParent @hide
 108      */
 109 <span id='Ext-container-Viewport-cfg-renderTo'>    /**
 110 </span>     * @cfg {Mixed} renderTo @hide
 111      */
 112 <span id='Ext-container-Viewport-cfg-hideParent'>    /**
 113 </span>     * @cfg {Boolean} hideParent @hide
 114      */
 115 <span id='Ext-container-Viewport-cfg-height'>    /**
 116 </span>     * @cfg {Number} height @hide
 117      */
 118 <span id='Ext-container-Viewport-cfg-width'>    /**
 119 </span>     * @cfg {Number} width @hide
 120      */
 121 <span id='Ext-container-Viewport-cfg-autoHeight'>    /**
 122 </span>     * @cfg {Boolean} autoHeight @hide
 123      */
 124 <span id='Ext-container-Viewport-cfg-autoWidth'>    /**
 125 </span>     * @cfg {Boolean} autoWidth @hide
 126      */
 127 <span id='Ext-container-Viewport-cfg-deferHeight'>    /**
 128 </span>     * @cfg {Boolean} deferHeight @hide
 129      */
 130 <span id='Ext-container-Viewport-cfg-monitorResize'>    /**
 131 </span>     * @cfg {Boolean} monitorResize @hide
 132      */
 133
 134     isViewport: true,
 135
 136     ariaRole: 'application',
 137     initComponent : function() {
 138         var me = this,
 139             html = Ext.fly(document.body.parentNode),
 140             el;
 141         me.callParent(arguments);
 142         html.addCls(Ext.baseCSSPrefix + 'viewport');
 143         if (me.autoScroll) {
 144             html.setStyle('overflow', 'auto');
 145         }
 146         me.el = el = Ext.getBody();
 147         el.setHeight = Ext.emptyFn;
 148         el.setWidth = Ext.emptyFn;
 149         el.setSize = Ext.emptyFn;
 150         el.dom.scroll = 'no';
 151         me.allowDomMove = false;
 152         Ext.EventManager.onWindowResize(me.fireResize, me);
 153         me.renderTo = me.el;
 154         me.width = Ext.core.Element.getViewportWidth();
 155         me.height = Ext.core.Element.getViewportHeight();
 156     },
 157
 158     fireResize : function(w, h){
 159         // setSize is the single entry point to layouts
 160         this.setSize(w, h);
 161     }
 162 });
 163 </pre>
 164 </body>
 165 </html>