docs/source/Viewport.html

   1 <!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'>/**
   2 </span></span> * @class Ext.container.Viewport
   3  * @extends Ext.container.Container
   4
   5 A specialized container representing the viewable application area (the browser viewport).
   6
   7 The Viewport renders itself to the document body, and automatically sizes itself to the size of
   8 the browser viewport and manages window resizing. There may only be one Viewport created
   9 in a page.
  10
  11 Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
  12 on its child Components if you configure it with a {@link #layout}.
  13
  14 A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
  15 required layout is simpler, a different layout should be chosen.
  16
  17 For example, to simply make a single child item occupy all available space, use {@link Ext.layout.container.Fit fit layout}.
  18
  19 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}.
  20
  21 Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
  22 added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
  23 method of any of its child Panels may themselves have a layout.
  24
  25 The Viewport does not provide scrolling, so child Panels within the Viewport should provide
  26 for scrolling if needed using the {@link #autoScroll} config.
  27 {@img Ext.container.Viewport/Ext.container.Viewport.png Ext.container.Viewport component}
  28 An example showing a classic application border layout:
  29
  30     Ext.create('Ext.container.Viewport', {
  31         layout: 'border',
  32         renderTo: Ext.getBody(),
  33         items: [{
  34             region: 'north',
  35             html: '&lt;h1 class=&quot;x-panel-header&quot;&gt;Page Title&lt;/h1&gt;',
  36             autoHeight: true,
  37             border: false,
  38             margins: '0 0 5 0'
  39         }, {
  40             region: 'west',
  41             collapsible: true,
  42             title: 'Navigation',
  43             width: 150
  44             // could use a TreePanel or AccordionLayout for navigational items
  45         }, {
  46             region: 'south',
  47             title: 'South Panel',
  48             collapsible: true,
  49             html: 'Information goes here',
  50             split: true,
  51             height: 100,
  52             minHeight: 100
  53         }, {
  54             region: 'east',
  55             title: 'East Panel',
  56             collapsible: true,
  57             split: true,
  58             width: 150
  59         }, {
  60             region: 'center',
  61             xtype: 'tabpanel', // TabPanel itself has no title
  62             activeTab: 0,      // First tab active by default
  63             items: {
  64                 title: 'Default Tab',
  65                 html: 'The first tab\'s content. Others may be added dynamically'
  66             }
  67         }]
  68     });
  69
  70  * @constructor
  71  * Create a new Viewport
  72  * @param {Object} config The config object
  73  * @markdown
  74  * @xtype viewport
  75  */
  76 Ext.define('Ext.container.Viewport', {
  77     extend: 'Ext.container.Container',
  78     alias: 'widget.viewport',
  79     requires: ['Ext.EventManager'],
  80     alternateClassName: 'Ext.Viewport',
  81
  82     /*
  83      * Privatize config options which, if used, would interfere with the
  84      * correct operation of the Viewport as the sole manager of the
  85      * layout of the document body.
  86      */
  87 <span id='Ext-container.Viewport-cfg-applyTo'>    /**
  88 </span>     * @cfg {Mixed} applyTo @hide
  89      */
  90 <span id='Ext-container.Viewport-cfg-allowDomMove'>    /**
  91 </span>     * @cfg {Boolean} allowDomMove @hide
  92      */
  93 <span id='Ext-container.Viewport-cfg-hideParent'>    /**
  94 </span>     * @cfg {Boolean} hideParent @hide
  95      */
  96 <span id='Ext-container.Viewport-cfg-renderTo'>    /**
  97 </span>     * @cfg {Mixed} renderTo @hide
  98      */
  99 <span id='Ext-container.Viewport-cfg-hideParent'>    /**
 100 </span>     * @cfg {Boolean} hideParent @hide
 101      */
 102 <span id='Ext-container.Viewport-cfg-height'>    /**
 103 </span>     * @cfg {Number} height @hide
 104      */
 105 <span id='Ext-container.Viewport-cfg-width'>    /**
 106 </span>     * @cfg {Number} width @hide
 107      */
 108 <span id='Ext-container.Viewport-cfg-autoHeight'>    /**
 109 </span>     * @cfg {Boolean} autoHeight @hide
 110      */
 111 <span id='Ext-container.Viewport-cfg-autoWidth'>    /**
 112 </span>     * @cfg {Boolean} autoWidth @hide
 113      */
 114 <span id='Ext-container.Viewport-cfg-deferHeight'>    /**
 115 </span>     * @cfg {Boolean} deferHeight @hide
 116      */
 117 <span id='Ext-container.Viewport-cfg-monitorResize'>    /**
 118 </span>     * @cfg {Boolean} monitorResize @hide
 119      */
 120
 121     isViewport: true,
 122
 123     ariaRole: 'application',
 124     initComponent : function() {
 125         var me = this,
 126             html = Ext.fly(document.body.parentNode),
 127             el;
 128         me.callParent(arguments);
 129         html.addCls(Ext.baseCSSPrefix + 'viewport');
 130         if (me.autoScroll) {
 131             html.setStyle('overflow', 'auto');
 132         }
 133         me.el = el = Ext.getBody();
 134         el.setHeight = Ext.emptyFn;
 135         el.setWidth = Ext.emptyFn;
 136         el.setSize = Ext.emptyFn;
 137         el.dom.scroll = 'no';
 138         me.allowDomMove = false;
 139         //this.autoWidth = true;
 140         //this.autoHeight = true;
 141         Ext.EventManager.onWindowResize(me.fireResize, me);
 142         me.renderTo = me.el;
 143     },
 144
 145     fireResize : function(w, h){
 146         // setSize is the single entry point to layouts
 147         this.setSize(w, h);
 148         //this.fireEvent('resize', this, w, h, w, h);
 149     }
 150 });
 151 </pre></pre></body></html>