[619] | 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 | }); |
---|