X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..HEAD:/docs/source/Viewport.html diff --git a/docs/source/Viewport.html b/docs/source/Viewport.html index 78b6e9e7..8b6c7894 100644 --- a/docs/source/Viewport.html +++ b/docs/source/Viewport.html @@ -1,77 +1,87 @@ -Sencha Documentation Project
/**
- * @class Ext.container.Viewport
- * @extends Ext.container.Container
-
-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 "active" 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.
-{@img Ext.container.Viewport/Ext.container.Viewport.png Ext.container.Viewport component}
-An example showing a classic application border layout:
-
-    Ext.create('Ext.container.Viewport', {
-        layout: 'border',
-        renderTo: Ext.getBody(),
-        items: [{
-            region: 'north',
-            html: '<h1 class="x-panel-header">Page Title</h1>',
-            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'
-            }
-        }]
-    });
-
- * @constructor
- * Create a new Viewport
- * @param {Object} config The config object
- * @markdown
- * @xtype viewport
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
+ * 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 "active" 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: '<h1 class="x-panel-header">Page Title</h1>',
+ *             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',
@@ -79,48 +89,69 @@ Ext.define('Ext.container.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.
-     */
-    /**
-     * @cfg {Mixed} applyTo @hide
+    // 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.
+
+    /**
+     * @cfg {String/HTMLElement/Ext.Element} applyTo
+     * Not applicable.
      */
-    /**
-     * @cfg {Boolean} allowDomMove @hide
+
+    /**
+     * @cfg {Boolean} allowDomMove
+     * Not applicable.
      */
-    /**
-     * @cfg {Boolean} hideParent @hide
+
+    /**
+     * @cfg {Boolean} hideParent
+     * Not applicable.
      */
-    /**
-     * @cfg {Mixed} renderTo @hide
+
+    /**
+     * @cfg {String/HTMLElement/Ext.Element} renderTo
+     * Not applicable. Always renders to document body.
      */
-    /**
-     * @cfg {Boolean} hideParent @hide
+
+    /**
+     * @cfg {Boolean} hideParent
+     * Not applicable.
      */
-    /**
-     * @cfg {Number} height @hide
+
+    /**
+     * @cfg {Number} height
+     * Not applicable. Sets itself to viewport width.
      */
-    /**
-     * @cfg {Number} width @hide
+
+    /**
+     * @cfg {Number} width
+     * Not applicable. Sets itself to viewport height.
      */
-    /**
-     * @cfg {Boolean} autoHeight @hide
+
+    /**
+     * @cfg {Boolean} autoHeight
+     * Not applicable.
      */
-    /**
-     * @cfg {Boolean} autoWidth @hide
+
+    /**
+     * @cfg {Boolean} autoWidth
+     * Not applicable.
      */
-    /**
-     * @cfg {Boolean} deferHeight @hide
+
+    /**
+     * @cfg {Boolean} deferHeight
+     * Not applicable.
      */
-    /**
-     * @cfg {Boolean} monitorResize @hide
+
+    /**
+     * @cfg {Boolean} monitorResize
+     * Not applicable.
      */
 
     isViewport: true,
 
     ariaRole: 'application',
+
     initComponent : function() {
         var me = this,
             html = Ext.fly(document.body.parentNode),
@@ -136,16 +167,17 @@ Ext.define('Ext.container.Viewport', {
         el.setSize = Ext.emptyFn;
         el.dom.scroll = 'no';
         me.allowDomMove = false;
-        //this.autoWidth = true;
-        //this.autoHeight = true;
         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);
-        //this.fireEvent('resize', this, w, h, w, h);
     }
 });
-
\ No newline at end of file +
+ +