+<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <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>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../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();">
- <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.2
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.Viewport"></div>/**
- * @class Ext.Viewport
- * @extends Ext.Container
- * <p>A specialized container representing the viewable application area (the browser viewport).</p>
- * <p>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. Inner layouts are available by virtue of the fact that all {@link Ext.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.</p>
- * <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
- * for scrolling if needed using the {@link #autoScroll} config.</p>
- * <p>An example showing a classic application border layout:</p><pre><code>
-new Ext.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: 200
- // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
- }, {
- region: 'south',
- title: 'Title for Panel',
- collapsible: true,
- html: 'Information goes here',
- split: true,
- height: 100,
- minHeight: 100
- }, {
- region: 'east',
- title: 'Title for the Grid Panel',
- collapsible: true,
- split: true,
- width: 200,
- xtype: 'grid',
- // remaining grid configuration not shown ...
- // notice that the GridPanel is added directly as the region
- // it is not "overnested" inside another Panel
- }, {
- region: 'center',
- xtype: 'tabpanel', // TabPanel itself has no title
- items: {
- title: 'Default Tab',
- html: 'The first tab\'s content. Others may be added dynamically'
- }
- }]
-});
-</code></pre>
- * @constructor
- * Create a new Viewport
- * @param {Object} config The config object
- * @xtype viewport
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-container-Viewport'>/**
+</span> * @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'
+ }
+ }]
+ });
+
+ * @markdown
*/
-Ext.Viewport = Ext.extend(Ext.Container, {
+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.
*/
- <div id="cfg-Ext.Viewport-applyTo"></div>/**
- * @cfg {Mixed} applyTo @hide
+<span id='Ext-container-Viewport-cfg-applyTo'> /**
+</span> * @cfg {Mixed} applyTo @hide
*/
- <div id="cfg-Ext.Viewport-allowDomMove"></div>/**
- * @cfg {Boolean} allowDomMove @hide
+<span id='Ext-container-Viewport-cfg-allowDomMove'> /**
+</span> * @cfg {Boolean} allowDomMove @hide
*/
- <div id="cfg-Ext.Viewport-hideParent"></div>/**
- * @cfg {Boolean} hideParent @hide
+<span id='Ext-container-Viewport-cfg-hideParent'> /**
+</span> * @cfg {Boolean} hideParent @hide
*/
- <div id="cfg-Ext.Viewport-renderTo"></div>/**
- * @cfg {Mixed} renderTo @hide
+<span id='Ext-container-Viewport-cfg-renderTo'> /**
+</span> * @cfg {Mixed} renderTo @hide
*/
- <div id="cfg-Ext.Viewport-hideParent"></div>/**
- * @cfg {Boolean} hideParent @hide
+<span id='Ext-container-Viewport-cfg-hideParent'> /**
+</span> * @cfg {Boolean} hideParent @hide
*/
- <div id="cfg-Ext.Viewport-height"></div>/**
- * @cfg {Number} height @hide
+<span id='Ext-container-Viewport-cfg-height'> /**
+</span> * @cfg {Number} height @hide
*/
- <div id="cfg-Ext.Viewport-width"></div>/**
- * @cfg {Number} width @hide
+<span id='Ext-container-Viewport-cfg-width'> /**
+</span> * @cfg {Number} width @hide
*/
- <div id="cfg-Ext.Viewport-autoHeight"></div>/**
- * @cfg {Boolean} autoHeight @hide
+<span id='Ext-container-Viewport-cfg-autoHeight'> /**
+</span> * @cfg {Boolean} autoHeight @hide
*/
- <div id="cfg-Ext.Viewport-autoWidth"></div>/**
- * @cfg {Boolean} autoWidth @hide
+<span id='Ext-container-Viewport-cfg-autoWidth'> /**
+</span> * @cfg {Boolean} autoWidth @hide
*/
- <div id="cfg-Ext.Viewport-deferHeight"></div>/**
- * @cfg {Boolean} deferHeight @hide
+<span id='Ext-container-Viewport-cfg-deferHeight'> /**
+</span> * @cfg {Boolean} deferHeight @hide
*/
- <div id="cfg-Ext.Viewport-monitorResize"></div>/**
- * @cfg {Boolean} monitorResize @hide
+<span id='Ext-container-Viewport-cfg-monitorResize'> /**
+</span> * @cfg {Boolean} monitorResize @hide
*/
+ isViewport: true,
+
+ ariaRole: 'application',
initComponent : function() {
- Ext.Viewport.superclass.initComponent.call(this);
- document.getElementsByTagName('html')[0].className += ' x-viewport';
- this.el = Ext.getBody();
- this.el.setHeight = Ext.emptyFn;
- this.el.setWidth = Ext.emptyFn;
- this.el.setSize = Ext.emptyFn;
- this.el.dom.scroll = 'no';
- this.allowDomMove = false;
- this.autoWidth = true;
- this.autoHeight = true;
- Ext.EventManager.onWindowResize(this.fireResize, this);
- this.renderTo = this.el;
+ 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.core.Element.getViewportWidth();
+ me.height = Ext.core.Element.getViewportHeight();
},
fireResize : function(w, h){
- this.fireEvent('resize', this, w, h, w, h);
+ // setSize is the single entry point to layouts
+ this.setSize(w, h);
}
});
-Ext.reg('viewport', Ext.Viewport);
-</pre>
+</pre>
</body>
-</html>
\ No newline at end of file
+</html>
git.ithinksw.org / extjs.git / blobdiff