docs/source/Viewport.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.2.0
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.Viewport"></div>/**
  16  * @class Ext.Viewport
  17  * @extends Ext.Container
  18  * <p>A specialized container representing the viewable application area (the browser viewport).</p>
  19  * <p>The Viewport renders itself to the document body, and automatically sizes itself to the size of
  20  * the browser viewport and manages window resizing. There may only be one Viewport created
  21  * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.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.</p>
  24  * <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
  25  * for scrolling if needed using the {@link #autoScroll} config.</p>
  26  * <p>An example showing a classic application border layout:</p><pre><code>
  27 new Ext.Viewport({
  28     layout: 'border',
  29     items: [{
  30         region: 'north',
  31         html: '&lt;h1 class="x-panel-header">Page Title&lt;/h1>',
  32         autoHeight: true,
  33         border: false,
  34         margins: '0 0 5 0'
  35     }, {
  36         region: 'west',
  37         collapsible: true,
  38         title: 'Navigation',
  39         width: 200
  40         // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
  41     }, {
  42         region: 'south',
  43         title: 'Title for Panel',
  44         collapsible: true,
  45         html: 'Information goes here',
  46         split: true,
  47         height: 100,
  48         minHeight: 100
  49     }, {
  50         region: 'east',
  51         title: 'Title for the Grid Panel',
  52         collapsible: true,
  53         split: true,
  54         width: 200,
  55         xtype: 'grid',
  56         // remaining grid configuration not shown ...
  57         // notice that the GridPanel is added directly as the region
  58         // it is not "overnested" inside another Panel
  59     }, {
  60         region: 'center',
  61         xtype: 'tabpanel', // TabPanel itself has no title
  62         items: {
  63             title: 'Default Tab',
  64             html: 'The first tab\'s content. Others may be added dynamically'
  65         }
  66     }]
  67 });
  68 </code></pre>
  69  * @constructor
  70  * Create a new Viewport
  71  * @param {Object} config The config object
  72  * @xtype viewport
  73  */
  74 Ext.Viewport = Ext.extend(Ext.Container, {
  75     /*
  76      * Privatize config options which, if used, would interfere with the
  77      * correct operation of the Viewport as the sole manager of the
  78      * layout of the document body.
  79      */
  80     <div id="cfg-Ext.Viewport-applyTo"></div>/**
  81      * @cfg {Mixed} applyTo @hide
  82      */
  83     <div id="cfg-Ext.Viewport-allowDomMove"></div>/**
  84      * @cfg {Boolean} allowDomMove @hide
  85      */
  86     <div id="cfg-Ext.Viewport-hideParent"></div>/**
  87      * @cfg {Boolean} hideParent @hide
  88      */
  89     <div id="cfg-Ext.Viewport-renderTo"></div>/**
  90      * @cfg {Mixed} renderTo @hide
  91      */
  92     <div id="cfg-Ext.Viewport-hideParent"></div>/**
  93      * @cfg {Boolean} hideParent @hide
  94      */
  95     <div id="cfg-Ext.Viewport-height"></div>/**
  96      * @cfg {Number} height @hide
  97      */
  98     <div id="cfg-Ext.Viewport-width"></div>/**
  99      * @cfg {Number} width @hide
 100      */
 101     <div id="cfg-Ext.Viewport-autoHeight"></div>/**
 102      * @cfg {Boolean} autoHeight @hide
 103      */
 104     <div id="cfg-Ext.Viewport-autoWidth"></div>/**
 105      * @cfg {Boolean} autoWidth @hide
 106      */
 107     <div id="cfg-Ext.Viewport-deferHeight"></div>/**
 108      * @cfg {Boolean} deferHeight @hide
 109      */
 110     <div id="cfg-Ext.Viewport-monitorResize"></div>/**
 111      * @cfg {Boolean} monitorResize @hide
 112      */
 113
 114     initComponent : function() {
 115         Ext.Viewport.superclass.initComponent.call(this);
 116         document.getElementsByTagName('html')[0].className += ' x-viewport';
 117         this.el = Ext.getBody();
 118         this.el.setHeight = Ext.emptyFn;
 119         this.el.setWidth = Ext.emptyFn;
 120         this.el.setSize = Ext.emptyFn;
 121         this.el.dom.scroll = 'no';
 122         this.allowDomMove = false;
 123         this.autoWidth = true;
 124         this.autoHeight = true;
 125         Ext.EventManager.onWindowResize(this.fireResize, this);
 126         this.renderTo = this.el;
 127     },
 128
 129     fireResize : function(w, h){
 130         this.fireEvent('resize', this, w, h, w, h);
 131     }
 132 });
 133 Ext.reg('viewport', Ext.Viewport);
 134 </pre>
 135 </body>
 136 </html>