1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | /** |
---|
8 | * @class Ext.Window |
---|
9 | * @extends Ext.Panel |
---|
10 | * <p>A specialized panel intended for use as an application window. Windows are floated, {@link #resizable}, and |
---|
11 | * {@link #draggable} by default. Windows can be {@link #maximizable maximized} to fill the viewport, |
---|
12 | * restored to their prior size, and can be {@link #minimize}d.</p> |
---|
13 | * <p>Windows can also be linked to a {@link Ext.WindowGroup} or managed by the {@link Ext.WindowMgr} to provide |
---|
14 | * grouping, activation, to front, to back and other application-specific behavior.</p> |
---|
15 | * <p>By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element |
---|
16 | * specify {@link Ext.Component#renderTo renderTo}.</p> |
---|
17 | * <p><b>Note:</b> By default, the <code>{@link #closable close}</code> header tool <i>destroys</i> the Window resulting in |
---|
18 | * destruction of any child Components. This makes the Window object, and all its descendants <b>unusable</b>. To enable |
---|
19 | * re-use of a Window, use <b><code>{@link #closeAction closeAction: 'hide'}</code></b>.</p> |
---|
20 | * @constructor |
---|
21 | * @param {Object} config The config object |
---|
22 | * @xtype window |
---|
23 | */ |
---|
24 | Ext.Window = Ext.extend(Ext.Panel, { |
---|
25 | /** |
---|
26 | * @cfg {Number} x |
---|
27 | * The X position of the left edge of the window on initial showing. Defaults to centering the Window within |
---|
28 | * the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to). |
---|
29 | */ |
---|
30 | /** |
---|
31 | * @cfg {Number} y |
---|
32 | * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within |
---|
33 | * the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to). |
---|
34 | */ |
---|
35 | /** |
---|
36 | * @cfg {Boolean} modal |
---|
37 | * True to make the window modal and mask everything behind it when displayed, false to display it without |
---|
38 | * restricting access to other UI elements (defaults to false). |
---|
39 | */ |
---|
40 | /** |
---|
41 | * @cfg {String/Element} animateTarget |
---|
42 | * Id or element from which the window should animate while opening (defaults to null with no animation). |
---|
43 | */ |
---|
44 | /** |
---|
45 | * @cfg {String} resizeHandles |
---|
46 | * A valid {@link Ext.Resizable} handles config string (defaults to 'all'). Only applies when resizable = true. |
---|
47 | */ |
---|
48 | /** |
---|
49 | * @cfg {Ext.WindowGroup} manager |
---|
50 | * A reference to the WindowGroup that should manage this window (defaults to {@link Ext.WindowMgr}). |
---|
51 | */ |
---|
52 | /** |
---|
53 | * @cfg {String/Number/Button} defaultButton |
---|
54 | * The id / index of a button or a button instance to focus when this window received the focus. |
---|
55 | */ |
---|
56 | /** |
---|
57 | * @cfg {Function} onEsc |
---|
58 | * Allows override of the built-in processing for the escape key. Default action |
---|
59 | * is to close the Window (performing whatever action is specified in {@link #closeAction}. |
---|
60 | * To prevent the Window closing when the escape key is pressed, specify this as |
---|
61 | * Ext.emptyFn (See {@link Ext#emptyFn}). |
---|
62 | */ |
---|
63 | /** |
---|
64 | * @cfg {Boolean} collapsed |
---|
65 | * True to render the window collapsed, false to render it expanded (defaults to false). Note that if |
---|
66 | * {@link #expandOnShow} is true (the default) it will override the <tt>collapsed</tt> config and the window |
---|
67 | * will always be expanded when shown. |
---|
68 | */ |
---|
69 | /** |
---|
70 | * @cfg {Boolean} maximized |
---|
71 | * True to initially display the window in a maximized state. (Defaults to false). |
---|
72 | */ |
---|
73 | |
---|
74 | /** |
---|
75 | * @cfg {String} baseCls |
---|
76 | * The base CSS class to apply to this panel's element (defaults to 'x-window'). |
---|
77 | */ |
---|
78 | baseCls : 'x-window', |
---|
79 | /** |
---|
80 | * @cfg {Boolean} resizable |
---|
81 | * True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true). |
---|
82 | */ |
---|
83 | resizable : true, |
---|
84 | /** |
---|
85 | * @cfg {Boolean} draggable |
---|
86 | * True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true). Note |
---|
87 | * that by default the window will be centered in the viewport, so if dragging is disabled the window may need |
---|
88 | * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);). |
---|
89 | */ |
---|
90 | draggable : true, |
---|
91 | /** |
---|
92 | * @cfg {Boolean} closable |
---|
93 | * <p>True to display the 'close' tool button and allow the user to close the window, false to |
---|
94 | * hide the button and disallow closing the window (defaults to true).</p> |
---|
95 | * <p>By default, when close is requested by either clicking the close button in the header |
---|
96 | * or pressing ESC when the Window has focus, the {@link #close} method will be called. This |
---|
97 | * will <i>{@link Ext.Component#destroy destroy}</i> the Window and its content meaning that |
---|
98 | * it may not be reused.</p> |
---|
99 | * <p>To make closing a Window <i>hide</i> the Window so that it may be reused, set |
---|
100 | * {@link #closeAction} to 'hide'. |
---|
101 | */ |
---|
102 | closable : true, |
---|
103 | /** |
---|
104 | * @cfg {String} closeAction |
---|
105 | * <p>The action to take when the close header tool is clicked: |
---|
106 | * <div class="mdetail-params"><ul> |
---|
107 | * <li><b><code>'{@link #close}'</code></b> : <b>Default</b><div class="sub-desc"> |
---|
108 | * {@link #close remove} the window from the DOM and {@link Ext.Component#destroy destroy} |
---|
109 | * it and all descendant Components. The window will <b>not</b> be available to be |
---|
110 | * redisplayed via the {@link #show} method. |
---|
111 | * </div></li> |
---|
112 | * <li><b><code>'{@link #hide}'</code></b> : <div class="sub-desc"> |
---|
113 | * {@link #hide} the window by setting visibility to hidden and applying negative offsets. |
---|
114 | * The window will be available to be redisplayed via the {@link #show} method. |
---|
115 | * </div></li> |
---|
116 | * </ul></div> |
---|
117 | * <p><b>Note:</b> This setting does not affect the {@link #close} method |
---|
118 | * which will always {@link Ext.Component#destroy destroy} the window. To |
---|
119 | * programatically <i>hide</i> a window, call {@link #hide}.</p> |
---|
120 | */ |
---|
121 | closeAction : 'close', |
---|
122 | /** |
---|
123 | * @cfg {Boolean} constrain |
---|
124 | * True to constrain the window within its containing element, false to allow it to fall outside of its |
---|
125 | * containing element. By default the window will be rendered to document.body. To render and constrain the |
---|
126 | * window within another element specify {@link #renderTo}. |
---|
127 | * (defaults to false). Optionally the header only can be constrained using {@link #constrainHeader}. |
---|
128 | */ |
---|
129 | constrain : false, |
---|
130 | /** |
---|
131 | * @cfg {Boolean} constrainHeader |
---|
132 | * True to constrain the window header within its containing element (allowing the window body to fall outside |
---|
133 | * of its containing element) or false to allow the header to fall outside its containing element (defaults to |
---|
134 | * false). Optionally the entire window can be constrained using {@link #constrain}. |
---|
135 | */ |
---|
136 | constrainHeader : false, |
---|
137 | /** |
---|
138 | * @cfg {Boolean} plain |
---|
139 | * True to render the window body with a transparent background so that it will blend into the framing |
---|
140 | * elements, false to add a lighter background color to visually highlight the body element and separate it |
---|
141 | * more distinctly from the surrounding frame (defaults to false). |
---|
142 | */ |
---|
143 | plain : false, |
---|
144 | /** |
---|
145 | * @cfg {Boolean} minimizable |
---|
146 | * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button |
---|
147 | * and disallow minimizing the window (defaults to false). Note that this button provides no implementation -- |
---|
148 | * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a |
---|
149 | * custom minimize behavior implemented for this option to be useful. |
---|
150 | */ |
---|
151 | minimizable : false, |
---|
152 | /** |
---|
153 | * @cfg {Boolean} maximizable |
---|
154 | * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button |
---|
155 | * and disallow maximizing the window (defaults to false). Note that when a window is maximized, the tool button |
---|
156 | * will automatically change to a 'restore' button with the appropriate behavior already built-in that will |
---|
157 | * restore the window to its previous size. |
---|
158 | */ |
---|
159 | maximizable : false, |
---|
160 | /** |
---|
161 | * @cfg {Number} minHeight |
---|
162 | * The minimum height in pixels allowed for this window (defaults to 100). Only applies when resizable = true. |
---|
163 | */ |
---|
164 | minHeight : 100, |
---|
165 | /** |
---|
166 | * @cfg {Number} minWidth |
---|
167 | * The minimum width in pixels allowed for this window (defaults to 200). Only applies when resizable = true. |
---|
168 | */ |
---|
169 | minWidth : 200, |
---|
170 | /** |
---|
171 | * @cfg {Boolean} expandOnShow |
---|
172 | * True to always expand the window when it is displayed, false to keep it in its current state (which may be |
---|
173 | * {@link #collapsed}) when displayed (defaults to true). |
---|
174 | */ |
---|
175 | expandOnShow : true, |
---|
176 | |
---|
177 | // inherited docs, same default |
---|
178 | collapsible : false, |
---|
179 | |
---|
180 | /** |
---|
181 | * @cfg {Boolean} initHidden |
---|
182 | * True to hide the window until show() is explicitly called (defaults to true). |
---|
183 | */ |
---|
184 | initHidden : true, |
---|
185 | /** |
---|
186 | * @cfg {Boolean} monitorResize @hide |
---|
187 | * This is automatically managed based on the value of constrain and constrainToHeader |
---|
188 | */ |
---|
189 | monitorResize : true, |
---|
190 | |
---|
191 | // The following configs are set to provide the basic functionality of a window. |
---|
192 | // Changing them would require additional code to handle correctly and should |
---|
193 | // usually only be done in subclasses that can provide custom behavior. Changing them |
---|
194 | // may have unexpected or undesirable results. |
---|
195 | /** @cfg {String} elements @hide */ |
---|
196 | elements : 'header,body', |
---|
197 | /** @cfg {Boolean} frame @hide */ |
---|
198 | frame : true, |
---|
199 | /** @cfg {Boolean} floating @hide */ |
---|
200 | floating : true, |
---|
201 | |
---|
202 | // private |
---|
203 | initComponent : function(){ |
---|
204 | Ext.Window.superclass.initComponent.call(this); |
---|
205 | this.addEvents( |
---|
206 | /** |
---|
207 | * @event activate |
---|
208 | * Fires after the window has been visually activated via {@link setActive}. |
---|
209 | * @param {Ext.Window} this |
---|
210 | */ |
---|
211 | /** |
---|
212 | * @event deactivate |
---|
213 | * Fires after the window has been visually deactivated via {@link setActive}. |
---|
214 | * @param {Ext.Window} this |
---|
215 | */ |
---|
216 | /** |
---|
217 | * @event resize |
---|
218 | * Fires after the window has been resized. |
---|
219 | * @param {Ext.Window} this |
---|
220 | * @param {Number} width The window's new width |
---|
221 | * @param {Number} height The window's new height |
---|
222 | */ |
---|
223 | 'resize', |
---|
224 | /** |
---|
225 | * @event maximize |
---|
226 | * Fires after the window has been maximized. |
---|
227 | * @param {Ext.Window} this |
---|
228 | */ |
---|
229 | 'maximize', |
---|
230 | /** |
---|
231 | * @event minimize |
---|
232 | * Fires after the window has been minimized. |
---|
233 | * @param {Ext.Window} this |
---|
234 | */ |
---|
235 | 'minimize', |
---|
236 | /** |
---|
237 | * @event restore |
---|
238 | * Fires after the window has been restored to its original size after being maximized. |
---|
239 | * @param {Ext.Window} this |
---|
240 | */ |
---|
241 | 'restore' |
---|
242 | ); |
---|
243 | if(this.initHidden === false){ |
---|
244 | this.show(); |
---|
245 | }else{ |
---|
246 | this.hidden = true; |
---|
247 | } |
---|
248 | }, |
---|
249 | |
---|
250 | // private |
---|
251 | getState : function(){ |
---|
252 | return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox(true)); |
---|
253 | }, |
---|
254 | |
---|
255 | // private |
---|
256 | onRender : function(ct, position){ |
---|
257 | Ext.Window.superclass.onRender.call(this, ct, position); |
---|
258 | |
---|
259 | if(this.plain){ |
---|
260 | this.el.addClass('x-window-plain'); |
---|
261 | } |
---|
262 | |
---|
263 | // this element allows the Window to be focused for keyboard events |
---|
264 | this.focusEl = this.el.createChild({ |
---|
265 | tag: 'a', href:'#', cls:'x-dlg-focus', |
---|
266 | tabIndex:'-1', html: ' '}); |
---|
267 | this.focusEl.swallowEvent('click', true); |
---|
268 | |
---|
269 | this.proxy = this.el.createProxy('x-window-proxy'); |
---|
270 | this.proxy.enableDisplayMode('block'); |
---|
271 | |
---|
272 | if(this.modal){ |
---|
273 | this.mask = this.container.createChild({cls:'ext-el-mask'}, this.el.dom); |
---|
274 | this.mask.enableDisplayMode('block'); |
---|
275 | this.mask.hide(); |
---|
276 | this.mon(this.mask, 'click', this.focus, this); |
---|
277 | } |
---|
278 | this.initTools(); |
---|
279 | }, |
---|
280 | |
---|
281 | // private |
---|
282 | initEvents : function(){ |
---|
283 | Ext.Window.superclass.initEvents.call(this); |
---|
284 | if(this.animateTarget){ |
---|
285 | this.setAnimateTarget(this.animateTarget); |
---|
286 | } |
---|
287 | |
---|
288 | if(this.resizable){ |
---|
289 | this.resizer = new Ext.Resizable(this.el, { |
---|
290 | minWidth: this.minWidth, |
---|
291 | minHeight:this.minHeight, |
---|
292 | handles: this.resizeHandles || 'all', |
---|
293 | pinned: true, |
---|
294 | resizeElement : this.resizerAction |
---|
295 | }); |
---|
296 | this.resizer.window = this; |
---|
297 | this.mon(this.resizer, 'beforeresize', this.beforeResize, this); |
---|
298 | } |
---|
299 | |
---|
300 | if(this.draggable){ |
---|
301 | this.header.addClass('x-window-draggable'); |
---|
302 | } |
---|
303 | this.mon(this.el, 'mousedown', this.toFront, this); |
---|
304 | this.manager = this.manager || Ext.WindowMgr; |
---|
305 | this.manager.register(this); |
---|
306 | if(this.maximized){ |
---|
307 | this.maximized = false; |
---|
308 | this.maximize(); |
---|
309 | } |
---|
310 | if(this.closable){ |
---|
311 | var km = this.getKeyMap(); |
---|
312 | km.on(27, this.onEsc, this); |
---|
313 | km.disable(); |
---|
314 | } |
---|
315 | }, |
---|
316 | |
---|
317 | initDraggable : function(){ |
---|
318 | /** |
---|
319 | * If this Window is configured {@link #draggable}, this property will contain |
---|
320 | * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element. |
---|
321 | * @type Ext.dd.DD |
---|
322 | * @property dd |
---|
323 | */ |
---|
324 | this.dd = new Ext.Window.DD(this); |
---|
325 | }, |
---|
326 | |
---|
327 | // private |
---|
328 | onEsc : function(){ |
---|
329 | this[this.closeAction](); |
---|
330 | }, |
---|
331 | |
---|
332 | // private |
---|
333 | beforeDestroy : function(){ |
---|
334 | if (this.rendered){ |
---|
335 | this.hide(); |
---|
336 | if(this.doAnchor){ |
---|
337 | Ext.EventManager.removeResizeListener(this.doAnchor, this); |
---|
338 | Ext.EventManager.un(window, 'scroll', this.doAnchor, this); |
---|
339 | } |
---|
340 | Ext.destroy( |
---|
341 | this.focusEl, |
---|
342 | this.resizer, |
---|
343 | this.dd, |
---|
344 | this.proxy, |
---|
345 | this.mask |
---|
346 | ); |
---|
347 | } |
---|
348 | Ext.Window.superclass.beforeDestroy.call(this); |
---|
349 | }, |
---|
350 | |
---|
351 | // private |
---|
352 | onDestroy : function(){ |
---|
353 | if(this.manager){ |
---|
354 | this.manager.unregister(this); |
---|
355 | } |
---|
356 | Ext.Window.superclass.onDestroy.call(this); |
---|
357 | }, |
---|
358 | |
---|
359 | // private |
---|
360 | initTools : function(){ |
---|
361 | if(this.minimizable){ |
---|
362 | this.addTool({ |
---|
363 | id: 'minimize', |
---|
364 | handler: this.minimize.createDelegate(this, []) |
---|
365 | }); |
---|
366 | } |
---|
367 | if(this.maximizable){ |
---|
368 | this.addTool({ |
---|
369 | id: 'maximize', |
---|
370 | handler: this.maximize.createDelegate(this, []) |
---|
371 | }); |
---|
372 | this.addTool({ |
---|
373 | id: 'restore', |
---|
374 | handler: this.restore.createDelegate(this, []), |
---|
375 | hidden:true |
---|
376 | }); |
---|
377 | this.mon(this.header, 'dblclick', this.toggleMaximize, this); |
---|
378 | } |
---|
379 | if(this.closable){ |
---|
380 | this.addTool({ |
---|
381 | id: 'close', |
---|
382 | handler: this[this.closeAction].createDelegate(this, []) |
---|
383 | }); |
---|
384 | } |
---|
385 | }, |
---|
386 | |
---|
387 | // private |
---|
388 | resizerAction : function(){ |
---|
389 | var box = this.proxy.getBox(); |
---|
390 | this.proxy.hide(); |
---|
391 | this.window.handleResize(box); |
---|
392 | return box; |
---|
393 | }, |
---|
394 | |
---|
395 | // private |
---|
396 | beforeResize : function(){ |
---|
397 | this.resizer.minHeight = Math.max(this.minHeight, this.getFrameHeight() + 40); // 40 is a magic minimum content size? |
---|
398 | this.resizer.minWidth = Math.max(this.minWidth, this.getFrameWidth() + 40); |
---|
399 | this.resizeBox = this.el.getBox(); |
---|
400 | }, |
---|
401 | |
---|
402 | // private |
---|
403 | updateHandles : function(){ |
---|
404 | if(Ext.isIE && this.resizer){ |
---|
405 | this.resizer.syncHandleHeight(); |
---|
406 | this.el.repaint(); |
---|
407 | } |
---|
408 | }, |
---|
409 | |
---|
410 | // private |
---|
411 | handleResize : function(box){ |
---|
412 | var rz = this.resizeBox; |
---|
413 | if(rz.x != box.x || rz.y != box.y){ |
---|
414 | this.updateBox(box); |
---|
415 | }else{ |
---|
416 | this.setSize(box); |
---|
417 | } |
---|
418 | this.focus(); |
---|
419 | this.updateHandles(); |
---|
420 | this.saveState(); |
---|
421 | this.doLayout(); |
---|
422 | this.fireEvent('resize', this, box.width, box.height); |
---|
423 | }, |
---|
424 | |
---|
425 | /** |
---|
426 | * Focuses the window. If a defaultButton is set, it will receive focus, otherwise the |
---|
427 | * window itself will receive focus. |
---|
428 | */ |
---|
429 | focus : function(){ |
---|
430 | var f = this.focusEl, db = this.defaultButton, t = typeof db; |
---|
431 | if(t != 'undefined'){ |
---|
432 | if(t == 'number' && this.fbar){ |
---|
433 | f = this.fbar.items.get(db); |
---|
434 | }else if(t == 'string'){ |
---|
435 | f = Ext.getCmp(db); |
---|
436 | }else{ |
---|
437 | f = db; |
---|
438 | } |
---|
439 | } |
---|
440 | f = f || this.focusEl; |
---|
441 | f.focus.defer(10, f); |
---|
442 | }, |
---|
443 | |
---|
444 | /** |
---|
445 | * Sets the target element from which the window should animate while opening. |
---|
446 | * @param {String/Element} el The target element or id |
---|
447 | */ |
---|
448 | setAnimateTarget : function(el){ |
---|
449 | el = Ext.get(el); |
---|
450 | this.animateTarget = el; |
---|
451 | }, |
---|
452 | |
---|
453 | // private |
---|
454 | beforeShow : function(){ |
---|
455 | delete this.el.lastXY; |
---|
456 | delete this.el.lastLT; |
---|
457 | if(this.x === undefined || this.y === undefined){ |
---|
458 | var xy = this.el.getAlignToXY(this.container, 'c-c'); |
---|
459 | var pos = this.el.translatePoints(xy[0], xy[1]); |
---|
460 | this.x = this.x === undefined? pos.left : this.x; |
---|
461 | this.y = this.y === undefined? pos.top : this.y; |
---|
462 | } |
---|
463 | this.el.setLeftTop(this.x, this.y); |
---|
464 | |
---|
465 | if(this.expandOnShow){ |
---|
466 | this.expand(false); |
---|
467 | } |
---|
468 | |
---|
469 | if(this.modal){ |
---|
470 | Ext.getBody().addClass('x-body-masked'); |
---|
471 | this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); |
---|
472 | this.mask.show(); |
---|
473 | } |
---|
474 | }, |
---|
475 | |
---|
476 | /** |
---|
477 | * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden. |
---|
478 | * @param {String/Element} animateTarget (optional) The target element or id from which the window should |
---|
479 | * animate while opening (defaults to null with no animation) |
---|
480 | * @param {Function} callback (optional) A callback function to call after the window is displayed |
---|
481 | * @param {Object} scope (optional) The scope in which to execute the callback |
---|
482 | * @return {Ext.Window} this |
---|
483 | */ |
---|
484 | show : function(animateTarget, cb, scope){ |
---|
485 | if(!this.rendered){ |
---|
486 | this.render(Ext.getBody()); |
---|
487 | } |
---|
488 | if(this.hidden === false){ |
---|
489 | this.toFront(); |
---|
490 | return this; |
---|
491 | } |
---|
492 | if(this.fireEvent('beforeshow', this) === false){ |
---|
493 | return this; |
---|
494 | } |
---|
495 | if(cb){ |
---|
496 | this.on('show', cb, scope, {single:true}); |
---|
497 | } |
---|
498 | this.hidden = false; |
---|
499 | if(animateTarget !== undefined){ |
---|
500 | this.setAnimateTarget(animateTarget); |
---|
501 | } |
---|
502 | this.beforeShow(); |
---|
503 | if(this.animateTarget){ |
---|
504 | this.animShow(); |
---|
505 | }else{ |
---|
506 | this.afterShow(); |
---|
507 | } |
---|
508 | return this; |
---|
509 | }, |
---|
510 | |
---|
511 | // private |
---|
512 | afterShow : function(isAnim){ |
---|
513 | this.proxy.hide(); |
---|
514 | this.el.setStyle('display', 'block'); |
---|
515 | this.el.show(); |
---|
516 | if(this.maximized){ |
---|
517 | this.fitContainer(); |
---|
518 | } |
---|
519 | if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug |
---|
520 | this.cascade(this.setAutoScroll); |
---|
521 | } |
---|
522 | |
---|
523 | if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){ |
---|
524 | Ext.EventManager.onWindowResize(this.onWindowResize, this); |
---|
525 | } |
---|
526 | this.doConstrain(); |
---|
527 | this.doLayout(); |
---|
528 | if(this.keyMap){ |
---|
529 | this.keyMap.enable(); |
---|
530 | } |
---|
531 | this.toFront(); |
---|
532 | this.updateHandles(); |
---|
533 | if(isAnim && (Ext.isIE || Ext.isWebKit)){ |
---|
534 | var sz = this.getSize(); |
---|
535 | this.onResize(sz.width, sz.height); |
---|
536 | } |
---|
537 | this.fireEvent('show', this); |
---|
538 | }, |
---|
539 | |
---|
540 | // private |
---|
541 | animShow : function(){ |
---|
542 | this.proxy.show(); |
---|
543 | this.proxy.setBox(this.animateTarget.getBox()); |
---|
544 | this.proxy.setOpacity(0); |
---|
545 | var b = this.getBox(false); |
---|
546 | b.callback = this.afterShow.createDelegate(this, [true], false); |
---|
547 | b.scope = this; |
---|
548 | b.duration = 0.25; |
---|
549 | b.easing = 'easeNone'; |
---|
550 | b.opacity = 0.5; |
---|
551 | b.block = true; |
---|
552 | this.el.setStyle('display', 'none'); |
---|
553 | this.proxy.shift(b); |
---|
554 | }, |
---|
555 | |
---|
556 | /** |
---|
557 | * Hides the window, setting it to invisible and applying negative offsets. |
---|
558 | * @param {String/Element} animateTarget (optional) The target element or id to which the window should |
---|
559 | * animate while hiding (defaults to null with no animation) |
---|
560 | * @param {Function} callback (optional) A callback function to call after the window is hidden |
---|
561 | * @param {Object} scope (optional) The scope in which to execute the callback |
---|
562 | * @return {Ext.Window} this |
---|
563 | */ |
---|
564 | hide : function(animateTarget, cb, scope){ |
---|
565 | if(this.hidden || this.fireEvent('beforehide', this) === false){ |
---|
566 | return this; |
---|
567 | } |
---|
568 | if(cb){ |
---|
569 | this.on('hide', cb, scope, {single:true}); |
---|
570 | } |
---|
571 | this.hidden = true; |
---|
572 | if(animateTarget !== undefined){ |
---|
573 | this.setAnimateTarget(animateTarget); |
---|
574 | } |
---|
575 | if(this.modal){ |
---|
576 | this.mask.hide(); |
---|
577 | Ext.getBody().removeClass('x-body-masked'); |
---|
578 | } |
---|
579 | if(this.animateTarget){ |
---|
580 | this.animHide(); |
---|
581 | }else{ |
---|
582 | this.el.hide(); |
---|
583 | this.afterHide(); |
---|
584 | } |
---|
585 | return this; |
---|
586 | }, |
---|
587 | |
---|
588 | // private |
---|
589 | afterHide : function(){ |
---|
590 | this.proxy.hide(); |
---|
591 | if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){ |
---|
592 | Ext.EventManager.removeResizeListener(this.onWindowResize, this); |
---|
593 | } |
---|
594 | if(this.keyMap){ |
---|
595 | this.keyMap.disable(); |
---|
596 | } |
---|
597 | this.fireEvent('hide', this); |
---|
598 | }, |
---|
599 | |
---|
600 | // private |
---|
601 | animHide : function(){ |
---|
602 | this.proxy.setOpacity(0.5); |
---|
603 | this.proxy.show(); |
---|
604 | var tb = this.getBox(false); |
---|
605 | this.proxy.setBox(tb); |
---|
606 | this.el.hide(); |
---|
607 | var b = this.animateTarget.getBox(); |
---|
608 | b.callback = this.afterHide; |
---|
609 | b.scope = this; |
---|
610 | b.duration = 0.25; |
---|
611 | b.easing = 'easeNone'; |
---|
612 | b.block = true; |
---|
613 | b.opacity = 0; |
---|
614 | this.proxy.shift(b); |
---|
615 | }, |
---|
616 | |
---|
617 | // private |
---|
618 | onWindowResize : function(){ |
---|
619 | if(this.maximized){ |
---|
620 | this.fitContainer(); |
---|
621 | } |
---|
622 | if(this.modal){ |
---|
623 | this.mask.setSize('100%', '100%'); |
---|
624 | var force = this.mask.dom.offsetHeight; |
---|
625 | this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); |
---|
626 | } |
---|
627 | this.doConstrain(); |
---|
628 | }, |
---|
629 | |
---|
630 | // private |
---|
631 | doConstrain : function(){ |
---|
632 | if(this.constrain || this.constrainHeader){ |
---|
633 | var offsets; |
---|
634 | if(this.constrain){ |
---|
635 | offsets = { |
---|
636 | right:this.el.shadowOffset, |
---|
637 | left:this.el.shadowOffset, |
---|
638 | bottom:this.el.shadowOffset |
---|
639 | }; |
---|
640 | }else { |
---|
641 | var s = this.getSize(); |
---|
642 | offsets = { |
---|
643 | right:-(s.width - 100), |
---|
644 | bottom:-(s.height - 25) |
---|
645 | }; |
---|
646 | } |
---|
647 | |
---|
648 | var xy = this.el.getConstrainToXY(this.container, true, offsets); |
---|
649 | if(xy){ |
---|
650 | this.setPosition(xy[0], xy[1]); |
---|
651 | } |
---|
652 | } |
---|
653 | }, |
---|
654 | |
---|
655 | // private - used for dragging |
---|
656 | ghost : function(cls){ |
---|
657 | var ghost = this.createGhost(cls); |
---|
658 | var box = this.getBox(true); |
---|
659 | ghost.setLeftTop(box.x, box.y); |
---|
660 | ghost.setWidth(box.width); |
---|
661 | this.el.hide(); |
---|
662 | this.activeGhost = ghost; |
---|
663 | return ghost; |
---|
664 | }, |
---|
665 | |
---|
666 | // private |
---|
667 | unghost : function(show, matchPosition){ |
---|
668 | if(!this.activeGhost) { |
---|
669 | return; |
---|
670 | } |
---|
671 | if(show !== false){ |
---|
672 | this.el.show(); |
---|
673 | this.focus(); |
---|
674 | if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug |
---|
675 | this.cascade(this.setAutoScroll); |
---|
676 | } |
---|
677 | } |
---|
678 | if(matchPosition !== false){ |
---|
679 | this.setPosition(this.activeGhost.getLeft(true), this.activeGhost.getTop(true)); |
---|
680 | } |
---|
681 | this.activeGhost.hide(); |
---|
682 | this.activeGhost.remove(); |
---|
683 | delete this.activeGhost; |
---|
684 | }, |
---|
685 | |
---|
686 | /** |
---|
687 | * Placeholder method for minimizing the window. By default, this method simply fires the {@link #minimize} event |
---|
688 | * since the behavior of minimizing a window is application-specific. To implement custom minimize behavior, |
---|
689 | * either the minimize event can be handled or this method can be overridden. |
---|
690 | * @return {Ext.Window} this |
---|
691 | */ |
---|
692 | minimize : function(){ |
---|
693 | this.fireEvent('minimize', this); |
---|
694 | return this; |
---|
695 | }, |
---|
696 | |
---|
697 | /** |
---|
698 | * <p>Closes the Window, removes it from the DOM, {@link Ext.Component#destroy destroy}s |
---|
699 | * the Window object and all its descendant Components. The {@link Ext.Panel#beforeclose beforeclose} |
---|
700 | * event is fired before the close happens and will cancel the close action if it returns false.<p> |
---|
701 | * <p><b>Note:</b> This method is not affected by the {@link #closeAction} setting which |
---|
702 | * only affects the action triggered when clicking the {@link #closable 'close' tool in the header}. |
---|
703 | * To hide the Window without destroying it, call {@link #hide}.</p> |
---|
704 | */ |
---|
705 | close : function(){ |
---|
706 | if(this.fireEvent('beforeclose', this) !== false){ |
---|
707 | this.hide(null, function(){ |
---|
708 | this.fireEvent('close', this); |
---|
709 | this.destroy(); |
---|
710 | }, this); |
---|
711 | } |
---|
712 | }, |
---|
713 | |
---|
714 | /** |
---|
715 | * Fits the window within its current container and automatically replaces |
---|
716 | * the {@link #maximizable 'maximize' tool button} with the 'restore' tool button. |
---|
717 | * Also see {@link #toggleMaximize}. |
---|
718 | * @return {Ext.Window} this |
---|
719 | */ |
---|
720 | maximize : function(){ |
---|
721 | if(!this.maximized){ |
---|
722 | this.expand(false); |
---|
723 | this.restoreSize = this.getSize(); |
---|
724 | this.restorePos = this.getPosition(true); |
---|
725 | if (this.maximizable){ |
---|
726 | this.tools.maximize.hide(); |
---|
727 | this.tools.restore.show(); |
---|
728 | } |
---|
729 | this.maximized = true; |
---|
730 | this.el.disableShadow(); |
---|
731 | |
---|
732 | if(this.dd){ |
---|
733 | this.dd.lock(); |
---|
734 | } |
---|
735 | if(this.collapsible){ |
---|
736 | this.tools.toggle.hide(); |
---|
737 | } |
---|
738 | this.el.addClass('x-window-maximized'); |
---|
739 | this.container.addClass('x-window-maximized-ct'); |
---|
740 | |
---|
741 | this.setPosition(0, 0); |
---|
742 | this.fitContainer(); |
---|
743 | this.fireEvent('maximize', this); |
---|
744 | } |
---|
745 | return this; |
---|
746 | }, |
---|
747 | |
---|
748 | /** |
---|
749 | * Restores a {@link #maximizable maximized} window back to its original |
---|
750 | * size and position prior to being maximized and also replaces |
---|
751 | * the 'restore' tool button with the 'maximize' tool button. |
---|
752 | * Also see {@link #toggleMaximize}. |
---|
753 | * @return {Ext.Window} this |
---|
754 | */ |
---|
755 | restore : function(){ |
---|
756 | if(this.maximized){ |
---|
757 | this.el.removeClass('x-window-maximized'); |
---|
758 | this.tools.restore.hide(); |
---|
759 | this.tools.maximize.show(); |
---|
760 | this.setPosition(this.restorePos[0], this.restorePos[1]); |
---|
761 | this.setSize(this.restoreSize.width, this.restoreSize.height); |
---|
762 | delete this.restorePos; |
---|
763 | delete this.restoreSize; |
---|
764 | this.maximized = false; |
---|
765 | this.el.enableShadow(true); |
---|
766 | |
---|
767 | if(this.dd){ |
---|
768 | this.dd.unlock(); |
---|
769 | } |
---|
770 | if(this.collapsible){ |
---|
771 | this.tools.toggle.show(); |
---|
772 | } |
---|
773 | this.container.removeClass('x-window-maximized-ct'); |
---|
774 | |
---|
775 | this.doConstrain(); |
---|
776 | this.fireEvent('restore', this); |
---|
777 | } |
---|
778 | return this; |
---|
779 | }, |
---|
780 | |
---|
781 | /** |
---|
782 | * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized |
---|
783 | * state of the window. |
---|
784 | * @return {Ext.Window} this |
---|
785 | */ |
---|
786 | toggleMaximize : function(){ |
---|
787 | return this[this.maximized ? 'restore' : 'maximize'](); |
---|
788 | }, |
---|
789 | |
---|
790 | // private |
---|
791 | fitContainer : function(){ |
---|
792 | var vs = this.container.getViewSize(); |
---|
793 | this.setSize(vs.width, vs.height); |
---|
794 | }, |
---|
795 | |
---|
796 | // private |
---|
797 | // z-index is managed by the WindowManager and may be overwritten at any time |
---|
798 | setZIndex : function(index){ |
---|
799 | if(this.modal){ |
---|
800 | this.mask.setStyle('z-index', index); |
---|
801 | } |
---|
802 | this.el.setZIndex(++index); |
---|
803 | index += 5; |
---|
804 | |
---|
805 | if(this.resizer){ |
---|
806 | this.resizer.proxy.setStyle('z-index', ++index); |
---|
807 | } |
---|
808 | |
---|
809 | this.lastZIndex = index; |
---|
810 | }, |
---|
811 | |
---|
812 | /** |
---|
813 | * Aligns the window to the specified element |
---|
814 | * @param {Mixed} element The element to align to. |
---|
815 | * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details). |
---|
816 | * @param {Array} offsets (optional) Offset the positioning by [x, y] |
---|
817 | * @return {Ext.Window} this |
---|
818 | */ |
---|
819 | alignTo : function(element, position, offsets){ |
---|
820 | var xy = this.el.getAlignToXY(element, position, offsets); |
---|
821 | this.setPagePosition(xy[0], xy[1]); |
---|
822 | return this; |
---|
823 | }, |
---|
824 | |
---|
825 | /** |
---|
826 | * Anchors this window to another element and realigns it when the window is resized or scrolled. |
---|
827 | * @param {Mixed} element The element to align to. |
---|
828 | * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details) |
---|
829 | * @param {Array} offsets (optional) Offset the positioning by [x, y] |
---|
830 | * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter |
---|
831 | * is a number, it is used as the buffer delay (defaults to 50ms). |
---|
832 | * @return {Ext.Window} this |
---|
833 | */ |
---|
834 | anchorTo : function(el, alignment, offsets, monitorScroll){ |
---|
835 | if(this.doAnchor){ |
---|
836 | Ext.EventManager.removeResizeListener(this.doAnchor, this); |
---|
837 | Ext.EventManager.un(window, 'scroll', this.doAnchor, this); |
---|
838 | } |
---|
839 | this.doAnchor = function(){ |
---|
840 | this.alignTo(el, alignment, offsets); |
---|
841 | }; |
---|
842 | Ext.EventManager.onWindowResize(this.doAnchor, this); |
---|
843 | |
---|
844 | var tm = typeof monitorScroll; |
---|
845 | if(tm != 'undefined'){ |
---|
846 | Ext.EventManager.on(window, 'scroll', this.doAnchor, this, |
---|
847 | {buffer: tm == 'number' ? monitorScroll : 50}); |
---|
848 | } |
---|
849 | this.doAnchor(); |
---|
850 | return this; |
---|
851 | }, |
---|
852 | |
---|
853 | /** |
---|
854 | * Brings this window to the front of any other visible windows |
---|
855 | * @param {Boolean} e (optional) Specify <tt>false</tt> to prevent the window from being focused. |
---|
856 | * @return {Ext.Window} this |
---|
857 | */ |
---|
858 | toFront : function(e){ |
---|
859 | if(this.manager.bringToFront(this)){ |
---|
860 | if(!e || !e.getTarget().focus){ |
---|
861 | this.focus(); |
---|
862 | } |
---|
863 | } |
---|
864 | return this; |
---|
865 | }, |
---|
866 | |
---|
867 | /** |
---|
868 | * Makes this the active window by showing its shadow, or deactivates it by hiding its shadow. This method also |
---|
869 | * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred. |
---|
870 | * @param {Boolean} active True to activate the window, false to deactivate it (defaults to false) |
---|
871 | */ |
---|
872 | setActive : function(active){ |
---|
873 | if(active){ |
---|
874 | if(!this.maximized){ |
---|
875 | this.el.enableShadow(true); |
---|
876 | } |
---|
877 | this.fireEvent('activate', this); |
---|
878 | }else{ |
---|
879 | this.el.disableShadow(); |
---|
880 | this.fireEvent('deactivate', this); |
---|
881 | } |
---|
882 | }, |
---|
883 | |
---|
884 | /** |
---|
885 | * Sends this window to the back of (lower z-index than) any other visible windows |
---|
886 | * @return {Ext.Window} this |
---|
887 | */ |
---|
888 | toBack : function(){ |
---|
889 | this.manager.sendToBack(this); |
---|
890 | return this; |
---|
891 | }, |
---|
892 | |
---|
893 | /** |
---|
894 | * Centers this window in the viewport |
---|
895 | * @return {Ext.Window} this |
---|
896 | */ |
---|
897 | center : function(){ |
---|
898 | var xy = this.el.getAlignToXY(this.container, 'c-c'); |
---|
899 | this.setPagePosition(xy[0], xy[1]); |
---|
900 | return this; |
---|
901 | } |
---|
902 | |
---|
903 | /** |
---|
904 | * @cfg {Boolean} autoWidth @hide |
---|
905 | **/ |
---|
906 | }); |
---|
907 | Ext.reg('window', Ext.Window); |
---|
908 | |
---|
909 | // private - custom Window DD implementation |
---|
910 | Ext.Window.DD = function(win){ |
---|
911 | this.win = win; |
---|
912 | Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id); |
---|
913 | this.setHandleElId(win.header.id); |
---|
914 | this.scroll = false; |
---|
915 | }; |
---|
916 | |
---|
917 | Ext.extend(Ext.Window.DD, Ext.dd.DD, { |
---|
918 | moveOnly:true, |
---|
919 | headerOffsets:[100, 25], |
---|
920 | startDrag : function(){ |
---|
921 | var w = this.win; |
---|
922 | this.proxy = w.ghost(); |
---|
923 | if(w.constrain !== false){ |
---|
924 | var so = w.el.shadowOffset; |
---|
925 | this.constrainTo(w.container, {right: so, left: so, bottom: so}); |
---|
926 | }else if(w.constrainHeader !== false){ |
---|
927 | var s = this.proxy.getSize(); |
---|
928 | this.constrainTo(w.container, {right: -(s.width-this.headerOffsets[0]), bottom: -(s.height-this.headerOffsets[1])}); |
---|
929 | } |
---|
930 | }, |
---|
931 | b4Drag : Ext.emptyFn, |
---|
932 | |
---|
933 | onDrag : function(e){ |
---|
934 | this.alignElWithMouse(this.proxy, e.getPageX(), e.getPageY()); |
---|
935 | }, |
---|
936 | |
---|
937 | endDrag : function(e){ |
---|
938 | this.win.unghost(); |
---|
939 | this.win.saveState(); |
---|
940 | } |
---|
941 | }); |
---|
942 | /** |
---|
943 | * @class Ext.WindowGroup |
---|
944 | * An object that represents a group of {@link Ext.Window} instances and provides z-order management |
---|
945 | * and window activation behavior. |
---|
946 | * @constructor |
---|
947 | */ |
---|
948 | Ext.WindowGroup = function(){ |
---|
949 | var list = {}; |
---|
950 | var accessList = []; |
---|
951 | var front = null; |
---|
952 | |
---|
953 | // private |
---|
954 | var sortWindows = function(d1, d2){ |
---|
955 | return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1; |
---|
956 | }; |
---|
957 | |
---|
958 | // private |
---|
959 | var orderWindows = function(){ |
---|
960 | var a = accessList, len = a.length; |
---|
961 | if(len > 0){ |
---|
962 | a.sort(sortWindows); |
---|
963 | var seed = a[0].manager.zseed; |
---|
964 | for(var i = 0; i < len; i++){ |
---|
965 | var win = a[i]; |
---|
966 | if(win && !win.hidden){ |
---|
967 | win.setZIndex(seed + (i*10)); |
---|
968 | } |
---|
969 | } |
---|
970 | } |
---|
971 | activateLast(); |
---|
972 | }; |
---|
973 | |
---|
974 | // private |
---|
975 | var setActiveWin = function(win){ |
---|
976 | if(win != front){ |
---|
977 | if(front){ |
---|
978 | front.setActive(false); |
---|
979 | } |
---|
980 | front = win; |
---|
981 | if(win){ |
---|
982 | win.setActive(true); |
---|
983 | } |
---|
984 | } |
---|
985 | }; |
---|
986 | |
---|
987 | // private |
---|
988 | var activateLast = function(){ |
---|
989 | for(var i = accessList.length-1; i >=0; --i) { |
---|
990 | if(!accessList[i].hidden){ |
---|
991 | setActiveWin(accessList[i]); |
---|
992 | return; |
---|
993 | } |
---|
994 | } |
---|
995 | // none to activate |
---|
996 | setActiveWin(null); |
---|
997 | }; |
---|
998 | |
---|
999 | return { |
---|
1000 | /** |
---|
1001 | * The starting z-index for windows (defaults to 9000) |
---|
1002 | * @type Number The z-index value |
---|
1003 | */ |
---|
1004 | zseed : 9000, |
---|
1005 | |
---|
1006 | // private |
---|
1007 | register : function(win){ |
---|
1008 | list[win.id] = win; |
---|
1009 | accessList.push(win); |
---|
1010 | win.on('hide', activateLast); |
---|
1011 | }, |
---|
1012 | |
---|
1013 | // private |
---|
1014 | unregister : function(win){ |
---|
1015 | delete list[win.id]; |
---|
1016 | win.un('hide', activateLast); |
---|
1017 | accessList.remove(win); |
---|
1018 | }, |
---|
1019 | |
---|
1020 | /** |
---|
1021 | * Gets a registered window by id. |
---|
1022 | * @param {String/Object} id The id of the window or a {@link Ext.Window} instance |
---|
1023 | * @return {Ext.Window} |
---|
1024 | */ |
---|
1025 | get : function(id){ |
---|
1026 | return typeof id == "object" ? id : list[id]; |
---|
1027 | }, |
---|
1028 | |
---|
1029 | /** |
---|
1030 | * Brings the specified window to the front of any other active windows. |
---|
1031 | * @param {String/Object} win The id of the window or a {@link Ext.Window} instance |
---|
1032 | * @return {Boolean} True if the dialog was brought to the front, else false |
---|
1033 | * if it was already in front |
---|
1034 | */ |
---|
1035 | bringToFront : function(win){ |
---|
1036 | win = this.get(win); |
---|
1037 | if(win != front){ |
---|
1038 | win._lastAccess = new Date().getTime(); |
---|
1039 | orderWindows(); |
---|
1040 | return true; |
---|
1041 | } |
---|
1042 | return false; |
---|
1043 | }, |
---|
1044 | |
---|
1045 | /** |
---|
1046 | * Sends the specified window to the back of other active windows. |
---|
1047 | * @param {String/Object} win The id of the window or a {@link Ext.Window} instance |
---|
1048 | * @return {Ext.Window} The window |
---|
1049 | */ |
---|
1050 | sendToBack : function(win){ |
---|
1051 | win = this.get(win); |
---|
1052 | win._lastAccess = -(new Date().getTime()); |
---|
1053 | orderWindows(); |
---|
1054 | return win; |
---|
1055 | }, |
---|
1056 | |
---|
1057 | /** |
---|
1058 | * Hides all windows in the group. |
---|
1059 | */ |
---|
1060 | hideAll : function(){ |
---|
1061 | for(var id in list){ |
---|
1062 | if(list[id] && typeof list[id] != "function" && list[id].isVisible()){ |
---|
1063 | list[id].hide(); |
---|
1064 | } |
---|
1065 | } |
---|
1066 | }, |
---|
1067 | |
---|
1068 | /** |
---|
1069 | * Gets the currently-active window in the group. |
---|
1070 | * @return {Ext.Window} The active window |
---|
1071 | */ |
---|
1072 | getActive : function(){ |
---|
1073 | return front; |
---|
1074 | }, |
---|
1075 | |
---|
1076 | /** |
---|
1077 | * Returns zero or more windows in the group using the custom search function passed to this method. |
---|
1078 | * The function should accept a single {@link Ext.Window} reference as its only argument and should |
---|
1079 | * return true if the window matches the search criteria, otherwise it should return false. |
---|
1080 | * @param {Function} fn The search function |
---|
1081 | * @param {Object} scope (optional) The scope in which to execute the function (defaults to the window |
---|
1082 | * that gets passed to the function if not specified) |
---|
1083 | * @return {Array} An array of zero or more matching windows |
---|
1084 | */ |
---|
1085 | getBy : function(fn, scope){ |
---|
1086 | var r = []; |
---|
1087 | for(var i = accessList.length-1; i >=0; --i) { |
---|
1088 | var win = accessList[i]; |
---|
1089 | if(fn.call(scope||win, win) !== false){ |
---|
1090 | r.push(win); |
---|
1091 | } |
---|
1092 | } |
---|
1093 | return r; |
---|
1094 | }, |
---|
1095 | |
---|
1096 | /** |
---|
1097 | * Executes the specified function once for every window in the group, passing each |
---|
1098 | * window as the only parameter. Returning false from the function will stop the iteration. |
---|
1099 | * @param {Function} fn The function to execute for each item |
---|
1100 | * @param {Object} scope (optional) The scope in which to execute the function |
---|
1101 | */ |
---|
1102 | each : function(fn, scope){ |
---|
1103 | for(var id in list){ |
---|
1104 | if(list[id] && typeof list[id] != "function"){ |
---|
1105 | if(fn.call(scope || list[id], list[id]) === false){ |
---|
1106 | return; |
---|
1107 | } |
---|
1108 | } |
---|
1109 | } |
---|
1110 | } |
---|
1111 | }; |
---|
1112 | }; |
---|
1113 | |
---|
1114 | |
---|
1115 | /** |
---|
1116 | * @class Ext.WindowMgr |
---|
1117 | * @extends Ext.WindowGroup |
---|
1118 | * The default global window group that is available automatically. To have more than one group of windows |
---|
1119 | * with separate z-order stacks, create additional instances of {@link Ext.WindowGroup} as needed. |
---|
1120 | * @singleton |
---|
1121 | */ |
---|
1122 | Ext.WindowMgr = new Ext.WindowGroup();/** |
---|
1123 | * @class Ext.MessageBox |
---|
1124 | * <p>Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.<p/> |
---|
1125 | * <p>Note that the MessageBox is asynchronous. Unlike a regular JavaScript <code>alert</code> (which will halt |
---|
1126 | * browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code |
---|
1127 | * that should only run <em>after</em> some user feedback from the MessageBox, you must use a callback function |
---|
1128 | * (see the <code>function</code> parameter for {@link #show} for more details).</p> |
---|
1129 | * <p>Example usage:</p> |
---|
1130 | *<pre><code> |
---|
1131 | // Basic alert: |
---|
1132 | Ext.Msg.alert('Status', 'Changes saved successfully.'); |
---|
1133 | |
---|
1134 | // Prompt for user data and process the result using a callback: |
---|
1135 | Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ |
---|
1136 | if (btn == 'ok'){ |
---|
1137 | // process text value and close... |
---|
1138 | } |
---|
1139 | }); |
---|
1140 | |
---|
1141 | // Show a dialog using config options: |
---|
1142 | Ext.Msg.show({ |
---|
1143 | title:'Save Changes?', |
---|
1144 | msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?', |
---|
1145 | buttons: Ext.Msg.YESNOCANCEL, |
---|
1146 | fn: processResult, |
---|
1147 | animEl: 'elId', |
---|
1148 | icon: Ext.MessageBox.QUESTION |
---|
1149 | }); |
---|
1150 | </code></pre> |
---|
1151 | * @singleton |
---|
1152 | */ |
---|
1153 | Ext.MessageBox = function(){ |
---|
1154 | var dlg, opt, mask, waitTimer; |
---|
1155 | var bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl; |
---|
1156 | var buttons, activeTextEl, bwidth, iconCls = ''; |
---|
1157 | |
---|
1158 | // private |
---|
1159 | var handleButton = function(button){ |
---|
1160 | if(dlg.isVisible()){ |
---|
1161 | dlg.hide(); |
---|
1162 | handleHide(); |
---|
1163 | Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1); |
---|
1164 | } |
---|
1165 | }; |
---|
1166 | |
---|
1167 | // private |
---|
1168 | var handleHide = function(){ |
---|
1169 | if(opt && opt.cls){ |
---|
1170 | dlg.el.removeClass(opt.cls); |
---|
1171 | } |
---|
1172 | progressBar.reset(); |
---|
1173 | }; |
---|
1174 | |
---|
1175 | // private |
---|
1176 | var handleEsc = function(d, k, e){ |
---|
1177 | if(opt && opt.closable !== false){ |
---|
1178 | dlg.hide(); |
---|
1179 | handleHide(); |
---|
1180 | } |
---|
1181 | if(e){ |
---|
1182 | e.stopEvent(); |
---|
1183 | } |
---|
1184 | }; |
---|
1185 | |
---|
1186 | // private |
---|
1187 | var updateButtons = function(b){ |
---|
1188 | var width = 0; |
---|
1189 | if(!b){ |
---|
1190 | buttons["ok"].hide(); |
---|
1191 | buttons["cancel"].hide(); |
---|
1192 | buttons["yes"].hide(); |
---|
1193 | buttons["no"].hide(); |
---|
1194 | return width; |
---|
1195 | } |
---|
1196 | dlg.footer.dom.style.display = ''; |
---|
1197 | for(var k in buttons){ |
---|
1198 | if(typeof buttons[k] != "function"){ |
---|
1199 | if(b[k]){ |
---|
1200 | buttons[k].show(); |
---|
1201 | buttons[k].setText(typeof b[k] == "string" ? b[k] : Ext.MessageBox.buttonText[k]); |
---|
1202 | width += buttons[k].el.getWidth()+15; |
---|
1203 | }else{ |
---|
1204 | buttons[k].hide(); |
---|
1205 | } |
---|
1206 | } |
---|
1207 | } |
---|
1208 | return width; |
---|
1209 | }; |
---|
1210 | |
---|
1211 | return { |
---|
1212 | /** |
---|
1213 | * Returns a reference to the underlying {@link Ext.Window} element |
---|
1214 | * @return {Ext.Window} The window |
---|
1215 | */ |
---|
1216 | getDialog : function(titleText){ |
---|
1217 | if(!dlg){ |
---|
1218 | dlg = new Ext.Window({ |
---|
1219 | autoCreate : true, |
---|
1220 | title:titleText, |
---|
1221 | resizable:false, |
---|
1222 | constrain:true, |
---|
1223 | constrainHeader:true, |
---|
1224 | minimizable : false, |
---|
1225 | maximizable : false, |
---|
1226 | stateful: false, |
---|
1227 | modal: true, |
---|
1228 | shim:true, |
---|
1229 | buttonAlign:"center", |
---|
1230 | width:400, |
---|
1231 | height:100, |
---|
1232 | minHeight: 80, |
---|
1233 | plain:true, |
---|
1234 | footer:true, |
---|
1235 | closable:true, |
---|
1236 | close : function(){ |
---|
1237 | if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){ |
---|
1238 | handleButton("no"); |
---|
1239 | }else{ |
---|
1240 | handleButton("cancel"); |
---|
1241 | } |
---|
1242 | } |
---|
1243 | }); |
---|
1244 | buttons = {}; |
---|
1245 | var bt = this.buttonText; |
---|
1246 | //TODO: refactor this block into a buttons config to pass into the Window constructor |
---|
1247 | buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok")); |
---|
1248 | buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes")); |
---|
1249 | buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no")); |
---|
1250 | buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel")); |
---|
1251 | buttons["ok"].hideMode = buttons["yes"].hideMode = buttons["no"].hideMode = buttons["cancel"].hideMode = 'offsets'; |
---|
1252 | dlg.render(document.body); |
---|
1253 | dlg.getEl().addClass('x-window-dlg'); |
---|
1254 | mask = dlg.mask; |
---|
1255 | bodyEl = dlg.body.createChild({ |
---|
1256 | html:'<div class="ext-mb-icon"></div><div class="ext-mb-content"><span class="ext-mb-text"></span><br /><div class="ext-mb-fix-cursor"><input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea></div></div>' |
---|
1257 | }); |
---|
1258 | iconEl = Ext.get(bodyEl.dom.firstChild); |
---|
1259 | var contentEl = bodyEl.dom.childNodes[1]; |
---|
1260 | msgEl = Ext.get(contentEl.firstChild); |
---|
1261 | textboxEl = Ext.get(contentEl.childNodes[2].firstChild); |
---|
1262 | textboxEl.enableDisplayMode(); |
---|
1263 | textboxEl.addKeyListener([10,13], function(){ |
---|
1264 | if(dlg.isVisible() && opt && opt.buttons){ |
---|
1265 | if(opt.buttons.ok){ |
---|
1266 | handleButton("ok"); |
---|
1267 | }else if(opt.buttons.yes){ |
---|
1268 | handleButton("yes"); |
---|
1269 | } |
---|
1270 | } |
---|
1271 | }); |
---|
1272 | textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]); |
---|
1273 | textareaEl.enableDisplayMode(); |
---|
1274 | progressBar = new Ext.ProgressBar({ |
---|
1275 | renderTo:bodyEl |
---|
1276 | }); |
---|
1277 | bodyEl.createChild({cls:'x-clear'}); |
---|
1278 | } |
---|
1279 | return dlg; |
---|
1280 | }, |
---|
1281 | |
---|
1282 | /** |
---|
1283 | * Updates the message box body text |
---|
1284 | * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to |
---|
1285 | * the XHTML-compliant non-breaking space character '&#160;') |
---|
1286 | * @return {Ext.MessageBox} this |
---|
1287 | */ |
---|
1288 | updateText : function(text){ |
---|
1289 | if(!dlg.isVisible() && !opt.width){ |
---|
1290 | dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows |
---|
1291 | } |
---|
1292 | msgEl.update(text || ' '); |
---|
1293 | |
---|
1294 | var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0; |
---|
1295 | var mw = msgEl.getWidth() + msgEl.getMargins('lr'); |
---|
1296 | var fw = dlg.getFrameWidth('lr'); |
---|
1297 | var bw = dlg.body.getFrameWidth('lr'); |
---|
1298 | if (Ext.isIE && iw > 0){ |
---|
1299 | //3 pixels get subtracted in the icon CSS for an IE margin issue, |
---|
1300 | //so we have to add it back here for the overall width to be consistent |
---|
1301 | iw += 3; |
---|
1302 | } |
---|
1303 | var w = Math.max(Math.min(opt.width || iw+mw+fw+bw, this.maxWidth), |
---|
1304 | Math.max(opt.minWidth || this.minWidth, bwidth || 0)); |
---|
1305 | |
---|
1306 | if(opt.prompt === true){ |
---|
1307 | activeTextEl.setWidth(w-iw-fw-bw); |
---|
1308 | } |
---|
1309 | if(opt.progress === true || opt.wait === true){ |
---|
1310 | progressBar.setSize(w-iw-fw-bw); |
---|
1311 | } |
---|
1312 | if(Ext.isIE && w == bwidth){ |
---|
1313 | w += 4; //Add offset when the content width is smaller than the buttons. |
---|
1314 | } |
---|
1315 | dlg.setSize(w, 'auto').center(); |
---|
1316 | return this; |
---|
1317 | }, |
---|
1318 | |
---|
1319 | /** |
---|
1320 | * Updates a progress-style message box's text and progress bar. Only relevant on message boxes |
---|
1321 | * initiated via {@link Ext.MessageBox#progress} or {@link Ext.MessageBox#wait}, |
---|
1322 | * or by calling {@link Ext.MessageBox#show} with progress: true. |
---|
1323 | * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0) |
---|
1324 | * @param {String} progressText The progress text to display inside the progress bar (defaults to '') |
---|
1325 | * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined |
---|
1326 | * so that any existing body text will not get overwritten by default unless a new value is passed in) |
---|
1327 | * @return {Ext.MessageBox} this |
---|
1328 | */ |
---|
1329 | updateProgress : function(value, progressText, msg){ |
---|
1330 | progressBar.updateProgress(value, progressText); |
---|
1331 | if(msg){ |
---|
1332 | this.updateText(msg); |
---|
1333 | } |
---|
1334 | return this; |
---|
1335 | }, |
---|
1336 | |
---|
1337 | /** |
---|
1338 | * Returns true if the message box is currently displayed |
---|
1339 | * @return {Boolean} True if the message box is visible, else false |
---|
1340 | */ |
---|
1341 | isVisible : function(){ |
---|
1342 | return dlg && dlg.isVisible(); |
---|
1343 | }, |
---|
1344 | |
---|
1345 | /** |
---|
1346 | * Hides the message box if it is displayed |
---|
1347 | * @return {Ext.MessageBox} this |
---|
1348 | */ |
---|
1349 | hide : function(){ |
---|
1350 | var proxy = dlg ? dlg.activeGhost : null; |
---|
1351 | if(this.isVisible() || proxy){ |
---|
1352 | dlg.hide(); |
---|
1353 | handleHide(); |
---|
1354 | if (proxy){ |
---|
1355 | // unghost is a private function, but i saw no better solution |
---|
1356 | // to fix the locking problem when dragging while it closes |
---|
1357 | dlg.unghost(false, false); |
---|
1358 | } |
---|
1359 | } |
---|
1360 | return this; |
---|
1361 | }, |
---|
1362 | |
---|
1363 | /** |
---|
1364 | * Displays a new message box, or reinitializes an existing message box, based on the config options |
---|
1365 | * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, |
---|
1366 | * although those calls are basic shortcuts and do not support all of the config options allowed here. |
---|
1367 | * @param {Object} config The following config options are supported: <ul> |
---|
1368 | * <li><b>animEl</b> : String/Element<div class="sub-desc">An id or Element from which the message box should animate as it |
---|
1369 | * opens and closes (defaults to undefined)</div></li> |
---|
1370 | * <li><b>buttons</b> : Object/Boolean<div class="sub-desc">A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo', |
---|
1371 | * cancel:'Bar'}), or false to not show any buttons (defaults to false)</div></li> |
---|
1372 | * <li><b>closable</b> : Boolean<div class="sub-desc">False to hide the top-right close button (defaults to true). Note that |
---|
1373 | * progress and wait dialogs will ignore this property and always hide the close button as they can only |
---|
1374 | * be closed programmatically.</div></li> |
---|
1375 | * <li><b>cls</b> : String<div class="sub-desc">A custom CSS class to apply to the message box's container element</div></li> |
---|
1376 | * <li><b>defaultTextHeight</b> : Number<div class="sub-desc">The default height in pixels of the message box's multiline textarea |
---|
1377 | * if displayed (defaults to 75)</div></li> |
---|
1378 | * <li><b>fn</b> : Function<div class="sub-desc">A callback function which is called when the dialog is dismissed either |
---|
1379 | * by clicking on the configured buttons, or on the dialog close button, or by pressing |
---|
1380 | * the return button to enter input. |
---|
1381 | * <p>Progress and wait dialogs will ignore this option since they do not respond to user |
---|
1382 | * actions and can only be closed programmatically, so any required function should be called |
---|
1383 | * by the same code after it closes the dialog. Parameters passed:<ul> |
---|
1384 | * <li><b>buttonId</b> : String<div class="sub-desc">The ID of the button pressed, one of:<div class="sub-desc"><ul> |
---|
1385 | * <li><tt>ok</tt></li> |
---|
1386 | * <li><tt>yes</tt></li> |
---|
1387 | * <li><tt>no</tt></li> |
---|
1388 | * <li><tt>cancel</tt></li> |
---|
1389 | * </ul></div></div></li> |
---|
1390 | * <li><b>text</b> : String<div class="sub-desc">Value of the input field if either <tt><a href="#show-option-prompt" ext:member="show-option-prompt" ext:cls="Ext.MessageBox">prompt</a></tt> |
---|
1391 | * or <tt><a href="#show-option-multiline" ext:member="show-option-multiline" ext:cls="Ext.MessageBox">multiline</a></tt> is true</div></li> |
---|
1392 | * <li><b>opt</b> : Object<div class="sub-desc">The config object passed to show.</div></li> |
---|
1393 | * </ul></p></div></li> |
---|
1394 | * <li><b>scope</b> : Object<div class="sub-desc">The scope of the callback function</div></li> |
---|
1395 | * <li><b>icon</b> : String<div class="sub-desc">A CSS class that provides a background image to be used as the body icon for the |
---|
1396 | * dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')</div></li> |
---|
1397 | * <li><b>iconCls</b> : String<div class="sub-desc">The standard {@link Ext.Window#iconCls} to |
---|
1398 | * add an optional header icon (defaults to '')</div></li> |
---|
1399 | * <li><b>maxWidth</b> : Number<div class="sub-desc">The maximum width in pixels of the message box (defaults to 600)</div></li> |
---|
1400 | * <li><b>minWidth</b> : Number<div class="sub-desc">The minimum width in pixels of the message box (defaults to 100)</div></li> |
---|
1401 | * <li><b>modal</b> : Boolean<div class="sub-desc">False to allow user interaction with the page while the message box is |
---|
1402 | * displayed (defaults to true)</div></li> |
---|
1403 | * <li><b>msg</b> : String<div class="sub-desc">A string that will replace the existing message box body text (defaults to the |
---|
1404 | * XHTML-compliant non-breaking space character '&#160;')</div></li> |
---|
1405 | * <li><a id="show-option-multiline"></a><b>multiline</b> : Boolean<div class="sub-desc"> |
---|
1406 | * True to prompt the user to enter multi-line text (defaults to false)</div></li> |
---|
1407 | * <li><b>progress</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li> |
---|
1408 | * <li><b>progressText</b> : String<div class="sub-desc">The text to display inside the progress bar if progress = true (defaults to '')</div></li> |
---|
1409 | * <li><a id="show-option-prompt"></a><b>prompt</b> : Boolean<div class="sub-desc">True to prompt the user to enter single-line text (defaults to false)</div></li> |
---|
1410 | * <li><b>proxyDrag</b> : Boolean<div class="sub-desc">True to display a lightweight proxy while dragging (defaults to false)</div></li> |
---|
1411 | * <li><b>title</b> : String<div class="sub-desc">The title text</div></li> |
---|
1412 | * <li><b>value</b> : String<div class="sub-desc">The string value to set into the active textbox element if displayed</div></li> |
---|
1413 | * <li><b>wait</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li> |
---|
1414 | * <li><b>waitConfig</b> : Object<div class="sub-desc">A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)</div></li> |
---|
1415 | * <li><b>width</b> : Number<div class="sub-desc">The width of the dialog in pixels</div></li> |
---|
1416 | * </ul> |
---|
1417 | * Example usage: |
---|
1418 | * <pre><code> |
---|
1419 | Ext.Msg.show({ |
---|
1420 | title: 'Address', |
---|
1421 | msg: 'Please enter your address:', |
---|
1422 | width: 300, |
---|
1423 | buttons: Ext.MessageBox.OKCANCEL, |
---|
1424 | multiline: true, |
---|
1425 | fn: saveAddress, |
---|
1426 | animEl: 'addAddressBtn', |
---|
1427 | icon: Ext.MessageBox.INFO |
---|
1428 | }); |
---|
1429 | </code></pre> |
---|
1430 | * @return {Ext.MessageBox} this |
---|
1431 | */ |
---|
1432 | show : function(options){ |
---|
1433 | if(this.isVisible()){ |
---|
1434 | this.hide(); |
---|
1435 | } |
---|
1436 | opt = options; |
---|
1437 | var d = this.getDialog(opt.title || " "); |
---|
1438 | |
---|
1439 | d.setTitle(opt.title || " "); |
---|
1440 | var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true); |
---|
1441 | d.tools.close.setDisplayed(allowClose); |
---|
1442 | activeTextEl = textboxEl; |
---|
1443 | opt.prompt = opt.prompt || (opt.multiline ? true : false); |
---|
1444 | if(opt.prompt){ |
---|
1445 | if(opt.multiline){ |
---|
1446 | textboxEl.hide(); |
---|
1447 | textareaEl.show(); |
---|
1448 | textareaEl.setHeight(typeof opt.multiline == "number" ? |
---|
1449 | opt.multiline : this.defaultTextHeight); |
---|
1450 | activeTextEl = textareaEl; |
---|
1451 | }else{ |
---|
1452 | textboxEl.show(); |
---|
1453 | textareaEl.hide(); |
---|
1454 | } |
---|
1455 | }else{ |
---|
1456 | textboxEl.hide(); |
---|
1457 | textareaEl.hide(); |
---|
1458 | } |
---|
1459 | activeTextEl.dom.value = opt.value || ""; |
---|
1460 | if(opt.prompt){ |
---|
1461 | d.focusEl = activeTextEl; |
---|
1462 | }else{ |
---|
1463 | var bs = opt.buttons; |
---|
1464 | var db = null; |
---|
1465 | if(bs && bs.ok){ |
---|
1466 | db = buttons["ok"]; |
---|
1467 | }else if(bs && bs.yes){ |
---|
1468 | db = buttons["yes"]; |
---|
1469 | } |
---|
1470 | if (db){ |
---|
1471 | d.focusEl = db; |
---|
1472 | } |
---|
1473 | } |
---|
1474 | if(opt.iconCls){ |
---|
1475 | d.setIconClass(opt.iconCls); |
---|
1476 | } |
---|
1477 | this.setIcon(opt.icon); |
---|
1478 | if(opt.cls){ |
---|
1479 | d.el.addClass(opt.cls); |
---|
1480 | } |
---|
1481 | d.proxyDrag = opt.proxyDrag === true; |
---|
1482 | d.modal = opt.modal !== false; |
---|
1483 | d.mask = opt.modal !== false ? mask : false; |
---|
1484 | |
---|
1485 | d.on('show', function(){ |
---|
1486 | //workaround for window internally enabling keymap in afterShow |
---|
1487 | d.keyMap.setDisabled(allowClose !== true); |
---|
1488 | d.doLayout(); |
---|
1489 | this.setIcon(opt.icon); |
---|
1490 | bwidth = updateButtons(opt.buttons); |
---|
1491 | progressBar.setVisible(opt.progress === true || opt.wait === true); |
---|
1492 | this.updateProgress(0, opt.progressText); |
---|
1493 | this.updateText(opt.msg); |
---|
1494 | if(opt.wait === true){ |
---|
1495 | progressBar.wait(opt.waitConfig); |
---|
1496 | } |
---|
1497 | |
---|
1498 | }, this, {single:true}); |
---|
1499 | if(!d.isVisible()){ |
---|
1500 | // force it to the end of the z-index stack so it gets a cursor in FF |
---|
1501 | document.body.appendChild(dlg.el.dom); |
---|
1502 | d.setAnimateTarget(opt.animEl); |
---|
1503 | d.show(opt.animEl); |
---|
1504 | } |
---|
1505 | return this; |
---|
1506 | }, |
---|
1507 | |
---|
1508 | /** |
---|
1509 | * Adds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default |
---|
1510 | * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('') |
---|
1511 | * to clear any existing icon. The following built-in icon classes are supported, but you can also pass |
---|
1512 | * in a custom class name: |
---|
1513 | * <pre> |
---|
1514 | Ext.MessageBox.INFO |
---|
1515 | Ext.MessageBox.WARNING |
---|
1516 | Ext.MessageBox.QUESTION |
---|
1517 | Ext.MessageBox.ERROR |
---|
1518 | *</pre> |
---|
1519 | * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon |
---|
1520 | * @return {Ext.MessageBox} this |
---|
1521 | */ |
---|
1522 | setIcon : function(icon){ |
---|
1523 | if(icon && icon != ''){ |
---|
1524 | iconEl.removeClass('x-hidden'); |
---|
1525 | iconEl.replaceClass(iconCls, icon); |
---|
1526 | bodyEl.addClass('x-dlg-icon'); |
---|
1527 | iconCls = icon; |
---|
1528 | }else{ |
---|
1529 | iconEl.replaceClass(iconCls, 'x-hidden'); |
---|
1530 | bodyEl.removeClass('x-dlg-icon'); |
---|
1531 | iconCls = ''; |
---|
1532 | } |
---|
1533 | return this; |
---|
1534 | }, |
---|
1535 | |
---|
1536 | /** |
---|
1537 | * Displays a message box with a progress bar. This message box has no buttons and is not closeable by |
---|
1538 | * the user. You are responsible for updating the progress bar as needed via {@link Ext.MessageBox#updateProgress} |
---|
1539 | * and closing the message box when the process is complete. |
---|
1540 | * @param {String} title The title bar text |
---|
1541 | * @param {String} msg The message box body text |
---|
1542 | * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '') |
---|
1543 | * @return {Ext.MessageBox} this |
---|
1544 | */ |
---|
1545 | progress : function(title, msg, progressText){ |
---|
1546 | this.show({ |
---|
1547 | title : title, |
---|
1548 | msg : msg, |
---|
1549 | buttons: false, |
---|
1550 | progress:true, |
---|
1551 | closable:false, |
---|
1552 | minWidth: this.minProgressWidth, |
---|
1553 | progressText: progressText |
---|
1554 | }); |
---|
1555 | return this; |
---|
1556 | }, |
---|
1557 | |
---|
1558 | /** |
---|
1559 | * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user |
---|
1560 | * interaction while waiting for a long-running process to complete that does not have defined intervals. |
---|
1561 | * You are responsible for closing the message box when the process is complete. |
---|
1562 | * @param {String} msg The message box body text |
---|
1563 | * @param {String} title (optional) The title bar text |
---|
1564 | * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object |
---|
1565 | * @return {Ext.MessageBox} this |
---|
1566 | */ |
---|
1567 | wait : function(msg, title, config){ |
---|
1568 | this.show({ |
---|
1569 | title : title, |
---|
1570 | msg : msg, |
---|
1571 | buttons: false, |
---|
1572 | closable:false, |
---|
1573 | wait:true, |
---|
1574 | modal:true, |
---|
1575 | minWidth: this.minProgressWidth, |
---|
1576 | waitConfig: config |
---|
1577 | }); |
---|
1578 | return this; |
---|
1579 | }, |
---|
1580 | |
---|
1581 | /** |
---|
1582 | * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). |
---|
1583 | * If a callback function is passed it will be called after the user clicks the button, and the |
---|
1584 | * id of the button that was clicked will be passed as the only parameter to the callback |
---|
1585 | * (could also be the top-right close button). |
---|
1586 | * @param {String} title The title bar text |
---|
1587 | * @param {String} msg The message box body text |
---|
1588 | * @param {Function} fn (optional) The callback function invoked after the message box is closed |
---|
1589 | * @param {Object} scope (optional) The scope of the callback function |
---|
1590 | * @return {Ext.MessageBox} this |
---|
1591 | */ |
---|
1592 | alert : function(title, msg, fn, scope){ |
---|
1593 | this.show({ |
---|
1594 | title : title, |
---|
1595 | msg : msg, |
---|
1596 | buttons: this.OK, |
---|
1597 | fn: fn, |
---|
1598 | scope : scope |
---|
1599 | }); |
---|
1600 | return this; |
---|
1601 | }, |
---|
1602 | |
---|
1603 | /** |
---|
1604 | * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). |
---|
1605 | * If a callback function is passed it will be called after the user clicks either button, |
---|
1606 | * and the id of the button that was clicked will be passed as the only parameter to the callback |
---|
1607 | * (could also be the top-right close button). |
---|
1608 | * @param {String} title The title bar text |
---|
1609 | * @param {String} msg The message box body text |
---|
1610 | * @param {Function} fn (optional) The callback function invoked after the message box is closed |
---|
1611 | * @param {Object} scope (optional) The scope of the callback function |
---|
1612 | * @return {Ext.MessageBox} this |
---|
1613 | */ |
---|
1614 | confirm : function(title, msg, fn, scope){ |
---|
1615 | this.show({ |
---|
1616 | title : title, |
---|
1617 | msg : msg, |
---|
1618 | buttons: this.YESNO, |
---|
1619 | fn: fn, |
---|
1620 | scope : scope, |
---|
1621 | icon: this.QUESTION |
---|
1622 | }); |
---|
1623 | return this; |
---|
1624 | }, |
---|
1625 | |
---|
1626 | /** |
---|
1627 | * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt). |
---|
1628 | * The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user |
---|
1629 | * clicks either button, and the id of the button that was clicked (could also be the top-right |
---|
1630 | * close button) and the text that was entered will be passed as the two parameters to the callback. |
---|
1631 | * @param {String} title The title bar text |
---|
1632 | * @param {String} msg The message box body text |
---|
1633 | * @param {Function} fn (optional) The callback function invoked after the message box is closed |
---|
1634 | * @param {Object} scope (optional) The scope of the callback function |
---|
1635 | * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight |
---|
1636 | * property, or the height in pixels to create the textbox (defaults to false / single-line) |
---|
1637 | * @param {String} value (optional) Default value of the text input element (defaults to '') |
---|
1638 | * @return {Ext.MessageBox} this |
---|
1639 | */ |
---|
1640 | prompt : function(title, msg, fn, scope, multiline, value){ |
---|
1641 | this.show({ |
---|
1642 | title : title, |
---|
1643 | msg : msg, |
---|
1644 | buttons: this.OKCANCEL, |
---|
1645 | fn: fn, |
---|
1646 | minWidth:250, |
---|
1647 | scope : scope, |
---|
1648 | prompt:true, |
---|
1649 | multiline: multiline, |
---|
1650 | value: value |
---|
1651 | }); |
---|
1652 | return this; |
---|
1653 | }, |
---|
1654 | |
---|
1655 | /** |
---|
1656 | * Button config that displays a single OK button |
---|
1657 | * @type Object |
---|
1658 | */ |
---|
1659 | OK : {ok:true}, |
---|
1660 | /** |
---|
1661 | * Button config that displays a single Cancel button |
---|
1662 | * @type Object |
---|
1663 | */ |
---|
1664 | CANCEL : {cancel:true}, |
---|
1665 | /** |
---|
1666 | * Button config that displays OK and Cancel buttons |
---|
1667 | * @type Object |
---|
1668 | */ |
---|
1669 | OKCANCEL : {ok:true, cancel:true}, |
---|
1670 | /** |
---|
1671 | * Button config that displays Yes and No buttons |
---|
1672 | * @type Object |
---|
1673 | */ |
---|
1674 | YESNO : {yes:true, no:true}, |
---|
1675 | /** |
---|
1676 | * Button config that displays Yes, No and Cancel buttons |
---|
1677 | * @type Object |
---|
1678 | */ |
---|
1679 | YESNOCANCEL : {yes:true, no:true, cancel:true}, |
---|
1680 | /** |
---|
1681 | * The CSS class that provides the INFO icon image |
---|
1682 | * @type String |
---|
1683 | */ |
---|
1684 | INFO : 'ext-mb-info', |
---|
1685 | /** |
---|
1686 | * The CSS class that provides the WARNING icon image |
---|
1687 | * @type String |
---|
1688 | */ |
---|
1689 | WARNING : 'ext-mb-warning', |
---|
1690 | /** |
---|
1691 | * The CSS class that provides the QUESTION icon image |
---|
1692 | * @type String |
---|
1693 | */ |
---|
1694 | QUESTION : 'ext-mb-question', |
---|
1695 | /** |
---|
1696 | * The CSS class that provides the ERROR icon image |
---|
1697 | * @type String |
---|
1698 | */ |
---|
1699 | ERROR : 'ext-mb-error', |
---|
1700 | |
---|
1701 | /** |
---|
1702 | * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) |
---|
1703 | * @type Number |
---|
1704 | */ |
---|
1705 | defaultTextHeight : 75, |
---|
1706 | /** |
---|
1707 | * The maximum width in pixels of the message box (defaults to 600) |
---|
1708 | * @type Number |
---|
1709 | */ |
---|
1710 | maxWidth : 600, |
---|
1711 | /** |
---|
1712 | * The minimum width in pixels of the message box (defaults to 110) |
---|
1713 | * @type Number |
---|
1714 | */ |
---|
1715 | minWidth : 110, |
---|
1716 | /** |
---|
1717 | * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful |
---|
1718 | * for setting a different minimum width than text-only dialogs may need (defaults to 250) |
---|
1719 | * @type Number |
---|
1720 | */ |
---|
1721 | minProgressWidth : 250, |
---|
1722 | /** |
---|
1723 | * An object containing the default button text strings that can be overriden for localized language support. |
---|
1724 | * Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific |
---|
1725 | * resource file for handling language support across the framework. |
---|
1726 | * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french |
---|
1727 | * @type Object |
---|
1728 | */ |
---|
1729 | buttonText : { |
---|
1730 | ok : "OK", |
---|
1731 | cancel : "Cancel", |
---|
1732 | yes : "Yes", |
---|
1733 | no : "No" |
---|
1734 | } |
---|
1735 | }; |
---|
1736 | }(); |
---|
1737 | |
---|
1738 | /** |
---|
1739 | * Shorthand for {@link Ext.MessageBox} |
---|
1740 | */ |
---|
1741 | Ext.Msg = Ext.MessageBox;/** |
---|
1742 | * @class Ext.dd.PanelProxy |
---|
1743 | * A custom drag proxy implementation specific to {@link Ext.Panel}s. This class is primarily used internally |
---|
1744 | * for the Panel's drag drop implementation, and should never need to be created directly. |
---|
1745 | * @constructor |
---|
1746 | * @param panel The {@link Ext.Panel} to proxy for |
---|
1747 | * @param config Configuration options |
---|
1748 | */ |
---|
1749 | Ext.dd.PanelProxy = function(panel, config){ |
---|
1750 | this.panel = panel; |
---|
1751 | this.id = this.panel.id +'-ddproxy'; |
---|
1752 | Ext.apply(this, config); |
---|
1753 | }; |
---|
1754 | |
---|
1755 | Ext.dd.PanelProxy.prototype = { |
---|
1756 | /** |
---|
1757 | * @cfg {Boolean} insertProxy True to insert a placeholder proxy element while dragging the panel, |
---|
1758 | * false to drag with no proxy (defaults to true). |
---|
1759 | */ |
---|
1760 | insertProxy : true, |
---|
1761 | |
---|
1762 | // private overrides |
---|
1763 | setStatus : Ext.emptyFn, |
---|
1764 | reset : Ext.emptyFn, |
---|
1765 | update : Ext.emptyFn, |
---|
1766 | stop : Ext.emptyFn, |
---|
1767 | sync: Ext.emptyFn, |
---|
1768 | |
---|
1769 | /** |
---|
1770 | * Gets the proxy's element |
---|
1771 | * @return {Element} The proxy's element |
---|
1772 | */ |
---|
1773 | getEl : function(){ |
---|
1774 | return this.ghost; |
---|
1775 | }, |
---|
1776 | |
---|
1777 | /** |
---|
1778 | * Gets the proxy's ghost element |
---|
1779 | * @return {Element} The proxy's ghost element |
---|
1780 | */ |
---|
1781 | getGhost : function(){ |
---|
1782 | return this.ghost; |
---|
1783 | }, |
---|
1784 | |
---|
1785 | /** |
---|
1786 | * Gets the proxy's element |
---|
1787 | * @return {Element} The proxy's element |
---|
1788 | */ |
---|
1789 | getProxy : function(){ |
---|
1790 | return this.proxy; |
---|
1791 | }, |
---|
1792 | |
---|
1793 | /** |
---|
1794 | * Hides the proxy |
---|
1795 | */ |
---|
1796 | hide : function(){ |
---|
1797 | if(this.ghost){ |
---|
1798 | if(this.proxy){ |
---|
1799 | this.proxy.remove(); |
---|
1800 | delete this.proxy; |
---|
1801 | } |
---|
1802 | this.panel.el.dom.style.display = ''; |
---|
1803 | this.ghost.remove(); |
---|
1804 | delete this.ghost; |
---|
1805 | } |
---|
1806 | }, |
---|
1807 | |
---|
1808 | /** |
---|
1809 | * Shows the proxy |
---|
1810 | */ |
---|
1811 | show : function(){ |
---|
1812 | if(!this.ghost){ |
---|
1813 | this.ghost = this.panel.createGhost(undefined, undefined, Ext.getBody()); |
---|
1814 | this.ghost.setXY(this.panel.el.getXY()) |
---|
1815 | if(this.insertProxy){ |
---|
1816 | this.proxy = this.panel.el.insertSibling({cls:'x-panel-dd-spacer'}); |
---|
1817 | this.proxy.setSize(this.panel.getSize()); |
---|
1818 | } |
---|
1819 | this.panel.el.dom.style.display = 'none'; |
---|
1820 | } |
---|
1821 | }, |
---|
1822 | |
---|
1823 | // private |
---|
1824 | repair : function(xy, callback, scope){ |
---|
1825 | this.hide(); |
---|
1826 | if(typeof callback == "function"){ |
---|
1827 | callback.call(scope || this); |
---|
1828 | } |
---|
1829 | }, |
---|
1830 | |
---|
1831 | /** |
---|
1832 | * Moves the proxy to a different position in the DOM. This is typically called while dragging the Panel |
---|
1833 | * to keep the proxy sync'd to the Panel's location. |
---|
1834 | * @param {HTMLElement} parentNode The proxy's parent DOM node |
---|
1835 | * @param {HTMLElement} before (optional) The sibling node before which the proxy should be inserted (defaults |
---|
1836 | * to the parent's last child if not specified) |
---|
1837 | */ |
---|
1838 | moveProxy : function(parentNode, before){ |
---|
1839 | if(this.proxy){ |
---|
1840 | parentNode.insertBefore(this.proxy.dom, before); |
---|
1841 | } |
---|
1842 | } |
---|
1843 | }; |
---|
1844 | |
---|
1845 | // private - DD implementation for Panels |
---|
1846 | Ext.Panel.DD = function(panel, cfg){ |
---|
1847 | this.panel = panel; |
---|
1848 | this.dragData = {panel: panel}; |
---|
1849 | this.proxy = new Ext.dd.PanelProxy(panel, cfg); |
---|
1850 | Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg); |
---|
1851 | var h = panel.header; |
---|
1852 | if(h){ |
---|
1853 | this.setHandleElId(h.id); |
---|
1854 | } |
---|
1855 | (h ? h : this.panel.body).setStyle('cursor', 'move'); |
---|
1856 | this.scroll = false; |
---|
1857 | }; |
---|
1858 | |
---|
1859 | Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, { |
---|
1860 | showFrame: Ext.emptyFn, |
---|
1861 | startDrag: Ext.emptyFn, |
---|
1862 | b4StartDrag: function(x, y) { |
---|
1863 | this.proxy.show(); |
---|
1864 | }, |
---|
1865 | b4MouseDown: function(e) { |
---|
1866 | var x = e.getPageX(); |
---|
1867 | var y = e.getPageY(); |
---|
1868 | this.autoOffset(x, y); |
---|
1869 | }, |
---|
1870 | onInitDrag : function(x, y){ |
---|
1871 | this.onStartDrag(x, y); |
---|
1872 | return true; |
---|
1873 | }, |
---|
1874 | createFrame : Ext.emptyFn, |
---|
1875 | getDragEl : function(e){ |
---|
1876 | return this.proxy.ghost.dom; |
---|
1877 | }, |
---|
1878 | endDrag : function(e){ |
---|
1879 | this.proxy.hide(); |
---|
1880 | this.panel.saveState(); |
---|
1881 | }, |
---|
1882 | |
---|
1883 | autoOffset : function(x, y) { |
---|
1884 | x -= this.startPageX; |
---|
1885 | y -= this.startPageY; |
---|
1886 | this.setDelta(x, y); |
---|
1887 | } |
---|
1888 | }); |
---|