Viewport.html
6.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!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 "active" item at full size from a choice of several child items, use
* {@link Ext.layout.container.Card card layout}.
*
* Inner layouts are available because all {@link Ext.panel.Panel Panel}s
* added to the Viewport, either through its {@link #cfg-items}, or the {@link #method-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>',
* 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
* @private
*/
<span id='Ext-container-Viewport-cfg-allowDomMove'> /**
</span> * @cfg {Boolean} allowDomMove
* @private
*/
<span id='Ext-container-Viewport-cfg-renderTo'> /**
</span> * @cfg {String/HTMLElement/Ext.Element} renderTo
* Always renders to document body.
* @private
*/
<span id='Ext-container-Viewport-cfg-height'> /**
</span> * @cfg {Number} height
* Sets itself to viewport width.
* @private
*/
<span id='Ext-container-Viewport-cfg-width'> /**
</span> * @cfg {Number} width
* Sets itself to viewport height.
* @private
*/
<span id='Ext-container-Viewport-property-isViewport'> /**
</span> * @property {Boolean} isViewport
* `true` in this class to identify an object as an instantiated Viewport, or subclass thereof.
*/
isViewport: true,
ariaRole: 'application',
preserveElOnDestroy: true,
initComponent : function() {
var me = this,
html = document.body.parentNode,
el;
// Get the DOM disruption over with beforfe the Viewport renders and begins a layout
Ext.getScrollbarSize();
// Clear any dimensions, we will size later on
me.width = me.height = undefined;
me.callParent(arguments);
Ext.fly(html).addCls(Ext.baseCSSPrefix + 'viewport');
if (me.autoScroll) {
delete me.autoScroll;
Ext.fly(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;
me.renderTo = me.el;
},
onRender: function() {
var me = this;
me.callParent(arguments);
// Important to start life as the proper size (to avoid extra layouts)
// But after render so that the size is not stamped into the body
me.width = Ext.Element.getViewportWidth();
me.height = Ext.Element.getViewportHeight();
},
afterFirstLayout: function() {
var me = this;
me.callParent(arguments);
setTimeout(function() {
Ext.EventManager.onWindowResize(me.fireResize, me);
}, 1);
},
fireResize : function(width, height){
// In IE we can get resize events that have our current size, so we ignore them
// to avoid the useless layout...
if (width != this.width || height != this.height) {
this.setSize(width, height);
}
}
});
</pre>
</body>
</html>