Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / src / widgets / Viewport.js

diff --git a/src/widgets/Viewport.js b/src/widgets/Viewport.js
new file mode 100644 (file)
index 0000000..ab125b5
--- /dev/null
+++ b/src/widgets/Viewport.js
@@ -0,0 +1,124 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**\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
+    /**\r
+     * @cfg {Mixed} applyTo @hide\r
+        */\r
+    /**\r
+     * @cfg {Boolean} allowDomMove @hide\r
+        */\r
+    /**\r
+     * @cfg {Boolean} hideParent @hide\r
+        */\r
+    /**\r
+     * @cfg {Mixed} renderTo @hide\r
+        */\r
+    /**\r
+     * @cfg {Boolean} hideParent @hide\r
+        */\r
+    /**\r
+     * @cfg {Number} height @hide\r
+        */\r
+    /**\r
+     * @cfg {Number} width @hide\r
+        */\r
+    /**\r
+     * @cfg {Boolean} autoHeight @hide\r
+        */\r
+    /**\r
+     * @cfg {Boolean} autoWidth @hide\r
+        */\r
+    /**\r
+     * @cfg {Boolean} deferHeight @hide\r
+        */\r
+    /**\r
+     * @cfg {Boolean} monitorResize @hide\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);
\ No newline at end of file