1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | /** |
---|
10 | * @class Ext.Window |
---|
11 | * @extends Ext.Panel |
---|
12 | * A specialized panel intended for use as an application window. Windows are floated and draggable by default, and |
---|
13 | * also provide specific behavior like the ability to maximize and restore (with an event for minimizing, since the |
---|
14 | * minimize behavior is application-specific). Windows can also be linked to a {@link Ext.WindowGroup} or managed |
---|
15 | * by the {@link Ext.WindowMgr} to provide grouping, activation, to front/back and other application-specific behavior. |
---|
16 | * @constructor |
---|
17 | * @param {Object} config The config object |
---|
18 | */ |
---|
19 | Ext.Window = Ext.extend(Ext.Panel, { |
---|
20 | /** |
---|
21 | * @cfg {Number} x |
---|
22 | * The X position of the left edge of the Window on initial showing. Defaults to centering the Window within |
---|
23 | * the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to). |
---|
24 | */ |
---|
25 | /** |
---|
26 | * @cfg {Number} y |
---|
27 | * The Y position of the top edge of the Window on initial showing. Defaults to centering the Window within |
---|
28 | * the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to). |
---|
29 | */ |
---|
30 | /** |
---|
31 | * @cfg {Boolean} modal |
---|
32 | * True to make the window modal and mask everything behind it when displayed, false to display it without |
---|
33 | * restricting access to other UI elements (defaults to false). |
---|
34 | */ |
---|
35 | /** |
---|
36 | * @cfg {String/Element} animateTarget |
---|
37 | * Id or element from which the window should animate while opening (defaults to null with no animation). |
---|
38 | */ |
---|
39 | /** |
---|
40 | * @cfg {String} resizeHandles |
---|
41 | * A valid {@link Ext.Resizable} handles config string (defaults to 'all'). Only applies when resizable = true. |
---|
42 | */ |
---|
43 | /** |
---|
44 | * @cfg {Ext.WindowGroup} manager |
---|
45 | * A reference to the WindowGroup that should manage this window (defaults to {@link Ext.WindowMgr}). |
---|
46 | */ |
---|
47 | /** |
---|
48 | * @cfg {String/Number/Button} defaultButton |
---|
49 | * The id / index of a button or a button instance to focus when this window received the focus. |
---|
50 | */ |
---|
51 | /** |
---|
52 | * @cfg {Function} onEsc |
---|
53 | * Allows override of the built-in processing for the escape key. Default action |
---|
54 | * is to close the Window (performing whatever action is specified in {@link #closeAction}. |
---|
55 | * To prevent the Window closing when the escape key is pressed, specify this as |
---|
56 | * Ext.emptyFn (See {@link Ext#emptyFn}). |
---|
57 | */ |
---|
58 | /** |
---|
59 | * @cfg {Boolean} collapsed |
---|
60 | * True to render the window collapsed, false to render it expanded (defaults to false). Note that if |
---|
61 | * {@link #expandOnShow} is true (the default) it will override the <tt>collapsed</tt> config and the window |
---|
62 | * will always be expanded when shown. |
---|
63 | */ |
---|
64 | /** |
---|
65 | * @cfg {Boolean} maximized |
---|
66 | * True to initially display the window in a maximized state. (Defaults to false). |
---|
67 | */ |
---|
68 | |
---|
69 | /** |
---|
70 | * @cfg {String} baseCls |
---|
71 | * The base CSS class to apply to this panel's element (defaults to 'x-window'). |
---|
72 | */ |
---|
73 | baseCls : 'x-window', |
---|
74 | /** |
---|
75 | * @cfg {Boolean} resizable |
---|
76 | * True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true). |
---|
77 | */ |
---|
78 | resizable:true, |
---|
79 | /** |
---|
80 | * @cfg {Boolean} draggable |
---|
81 | * True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true). Note |
---|
82 | * that by default the window will be centered in the viewport, so if dragging is disabled the window may need |
---|
83 | * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);). |
---|
84 | */ |
---|
85 | draggable:true, |
---|
86 | /** |
---|
87 | * @cfg {Boolean} closable |
---|
88 | * <p>True to display the 'close' tool button and allow the user to close the window, false to |
---|
89 | * hide the button and disallow closing the window (default to true).</p> |
---|
90 | * <p>By default, when close is requested by either clicking the close button in the header |
---|
91 | * or pressing ESC when the Window has focus, the {@link #close} method will be called. This |
---|
92 | * will <i>destroy</i> the Window and its content meaning that it may not be reused.</p> |
---|
93 | * <p>To make closing a Window <i>hide</i> the Window so that it may be reused, set |
---|
94 | * {@link #closeAction} to 'hide'. |
---|
95 | */ |
---|
96 | closable : true, |
---|
97 | /** |
---|
98 | * @cfg {Boolean} constrain |
---|
99 | * True to constrain the window to the viewport, false to allow it to fall outside of the viewport |
---|
100 | * (defaults to false). Optionally the header only can be constrained using {@link #constrainHeader}. |
---|
101 | */ |
---|
102 | constrain:false, |
---|
103 | /** |
---|
104 | * @cfg {Boolean} constrainHeader |
---|
105 | * True to constrain the window header to the viewport, allowing the window body to fall outside of the viewport, |
---|
106 | * false to allow the header to fall outside the viewport (defaults to false). Optionally the entire window |
---|
107 | * can be constrained using {@link #constrain}. |
---|
108 | */ |
---|
109 | constrainHeader:false, |
---|
110 | /** |
---|
111 | * @cfg {Boolean} plain |
---|
112 | * True to render the window body with a transparent background so that it will blend into the framing |
---|
113 | * elements, false to add a lighter background color to visually highlight the body element and separate it |
---|
114 | * more distinctly from the surrounding frame (defaults to false). |
---|
115 | */ |
---|
116 | plain:false, |
---|
117 | /** |
---|
118 | * @cfg {Boolean} minimizable |
---|
119 | * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button |
---|
120 | * and disallow minimizing the window (defaults to false). Note that this button provides no implementation -- |
---|
121 | * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a |
---|
122 | * custom minimize behavior implemented for this option to be useful. |
---|
123 | */ |
---|
124 | minimizable : false, |
---|
125 | /** |
---|
126 | * @cfg {Boolean} maximizable |
---|
127 | * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button |
---|
128 | * and disallow maximizing the window (defaults to false). Note that when a window is maximized, the tool button |
---|
129 | * will automatically change to a 'restore' button with the appropriate behavior already built-in that will |
---|
130 | * restore the window to its previous size. |
---|
131 | */ |
---|
132 | maximizable : false, |
---|
133 | /** |
---|
134 | * @cfg {Number} minHeight |
---|
135 | * The minimum height in pixels allowed for this window (defaults to 100). Only applies when resizable = true. |
---|
136 | */ |
---|
137 | minHeight: 100, |
---|
138 | /** |
---|
139 | * @cfg {Number} minWidth |
---|
140 | * The minimum width in pixels allowed for this window (defaults to 200). Only applies when resizable = true. |
---|
141 | */ |
---|
142 | minWidth: 200, |
---|
143 | /** |
---|
144 | * @cfg {Boolean} expandOnShow |
---|
145 | * True to always expand the window when it is displayed, false to keep it in its current state (which may be |
---|
146 | * {@link #collapsed}) when displayed (defaults to true). |
---|
147 | */ |
---|
148 | expandOnShow: true, |
---|
149 | /** |
---|
150 | * @cfg {String} closeAction |
---|
151 | * The action to take when the close button is clicked. The default action is 'close' which will actually remove |
---|
152 | * the window from the DOM and destroy it. The other valid option is 'hide' which will simply hide the window |
---|
153 | * by setting visibility to hidden and applying negative offsets, keeping the window available to be redisplayed |
---|
154 | * via the {@link #show} method. |
---|
155 | */ |
---|
156 | closeAction: 'close', |
---|
157 | /** |
---|
158 | * @cfg {String} elements |
---|
159 | * A comma-delimited list of panel elements to initialize when the window is rendered. Normally, this list will be |
---|
160 | * generated automatically based on the items added to the window at config time, but sometimes it might be useful to |
---|
161 | * make sure a structural element is rendered even if not specified at config time (for example, you may want |
---|
162 | * to add a button or toolbar dynamically after the window has been rendered). Adding those elements to this |
---|
163 | * list will allocate the required placeholders in the window when it is rendered. Valid values are<ul> |
---|
164 | * <li><b>header</b> (required)</li> |
---|
165 | * <li><b>tbar</b> (top bar)</li> |
---|
166 | * <li><b>body</b> (required)</li> |
---|
167 | * <li><b>bbar</b> (bottom bar)</li> |
---|
168 | * <li><b>footer</b><li> |
---|
169 | * </ul> |
---|
170 | * Defaults to 'header,body'. |
---|
171 | */ |
---|
172 | elements: 'header,body', |
---|
173 | |
---|
174 | // inherited docs, same default |
---|
175 | collapsible:false, |
---|
176 | |
---|
177 | // private |
---|
178 | initHidden : true, |
---|
179 | /** |
---|
180 | * @cfg {Boolean} monitorResize @hide |
---|
181 | * This is automatically managed based on the value of constrain and constrainToHeader |
---|
182 | */ |
---|
183 | monitorResize : true, |
---|
184 | /** @cfg {Boolean} frame @hide */ |
---|
185 | frame:true, |
---|
186 | /** @cfg {Boolean} floating @hide */ |
---|
187 | floating:true, |
---|
188 | |
---|
189 | // private |
---|
190 | initComponent : function(){ |
---|
191 | Ext.Window.superclass.initComponent.call(this); |
---|
192 | this.addEvents( |
---|
193 | /** |
---|
194 | * @event activate |
---|
195 | * Fires after the window has been visually activated via {@link setActive}. |
---|
196 | * @param {Ext.Window} this |
---|
197 | */ |
---|
198 | /** |
---|
199 | * @event deactivate |
---|
200 | * Fires after the window has been visually deactivated via {@link setActive}. |
---|
201 | * @param {Ext.Window} this |
---|
202 | */ |
---|
203 | /** |
---|
204 | * @event resize |
---|
205 | * Fires after the window has been resized. |
---|
206 | * @param {Ext.Window} this |
---|
207 | * @param {Number} width The window's new width |
---|
208 | * @param {Number} height The window's new height |
---|
209 | */ |
---|
210 | 'resize', |
---|
211 | /** |
---|
212 | * @event maximize |
---|
213 | * Fires after the window has been maximized. |
---|
214 | * @param {Ext.Window} this |
---|
215 | */ |
---|
216 | 'maximize', |
---|
217 | /** |
---|
218 | * @event minimize |
---|
219 | * Fires after the window has been minimized. |
---|
220 | * @param {Ext.Window} this |
---|
221 | */ |
---|
222 | 'minimize', |
---|
223 | /** |
---|
224 | * @event restore |
---|
225 | * Fires after the window has been restored to its original size after being maximized. |
---|
226 | * @param {Ext.Window} this |
---|
227 | */ |
---|
228 | 'restore' |
---|
229 | ); |
---|
230 | }, |
---|
231 | |
---|
232 | // private |
---|
233 | getState : function(){ |
---|
234 | return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox()); |
---|
235 | }, |
---|
236 | |
---|
237 | // private |
---|
238 | onRender : function(ct, position){ |
---|
239 | Ext.Window.superclass.onRender.call(this, ct, position); |
---|
240 | |
---|
241 | if(this.plain){ |
---|
242 | this.el.addClass('x-window-plain'); |
---|
243 | } |
---|
244 | |
---|
245 | // this element allows the Window to be focused for keyboard events |
---|
246 | this.focusEl = this.el.createChild({ |
---|
247 | tag: "a", href:"#", cls:"x-dlg-focus", |
---|
248 | tabIndex:"-1", html: " "}); |
---|
249 | this.focusEl.swallowEvent('click', true); |
---|
250 | |
---|
251 | this.proxy = this.el.createProxy("x-window-proxy"); |
---|
252 | this.proxy.enableDisplayMode('block'); |
---|
253 | |
---|
254 | if(this.modal){ |
---|
255 | this.mask = this.container.createChild({cls:"ext-el-mask"}, this.el.dom); |
---|
256 | this.mask.enableDisplayMode("block"); |
---|
257 | this.mask.hide(); |
---|
258 | this.mask.on('click', this.focus, this); |
---|
259 | } |
---|
260 | }, |
---|
261 | |
---|
262 | // private |
---|
263 | initEvents : function(){ |
---|
264 | Ext.Window.superclass.initEvents.call(this); |
---|
265 | if(this.animateTarget){ |
---|
266 | this.setAnimateTarget(this.animateTarget); |
---|
267 | } |
---|
268 | |
---|
269 | if(this.resizable){ |
---|
270 | this.resizer = new Ext.Resizable(this.el, { |
---|
271 | minWidth: this.minWidth, |
---|
272 | minHeight:this.minHeight, |
---|
273 | handles: this.resizeHandles || "all", |
---|
274 | pinned: true, |
---|
275 | resizeElement : this.resizerAction |
---|
276 | }); |
---|
277 | this.resizer.window = this; |
---|
278 | this.resizer.on("beforeresize", this.beforeResize, this); |
---|
279 | } |
---|
280 | |
---|
281 | if(this.draggable){ |
---|
282 | this.header.addClass("x-window-draggable"); |
---|
283 | } |
---|
284 | this.initTools(); |
---|
285 | |
---|
286 | this.el.on("mousedown", this.toFront, this); |
---|
287 | this.manager = this.manager || Ext.WindowMgr; |
---|
288 | this.manager.register(this); |
---|
289 | this.hidden = true; |
---|
290 | if(this.maximized){ |
---|
291 | this.maximized = false; |
---|
292 | this.maximize(); |
---|
293 | } |
---|
294 | if(this.closable){ |
---|
295 | var km = this.getKeyMap(); |
---|
296 | km.on(27, this.onEsc, this); |
---|
297 | km.disable(); |
---|
298 | } |
---|
299 | }, |
---|
300 | |
---|
301 | initDraggable : function(){ |
---|
302 | /** |
---|
303 | * If this Window is configured {@link #draggable}, this property will contain |
---|
304 | * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element. |
---|
305 | * @type Ext.dd.DD |
---|
306 | * @property dd |
---|
307 | */ |
---|
308 | this.dd = new Ext.Window.DD(this); |
---|
309 | }, |
---|
310 | |
---|
311 | // private |
---|
312 | onEsc : function(){ |
---|
313 | this[this.closeAction](); |
---|
314 | }, |
---|
315 | |
---|
316 | // private |
---|
317 | beforeDestroy : function(){ |
---|
318 | this.hide(); |
---|
319 | if(this.doAnchor){ |
---|
320 | Ext.EventManager.removeResizeListener(this.doAnchor, this); |
---|
321 | Ext.EventManager.un(window, 'scroll', this.doAnchor, this); |
---|
322 | } |
---|
323 | Ext.destroy( |
---|
324 | this.focusEl, |
---|
325 | this.resizer, |
---|
326 | this.dd, |
---|
327 | this.proxy, |
---|
328 | this.mask |
---|
329 | ); |
---|
330 | Ext.Window.superclass.beforeDestroy.call(this); |
---|
331 | }, |
---|
332 | |
---|
333 | // private |
---|
334 | onDestroy : function(){ |
---|
335 | if(this.manager){ |
---|
336 | this.manager.unregister(this); |
---|
337 | } |
---|
338 | Ext.Window.superclass.onDestroy.call(this); |
---|
339 | }, |
---|
340 | |
---|
341 | // private |
---|
342 | initTools : function(){ |
---|
343 | if(this.minimizable){ |
---|
344 | this.addTool({ |
---|
345 | id: 'minimize', |
---|
346 | handler: this.minimize.createDelegate(this, []) |
---|
347 | }); |
---|
348 | } |
---|
349 | if(this.maximizable){ |
---|
350 | this.addTool({ |
---|
351 | id: 'maximize', |
---|
352 | handler: this.maximize.createDelegate(this, []) |
---|
353 | }); |
---|
354 | this.addTool({ |
---|
355 | id: 'restore', |
---|
356 | handler: this.restore.createDelegate(this, []), |
---|
357 | hidden:true |
---|
358 | }); |
---|
359 | this.header.on('dblclick', this.toggleMaximize, this); |
---|
360 | } |
---|
361 | if(this.closable){ |
---|
362 | this.addTool({ |
---|
363 | id: 'close', |
---|
364 | handler: this[this.closeAction].createDelegate(this, []) |
---|
365 | }); |
---|
366 | } |
---|
367 | }, |
---|
368 | |
---|
369 | // private |
---|
370 | resizerAction : function(){ |
---|
371 | var box = this.proxy.getBox(); |
---|
372 | this.proxy.hide(); |
---|
373 | this.window.handleResize(box); |
---|
374 | return box; |
---|
375 | }, |
---|
376 | |
---|
377 | // private |
---|
378 | beforeResize : function(){ |
---|
379 | this.resizer.minHeight = Math.max(this.minHeight, this.getFrameHeight() + 40); // 40 is a magic minimum content size? |
---|
380 | this.resizer.minWidth = Math.max(this.minWidth, this.getFrameWidth() + 40); |
---|
381 | this.resizeBox = this.el.getBox(); |
---|
382 | }, |
---|
383 | |
---|
384 | // private |
---|
385 | updateHandles : function(){ |
---|
386 | if(Ext.isIE && this.resizer){ |
---|
387 | this.resizer.syncHandleHeight(); |
---|
388 | this.el.repaint(); |
---|
389 | } |
---|
390 | }, |
---|
391 | |
---|
392 | // private |
---|
393 | handleResize : function(box){ |
---|
394 | var rz = this.resizeBox; |
---|
395 | if(rz.x != box.x || rz.y != box.y){ |
---|
396 | this.updateBox(box); |
---|
397 | }else{ |
---|
398 | this.setSize(box); |
---|
399 | } |
---|
400 | this.focus(); |
---|
401 | this.updateHandles(); |
---|
402 | this.saveState(); |
---|
403 | if(this.layout){ |
---|
404 | this.doLayout(); |
---|
405 | } |
---|
406 | this.fireEvent("resize", this, box.width, box.height); |
---|
407 | }, |
---|
408 | |
---|
409 | /** |
---|
410 | * Focuses the window. If a defaultButton is set, it will receive focus, otherwise the |
---|
411 | * window itself will receive focus. |
---|
412 | */ |
---|
413 | focus : function(){ |
---|
414 | var f = this.focusEl, db = this.defaultButton, t = typeof db; |
---|
415 | if(t != 'undefined'){ |
---|
416 | if(t == 'number'){ |
---|
417 | f = this.buttons[db]; |
---|
418 | }else if(t == 'string'){ |
---|
419 | f = Ext.getCmp(db); |
---|
420 | }else{ |
---|
421 | f = db; |
---|
422 | } |
---|
423 | } |
---|
424 | f.focus.defer(10, f); |
---|
425 | }, |
---|
426 | |
---|
427 | /** |
---|
428 | * Sets the target element from which the window should animate while opening. |
---|
429 | * @param {String/Element} el The target element or id |
---|
430 | */ |
---|
431 | setAnimateTarget : function(el){ |
---|
432 | el = Ext.get(el); |
---|
433 | this.animateTarget = el; |
---|
434 | }, |
---|
435 | |
---|
436 | // private |
---|
437 | beforeShow : function(){ |
---|
438 | delete this.el.lastXY; |
---|
439 | delete this.el.lastLT; |
---|
440 | if(this.x === undefined || this.y === undefined){ |
---|
441 | var xy = this.el.getAlignToXY(this.container, 'c-c'); |
---|
442 | var pos = this.el.translatePoints(xy[0], xy[1]); |
---|
443 | this.x = this.x === undefined? pos.left : this.x; |
---|
444 | this.y = this.y === undefined? pos.top : this.y; |
---|
445 | } |
---|
446 | this.el.setLeftTop(this.x, this.y); |
---|
447 | |
---|
448 | if(this.expandOnShow){ |
---|
449 | this.expand(false); |
---|
450 | } |
---|
451 | |
---|
452 | if(this.modal){ |
---|
453 | Ext.getBody().addClass("x-body-masked"); |
---|
454 | this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); |
---|
455 | this.mask.show(); |
---|
456 | } |
---|
457 | }, |
---|
458 | |
---|
459 | /** |
---|
460 | * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden. |
---|
461 | * @param {String/Element} animateTarget (optional) The target element or id from which the window should |
---|
462 | * animate while opening (defaults to undefined with no animation) |
---|
463 | * @param {Function} callback (optional) A callback function to call after the window is displayed |
---|
464 | * @param {Object} scope (optional) The scope in which to execute the callback |
---|
465 | */ |
---|
466 | show : function(animateTarget, cb, scope){ |
---|
467 | if(!this.rendered){ |
---|
468 | this.render(Ext.getBody()); |
---|
469 | } |
---|
470 | if(this.hidden === false){ |
---|
471 | this.toFront(); |
---|
472 | return; |
---|
473 | } |
---|
474 | if(this.fireEvent("beforeshow", this) === false){ |
---|
475 | return; |
---|
476 | } |
---|
477 | if(cb){ |
---|
478 | this.on('show', cb, scope, {single:true}); |
---|
479 | } |
---|
480 | this.hidden = false; |
---|
481 | if(animateTarget !== undefined){ |
---|
482 | this.setAnimateTarget(animateTarget); |
---|
483 | } |
---|
484 | this.beforeShow(); |
---|
485 | if(this.animateTarget){ |
---|
486 | this.animShow(); |
---|
487 | }else{ |
---|
488 | this.afterShow(); |
---|
489 | } |
---|
490 | }, |
---|
491 | |
---|
492 | // private |
---|
493 | afterShow : function(){ |
---|
494 | this.proxy.hide(); |
---|
495 | this.el.setStyle('display', 'block'); |
---|
496 | this.el.show(); |
---|
497 | if(this.maximized){ |
---|
498 | this.fitContainer(); |
---|
499 | } |
---|
500 | if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug |
---|
501 | this.cascade(this.setAutoScroll); |
---|
502 | } |
---|
503 | |
---|
504 | if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){ |
---|
505 | Ext.EventManager.onWindowResize(this.onWindowResize, this); |
---|
506 | } |
---|
507 | this.doConstrain(); |
---|
508 | if(this.layout){ |
---|
509 | this.doLayout(); |
---|
510 | } |
---|
511 | if(this.keyMap){ |
---|
512 | this.keyMap.enable(); |
---|
513 | } |
---|
514 | this.toFront(); |
---|
515 | this.updateHandles(); |
---|
516 | this.fireEvent("show", this); |
---|
517 | }, |
---|
518 | |
---|
519 | // private |
---|
520 | animShow : function(){ |
---|
521 | this.proxy.show(); |
---|
522 | this.proxy.setBox(this.animateTarget.getBox()); |
---|
523 | this.proxy.setOpacity(0); |
---|
524 | var b = this.getBox(false); |
---|
525 | b.callback = this.afterShow; |
---|
526 | b.scope = this; |
---|
527 | b.duration = .25; |
---|
528 | b.easing = 'easeNone'; |
---|
529 | b.opacity = .5; |
---|
530 | b.block = true; |
---|
531 | this.el.setStyle('display', 'none'); |
---|
532 | this.proxy.shift(b); |
---|
533 | }, |
---|
534 | |
---|
535 | /** |
---|
536 | * Hides the window, setting it to invisible and applying negative offsets. |
---|
537 | * @param {String/Element} animateTarget (optional) The target element or id to which the window should |
---|
538 | * animate while hiding (defaults to null with no animation) |
---|
539 | * @param {Function} callback (optional) A callback function to call after the window is hidden |
---|
540 | * @param {Object} scope (optional) The scope in which to execute the callback |
---|
541 | */ |
---|
542 | hide : function(animateTarget, cb, scope){ |
---|
543 | if(this.activeGhost){ // drag active? |
---|
544 | this.hide.defer(100, this, [animateTarget, cb, scope]); |
---|
545 | return; |
---|
546 | } |
---|
547 | if(this.hidden || this.fireEvent("beforehide", this) === false){ |
---|
548 | return; |
---|
549 | } |
---|
550 | if(cb){ |
---|
551 | this.on('hide', cb, scope, {single:true}); |
---|
552 | } |
---|
553 | this.hidden = true; |
---|
554 | if(animateTarget !== undefined){ |
---|
555 | this.setAnimateTarget(animateTarget); |
---|
556 | } |
---|
557 | if(this.animateTarget){ |
---|
558 | this.animHide(); |
---|
559 | }else{ |
---|
560 | this.el.hide(); |
---|
561 | this.afterHide(); |
---|
562 | } |
---|
563 | }, |
---|
564 | |
---|
565 | // private |
---|
566 | afterHide : function(){ |
---|
567 | this.proxy.hide(); |
---|
568 | if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){ |
---|
569 | Ext.EventManager.removeResizeListener(this.onWindowResize, this); |
---|
570 | } |
---|
571 | if(this.modal){ |
---|
572 | this.mask.hide(); |
---|
573 | Ext.getBody().removeClass("x-body-masked"); |
---|
574 | } |
---|
575 | if(this.keyMap){ |
---|
576 | this.keyMap.disable(); |
---|
577 | } |
---|
578 | this.fireEvent("hide", this); |
---|
579 | }, |
---|
580 | |
---|
581 | // private |
---|
582 | animHide : function(){ |
---|
583 | this.proxy.setOpacity(.5); |
---|
584 | this.proxy.show(); |
---|
585 | var tb = this.getBox(false); |
---|
586 | this.proxy.setBox(tb); |
---|
587 | this.el.hide(); |
---|
588 | var b = this.animateTarget.getBox(); |
---|
589 | b.callback = this.afterHide; |
---|
590 | b.scope = this; |
---|
591 | b.duration = .25; |
---|
592 | b.easing = 'easeNone'; |
---|
593 | b.block = true; |
---|
594 | b.opacity = 0; |
---|
595 | this.proxy.shift(b); |
---|
596 | }, |
---|
597 | |
---|
598 | // private |
---|
599 | onWindowResize : function(){ |
---|
600 | if(this.maximized){ |
---|
601 | this.fitContainer(); |
---|
602 | } |
---|
603 | if(this.modal){ |
---|
604 | this.mask.setSize('100%', '100%'); |
---|
605 | var force = this.mask.dom.offsetHeight; |
---|
606 | this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); |
---|
607 | } |
---|
608 | this.doConstrain(); |
---|
609 | }, |
---|
610 | |
---|
611 | // private |
---|
612 | doConstrain : function(){ |
---|
613 | if(this.constrain || this.constrainHeader){ |
---|
614 | var offsets; |
---|
615 | if(this.constrain){ |
---|
616 | offsets = { |
---|
617 | right:this.el.shadowOffset, |
---|
618 | left:this.el.shadowOffset, |
---|
619 | bottom:this.el.shadowOffset |
---|
620 | }; |
---|
621 | }else { |
---|
622 | var s = this.getSize(); |
---|
623 | offsets = { |
---|
624 | right:-(s.width - 100), |
---|
625 | bottom:-(s.height - 25) |
---|
626 | }; |
---|
627 | } |
---|
628 | |
---|
629 | var xy = this.el.getConstrainToXY(this.container, true, offsets); |
---|
630 | if(xy){ |
---|
631 | this.setPosition(xy[0], xy[1]); |
---|
632 | } |
---|
633 | } |
---|
634 | }, |
---|
635 | |
---|
636 | // private - used for dragging |
---|
637 | ghost : function(cls){ |
---|
638 | var ghost = this.createGhost(cls); |
---|
639 | var box = this.getBox(true); |
---|
640 | ghost.setLeftTop(box.x, box.y); |
---|
641 | ghost.setWidth(box.width); |
---|
642 | this.el.hide(); |
---|
643 | this.activeGhost = ghost; |
---|
644 | return ghost; |
---|
645 | }, |
---|
646 | |
---|
647 | // private |
---|
648 | unghost : function(show, matchPosition){ |
---|
649 | if(show !== false){ |
---|
650 | this.el.show(); |
---|
651 | this.focus(); |
---|
652 | if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug |
---|
653 | this.cascade(this.setAutoScroll); |
---|
654 | } |
---|
655 | } |
---|
656 | if(matchPosition !== false){ |
---|
657 | this.setPosition(this.activeGhost.getLeft(true), this.activeGhost.getTop(true)); |
---|
658 | } |
---|
659 | this.activeGhost.hide(); |
---|
660 | this.activeGhost.remove(); |
---|
661 | delete this.activeGhost; |
---|
662 | }, |
---|
663 | |
---|
664 | /** |
---|
665 | * Placeholder method for minimizing the window. By default, this method simply fires the {@link #minimize} event |
---|
666 | * since the behavior of minimizing a window is application-specific. To implement custom minimize behavior, |
---|
667 | * either the minimize event can be handled or this method can be overridden. |
---|
668 | */ |
---|
669 | minimize : function(){ |
---|
670 | this.fireEvent('minimize', this); |
---|
671 | }, |
---|
672 | |
---|
673 | /** |
---|
674 | * Closes the window, removes it from the DOM and destroys the window object. The beforeclose event is fired |
---|
675 | * before the close happens and will cancel the close action if it returns false. |
---|
676 | */ |
---|
677 | close : function(){ |
---|
678 | if(this.fireEvent("beforeclose", this) !== false){ |
---|
679 | this.hide(null, function(){ |
---|
680 | this.fireEvent('close', this); |
---|
681 | this.destroy(); |
---|
682 | }, this); |
---|
683 | } |
---|
684 | }, |
---|
685 | |
---|
686 | /** |
---|
687 | * Fits the window within its current container and automatically replaces the 'maximize' tool button with |
---|
688 | * the 'restore' tool button. |
---|
689 | */ |
---|
690 | maximize : function(){ |
---|
691 | if(!this.maximized){ |
---|
692 | this.expand(false); |
---|
693 | this.restoreSize = this.getSize(); |
---|
694 | this.restorePos = this.getPosition(true); |
---|
695 | if (this.maximizable){ |
---|
696 | this.tools.maximize.hide(); |
---|
697 | this.tools.restore.show(); |
---|
698 | } |
---|
699 | this.maximized = true; |
---|
700 | this.el.disableShadow(); |
---|
701 | |
---|
702 | if(this.dd){ |
---|
703 | this.dd.lock(); |
---|
704 | } |
---|
705 | if(this.collapsible){ |
---|
706 | this.tools.toggle.hide(); |
---|
707 | } |
---|
708 | this.el.addClass('x-window-maximized'); |
---|
709 | this.container.addClass('x-window-maximized-ct'); |
---|
710 | |
---|
711 | this.setPosition(0, 0); |
---|
712 | this.fitContainer(); |
---|
713 | this.fireEvent('maximize', this); |
---|
714 | } |
---|
715 | }, |
---|
716 | |
---|
717 | /** |
---|
718 | * Restores a maximized window back to its original size and position prior to being maximized and also replaces |
---|
719 | * the 'restore' tool button with the 'maximize' tool button. |
---|
720 | */ |
---|
721 | restore : function(){ |
---|
722 | if(this.maximized){ |
---|
723 | this.el.removeClass('x-window-maximized'); |
---|
724 | this.tools.restore.hide(); |
---|
725 | this.tools.maximize.show(); |
---|
726 | this.setPosition(this.restorePos[0], this.restorePos[1]); |
---|
727 | this.setSize(this.restoreSize.width, this.restoreSize.height); |
---|
728 | delete this.restorePos; |
---|
729 | delete this.restoreSize; |
---|
730 | this.maximized = false; |
---|
731 | this.el.enableShadow(true); |
---|
732 | |
---|
733 | if(this.dd){ |
---|
734 | this.dd.unlock(); |
---|
735 | } |
---|
736 | if(this.collapsible){ |
---|
737 | this.tools.toggle.show(); |
---|
738 | } |
---|
739 | this.container.removeClass('x-window-maximized-ct'); |
---|
740 | |
---|
741 | this.doConstrain(); |
---|
742 | this.fireEvent('restore', this); |
---|
743 | } |
---|
744 | }, |
---|
745 | |
---|
746 | /** |
---|
747 | * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized |
---|
748 | * state of the window. |
---|
749 | */ |
---|
750 | toggleMaximize : function(){ |
---|
751 | this[this.maximized ? 'restore' : 'maximize'](); |
---|
752 | }, |
---|
753 | |
---|
754 | // private |
---|
755 | fitContainer : function(){ |
---|
756 | var vs = this.container.getViewSize(); |
---|
757 | this.setSize(vs.width, vs.height); |
---|
758 | }, |
---|
759 | |
---|
760 | // private |
---|
761 | // z-index is managed by the WindowManager and may be overwritten at any time |
---|
762 | setZIndex : function(index){ |
---|
763 | if(this.modal){ |
---|
764 | this.mask.setStyle("z-index", index); |
---|
765 | } |
---|
766 | this.el.setZIndex(++index); |
---|
767 | index += 5; |
---|
768 | |
---|
769 | if(this.resizer){ |
---|
770 | this.resizer.proxy.setStyle("z-index", ++index); |
---|
771 | } |
---|
772 | |
---|
773 | this.lastZIndex = index; |
---|
774 | }, |
---|
775 | |
---|
776 | /** |
---|
777 | * Aligns the window to the specified element |
---|
778 | * @param {Mixed} element The element to align to. |
---|
779 | * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details). |
---|
780 | * @param {Array} offsets (optional) Offset the positioning by [x, y] |
---|
781 | * @return {Ext.Window} this |
---|
782 | */ |
---|
783 | alignTo : function(element, position, offsets){ |
---|
784 | var xy = this.el.getAlignToXY(element, position, offsets); |
---|
785 | this.setPagePosition(xy[0], xy[1]); |
---|
786 | return this; |
---|
787 | }, |
---|
788 | |
---|
789 | /** |
---|
790 | * Anchors this window to another element and realigns it when the window is resized or scrolled. |
---|
791 | * @param {Mixed} element The element to align to. |
---|
792 | * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details) |
---|
793 | * @param {Array} offsets (optional) Offset the positioning by [x, y] |
---|
794 | * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter |
---|
795 | * is a number, it is used as the buffer delay (defaults to 50ms). |
---|
796 | * @return {Ext.Window} this |
---|
797 | */ |
---|
798 | anchorTo : function(el, alignment, offsets, monitorScroll){ |
---|
799 | if(this.doAnchor){ |
---|
800 | Ext.EventManager.removeResizeListener(this.doAnchor, this); |
---|
801 | Ext.EventManager.un(window, 'scroll', this.doAnchor, this); |
---|
802 | } |
---|
803 | this.doAnchor = function(){ |
---|
804 | this.alignTo(el, alignment, offsets); |
---|
805 | }; |
---|
806 | Ext.EventManager.onWindowResize(this.doAnchor, this); |
---|
807 | |
---|
808 | var tm = typeof monitorScroll; |
---|
809 | if(tm != 'undefined'){ |
---|
810 | Ext.EventManager.on(window, 'scroll', this.doAnchor, this, |
---|
811 | {buffer: tm == 'number' ? monitorScroll : 50}); |
---|
812 | } |
---|
813 | this.doAnchor(); |
---|
814 | return this; |
---|
815 | }, |
---|
816 | |
---|
817 | /** |
---|
818 | * Brings this window to the front of any other visible windows |
---|
819 | * @return {Ext.Window} this |
---|
820 | */ |
---|
821 | toFront : function(e){ |
---|
822 | if(this.manager.bringToFront(this)){ |
---|
823 | if(!e || !e.getTarget().focus){ |
---|
824 | this.focus(); |
---|
825 | } |
---|
826 | } |
---|
827 | return this; |
---|
828 | }, |
---|
829 | |
---|
830 | /** |
---|
831 | * Makes this the active window by showing its shadow, or deactivates it by hiding its shadow. This method also |
---|
832 | * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred. |
---|
833 | * @param {Boolean} active True to activate the window, false to deactivate it (defaults to false) |
---|
834 | */ |
---|
835 | setActive : function(active){ |
---|
836 | if(active){ |
---|
837 | if(!this.maximized){ |
---|
838 | this.el.enableShadow(true); |
---|
839 | } |
---|
840 | this.fireEvent('activate', this); |
---|
841 | }else{ |
---|
842 | this.el.disableShadow(); |
---|
843 | this.fireEvent('deactivate', this); |
---|
844 | } |
---|
845 | }, |
---|
846 | |
---|
847 | /** |
---|
848 | * Sends this window to the back of (lower z-index than) any other visible windows |
---|
849 | * @return {Ext.Window} this |
---|
850 | */ |
---|
851 | toBack : function(){ |
---|
852 | this.manager.sendToBack(this); |
---|
853 | return this; |
---|
854 | }, |
---|
855 | |
---|
856 | /** |
---|
857 | * Centers this window in the viewport |
---|
858 | * @return {Ext.Window} this |
---|
859 | */ |
---|
860 | center : function(){ |
---|
861 | var xy = this.el.getAlignToXY(this.container, 'c-c'); |
---|
862 | this.setPagePosition(xy[0], xy[1]); |
---|
863 | return this; |
---|
864 | } |
---|
865 | |
---|
866 | /** |
---|
867 | * @cfg {Boolean} autoWidth @hide |
---|
868 | **/ |
---|
869 | }); |
---|
870 | Ext.reg('window', Ext.Window); |
---|
871 | |
---|
872 | // private - custom Window DD implementation |
---|
873 | Ext.Window.DD = function(win){ |
---|
874 | this.win = win; |
---|
875 | Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id); |
---|
876 | this.setHandleElId(win.header.id); |
---|
877 | this.scroll = false; |
---|
878 | }; |
---|
879 | |
---|
880 | Ext.extend(Ext.Window.DD, Ext.dd.DD, { |
---|
881 | moveOnly:true, |
---|
882 | headerOffsets:[100, 25], |
---|
883 | startDrag : function(){ |
---|
884 | var w = this.win; |
---|
885 | this.proxy = w.ghost(); |
---|
886 | if(w.constrain !== false){ |
---|
887 | var so = w.el.shadowOffset; |
---|
888 | this.constrainTo(w.container, {right: so, left: so, bottom: so}); |
---|
889 | }else if(w.constrainHeader !== false){ |
---|
890 | var s = this.proxy.getSize(); |
---|
891 | this.constrainTo(w.container, {right: -(s.width-this.headerOffsets[0]), bottom: -(s.height-this.headerOffsets[1])}); |
---|
892 | } |
---|
893 | }, |
---|
894 | b4Drag : Ext.emptyFn, |
---|
895 | |
---|
896 | onDrag : function(e){ |
---|
897 | this.alignElWithMouse(this.proxy, e.getPageX(), e.getPageY()); |
---|
898 | }, |
---|
899 | |
---|
900 | endDrag : function(e){ |
---|
901 | this.win.unghost(); |
---|
902 | this.win.saveState(); |
---|
903 | } |
---|
904 | }); |
---|