Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Viewport.html
index 5019a17..8b6c789 100644 (file)
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.Viewport"></div>/**\r
- * @class Ext.Viewport\r
- * @extends Ext.Container\r
- * <p>A specialized container representing the viewable application area (the browser viewport).</p>\r
- * <p>The Viewport renders itself to the document body, and automatically sizes itself to the size of\r
- * the browser viewport and manages window resizing. There may only be one Viewport created\r
- * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s\r
- * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}\r
- * method of any of its child Panels may themselves have a layout.</p>\r
- * <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide\r
- * for scrolling if needed using the {@link #autoScroll} config.</p>\r
- * <p>An example showing a classic application border layout:</p><pre><code>\r
-new Ext.Viewport({\r
-    layout: 'border',\r
-    items: [{\r
-        region: 'north',\r
-        html: '&lt;h1 class="x-panel-header">Page Title&lt;/h1>',\r
-        autoHeight: true,\r
-        border: false,\r
-        margins: '0 0 5 0'\r
-    }, {\r
-        region: 'west',\r
-        collapsible: true,\r
-        title: 'Navigation',\r
-        width: 200\r
-        // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}\r
-    }, {\r
-        region: 'south',\r
-        title: 'Title for Panel',\r
-        collapsible: true,\r
-        html: 'Information goes here',\r
-        split: true,\r
-        height: 100,\r
-        minHeight: 100\r
-    }, {\r
-        region: 'east',\r
-        title: 'Title for the Grid Panel',\r
-        collapsible: true,\r
-        split: true,\r
-        width: 200,\r
-        xtype: 'grid',\r
-        // remaining grid configuration not shown ...\r
-        // notice that the GridPanel is added directly as the region\r
-        // it is not "overnested" inside another Panel\r
-    }, {\r
-        region: 'center',\r
-        xtype: 'tabpanel', // TabPanel itself has no title\r
-        items: {\r
-            title: 'Default Tab',\r
-            html: 'The first tab\'s content. Others may be added dynamically'\r
-        }\r
-    }]\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Create a new Viewport\r
- * @param {Object} config The config object\r
- * @xtype viewport\r
- */\r
-Ext.Viewport = Ext.extend(Ext.Container, {\r
-    /*\r
-     * Privatize config options which, if used, would interfere with the\r
-     * correct operation of the Viewport as the sole manager of the\r
-     * layout of the document body.\r
-     */\r
-    <div id="cfg-Ext.Viewport-applyTo"></div>/**\r
-     * @cfg {Mixed} applyTo @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-allowDomMove"></div>/**\r
-     * @cfg {Boolean} allowDomMove @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-hideParent"></div>/**\r
-     * @cfg {Boolean} hideParent @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-renderTo"></div>/**\r
-     * @cfg {Mixed} renderTo @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-hideParent"></div>/**\r
-     * @cfg {Boolean} hideParent @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-height"></div>/**\r
-     * @cfg {Number} height @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-width"></div>/**\r
-     * @cfg {Number} width @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-autoHeight"></div>/**\r
-     * @cfg {Boolean} autoHeight @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-autoWidth"></div>/**\r
-     * @cfg {Boolean} autoWidth @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-deferHeight"></div>/**\r
-     * @cfg {Boolean} deferHeight @hide\r
-     */\r
-    <div id="cfg-Ext.Viewport-monitorResize"></div>/**\r
-     * @cfg {Boolean} monitorResize @hide\r
-     */\r
-\r
-    initComponent : function() {\r
-        Ext.Viewport.superclass.initComponent.call(this);\r
-        document.getElementsByTagName('html')[0].className += ' x-viewport';\r
-        this.el = Ext.getBody();\r
-        this.el.setHeight = Ext.emptyFn;\r
-        this.el.setWidth = Ext.emptyFn;\r
-        this.el.setSize = Ext.emptyFn;\r
-        this.el.dom.scroll = 'no';\r
-        this.allowDomMove = false;\r
-        this.autoWidth = true;\r
-        this.autoHeight = true;\r
-        Ext.EventManager.onWindowResize(this.fireResize, this);\r
-        this.renderTo = this.el;\r
-    },\r
-\r
-    fireResize : function(w, h){\r
-        this.fireEvent('resize', this, w, h, w, h);\r
-    }\r
-});\r
-Ext.reg('viewport', Ext.Viewport);\r
-</pre>    \r
-</body>\r
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-container-Viewport'>/**
+</span> * A specialized container representing the viewable application area (the browser viewport).
+ *
+ * The Viewport renders itself to the document body, and automatically sizes itself to the size of
+ * the browser viewport and manages window resizing. There may only be one Viewport created
+ * in a page.
+ *
+ * Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
+ * on its child Components if you configure it with a {@link #layout}.
+ *
+ * A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
+ * required layout is simpler, a different layout should be chosen.
+ *
+ * For example, to simply make a single child item occupy all available space, use
+ * {@link Ext.layout.container.Fit fit layout}.
+ *
+ * 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}.
+ *
+ * Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
+ * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
+ * method of any of its child Panels may themselves have a layout.
+ *
+ * The Viewport does not provide scrolling, so child Panels within the Viewport should provide
+ * for scrolling if needed using the {@link #autoScroll} config.
+ *
+ * An example showing a classic application border layout:
+ *
+ *     @example
+ *     Ext.create('Ext.container.Viewport', {
+ *         layout: 'border',
+ *         items: [{
+ *             region: 'north',
+ *             html: '&lt;h1 class=&quot;x-panel-header&quot;&gt;Page Title&lt;/h1&gt;',
+ *             autoHeight: true,
+ *             border: false,
+ *             margins: '0 0 5 0'
+ *         }, {
+ *             region: 'west',
+ *             collapsible: true,
+ *             title: 'Navigation',
+ *             width: 150
+ *             // could use a TreePanel or AccordionLayout for navigational items
+ *         }, {
+ *             region: 'south',
+ *             title: 'South Panel',
+ *             collapsible: true,
+ *             html: 'Information goes here',
+ *             split: true,
+ *             height: 100,
+ *             minHeight: 100
+ *         }, {
+ *             region: 'east',
+ *             title: 'East Panel',
+ *             collapsible: true,
+ *             split: true,
+ *             width: 150
+ *         }, {
+ *             region: 'center',
+ *             xtype: 'tabpanel', // TabPanel itself has no title
+ *             activeTab: 0,      // First tab active by default
+ *             items: {
+ *                 title: 'Default Tab',
+ *                 html: 'The first tab\'s content. Others may be added dynamically'
+ *             }
+ *         }]
+ *     });
+ */
+Ext.define('Ext.container.Viewport', {
+    extend: 'Ext.container.Container',
+    alias: 'widget.viewport',
+    requires: ['Ext.EventManager'],
+    alternateClassName: 'Ext.Viewport',
+
+    // Privatize config options which, if used, would interfere with the
+    // correct operation of the Viewport as the sole manager of the
+    // layout of the document body.
+
+<span id='Ext-container-Viewport-cfg-applyTo'>    /**
+</span>     * @cfg {String/HTMLElement/Ext.Element} applyTo
+     * Not applicable.
+     */
+
+<span id='Ext-container-Viewport-cfg-allowDomMove'>    /**
+</span>     * @cfg {Boolean} allowDomMove
+     * Not applicable.
+     */
+
+<span id='Ext-container-Viewport-cfg-hideParent'>    /**
+</span>     * @cfg {Boolean} hideParent
+     * Not applicable.
+     */
+
+<span id='Ext-container-Viewport-cfg-renderTo'>    /**
+</span>     * @cfg {String/HTMLElement/Ext.Element} renderTo
+     * Not applicable. Always renders to document body.
+     */
+
+<span id='Ext-container-Viewport-cfg-hideParent'>    /**
+</span>     * @cfg {Boolean} hideParent
+     * Not applicable.
+     */
+
+<span id='Ext-container-Viewport-cfg-height'>    /**
+</span>     * @cfg {Number} height
+     * Not applicable. Sets itself to viewport width.
+     */
+
+<span id='Ext-container-Viewport-cfg-width'>    /**
+</span>     * @cfg {Number} width
+     * Not applicable. Sets itself to viewport height.
+     */
+
+<span id='Ext-container-Viewport-cfg-autoHeight'>    /**
+</span>     * @cfg {Boolean} autoHeight
+     * Not applicable.
+     */
+
+<span id='Ext-container-Viewport-cfg-autoWidth'>    /**
+</span>     * @cfg {Boolean} autoWidth
+     * Not applicable.
+     */
+
+<span id='Ext-container-Viewport-cfg-deferHeight'>    /**
+</span>     * @cfg {Boolean} deferHeight
+     * Not applicable.
+     */
+
+<span id='Ext-container-Viewport-cfg-monitorResize'>    /**
+</span>     * @cfg {Boolean} monitorResize
+     * Not applicable.
+     */
+
+    isViewport: true,
+
+    ariaRole: 'application',
+
+    initComponent : function() {
+        var me = this,
+            html = Ext.fly(document.body.parentNode),
+            el;
+        me.callParent(arguments);
+        html.addCls(Ext.baseCSSPrefix + 'viewport');
+        if (me.autoScroll) {
+            html.setStyle('overflow', 'auto');
+        }
+        me.el = el = Ext.getBody();
+        el.setHeight = Ext.emptyFn;
+        el.setWidth = Ext.emptyFn;
+        el.setSize = Ext.emptyFn;
+        el.dom.scroll = 'no';
+        me.allowDomMove = false;
+        Ext.EventManager.onWindowResize(me.fireResize, me);
+        me.renderTo = me.el;
+        me.width = Ext.Element.getViewportWidth();
+        me.height = Ext.Element.getViewportHeight();
+    },
+
+    fireResize : function(w, h){
+        // setSize is the single entry point to layouts
+        this.setSize(w, h);
+    }
+});
+</pre>
+</body>
+</html>