Window.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-window-Window'>/**
  19. </span> * A specialized panel intended for use as an application window. Windows are floated, {@link #resizable}, and
  20. * {@link #cfg-draggable} by default. Windows can be {@link #maximizable maximized} to fill the viewport, restored to
  21. * their prior size, and can be {@link #method-minimize}d.
  22. *
  23. * Windows can also be linked to a {@link Ext.ZIndexManager} or managed by the {@link Ext.WindowManager} to provide
  24. * grouping, activation, to front, to back and other application-specific behavior.
  25. *
  26. * By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element specify
  27. * {@link Ext.Component#renderTo renderTo}.
  28. *
  29. * **As with all {@link Ext.container.Container Container}s, it is important to consider how you want the Window to size
  30. * and arrange any child Components. Choose an appropriate {@link #layout} configuration which lays out child Components
  31. * in the required manner.**
  32. *
  33. * @example
  34. * Ext.create('Ext.window.Window', {
  35. * title: 'Hello',
  36. * height: 200,
  37. * width: 400,
  38. * layout: 'fit',
  39. * items: { // Let's put an empty grid in just to illustrate fit layout
  40. * xtype: 'grid',
  41. * border: false,
  42. * columns: [{header: 'World'}], // One header just for show. There's no data,
  43. * store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
  44. * }
  45. * }).show();
  46. */
  47. Ext.define('Ext.window.Window', {
  48. extend: 'Ext.panel.Panel',
  49. alternateClassName: 'Ext.Window',
  50. requires: ['Ext.util.ComponentDragger', 'Ext.util.Region', 'Ext.EventManager'],
  51. alias: 'widget.window',
  52. <span id='Ext-window-Window-cfg-x'> /**
  53. </span> * @cfg {Number} x
  54. * The X position of the left edge of the window on initial showing. Defaults to centering the Window within the
  55. * width of the Window's container {@link Ext.Element Element} (The Element that the Window is rendered to).
  56. */
  57. <span id='Ext-window-Window-cfg-y'> /**
  58. </span> * @cfg {Number} y
  59. * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within the
  60. * height of the Window's container {@link Ext.Element Element} (The Element that the Window is rendered to).
  61. */
  62. <span id='Ext-window-Window-cfg-modal'> /**
  63. </span> * @cfg {Boolean} [modal=false]
  64. * True to make the window modal and mask everything behind it when displayed, false to display it without
  65. * restricting access to other UI elements.
  66. */
  67. <span id='Ext-window-Window-cfg-animateTarget'> /**
  68. </span> * @cfg {String/Ext.Element} [animateTarget=null]
  69. * Id or element from which the window should animate while opening.
  70. */
  71. <span id='Ext-window-Window-cfg-defaultFocus'> /**
  72. </span> * @cfg {String/Number/Ext.Component} defaultFocus
  73. * Specifies a Component to receive focus when this Window is focused.
  74. *
  75. * This may be one of:
  76. *
  77. * - The index of a footer Button.
  78. * - The id or {@link Ext.AbstractComponent#itemId} of a descendant Component.
  79. * - A Component.
  80. */
  81. <span id='Ext-window-Window-cfg-onEsc'> /**
  82. </span> * @cfg {Function} onEsc
  83. * Allows override of the built-in processing for the escape key. Default action is to close the Window (performing
  84. * whatever action is specified in {@link #closeAction}. To prevent the Window closing when the escape key is
  85. * pressed, specify this as {@link Ext#emptyFn Ext.emptyFn}.
  86. */
  87. <span id='Ext-window-Window-cfg-collapsed'> /**
  88. </span> * @cfg {Boolean} [collapsed=false]
  89. * True to render the window collapsed, false to render it expanded. Note that if {@link #expandOnShow}
  90. * is true (the default) it will override the `collapsed` config and the window will always be
  91. * expanded when shown.
  92. */
  93. <span id='Ext-window-Window-cfg-maximized'> /**
  94. </span> * @cfg {Boolean} [maximized=false]
  95. * True to initially display the window in a maximized state.
  96. */
  97. <span id='Ext-window-Window-cfg-baseCls'> /**
  98. </span> * @cfg {String} [baseCls='x-window']
  99. * The base CSS class to apply to this panel's element.
  100. */
  101. baseCls: Ext.baseCSSPrefix + 'window',
  102. <span id='Ext-window-Window-cfg-resizable'> /**
  103. </span> * @cfg {Boolean/Object} resizable
  104. * Specify as `true` to allow user resizing at each edge and corner of the window, false to disable resizing.
  105. *
  106. * This may also be specified as a config object to Ext.resizer.Resizer
  107. */
  108. resizable: true,
  109. <span id='Ext-window-Window-cfg-draggable'> /**
  110. </span> * @cfg {Boolean} draggable
  111. * True to allow the window to be dragged by the header bar, false to disable dragging. Note that
  112. * by default the window will be centered in the viewport, so if dragging is disabled the window may need to be
  113. * positioned programmatically after render (e.g., myWindow.setPosition(100, 100);).
  114. */
  115. draggable: true,
  116. <span id='Ext-window-Window-cfg-constrain'> /**
  117. </span> * @cfg {Boolean} constrain
  118. * True to constrain the window within its containing element, false to allow it to fall outside of its containing
  119. * element. By default the window will be rendered to document.body. To render and constrain the window within
  120. * another element specify {@link #renderTo}. Optionally the header only can be constrained
  121. * using {@link #constrainHeader}.
  122. */
  123. constrain: false,
  124. <span id='Ext-window-Window-cfg-constrainHeader'> /**
  125. </span> * @cfg {Boolean} constrainHeader
  126. * True to constrain the window header within its containing element (allowing the window body to fall outside of
  127. * its containing element) or false to allow the header to fall outside its containing element.
  128. * Optionally the entire window can be constrained using {@link #constrain}.
  129. */
  130. constrainHeader: false,
  131. <span id='Ext-window-Window-cfg-constrainTo'> /**
  132. </span> * @cfg {Ext.util.Region/Ext.Element} constrainTo
  133. * A {@link Ext.util.Region Region} (or an element from which a Region measurement will be read) which is used
  134. * to constrain the window.
  135. */
  136. <span id='Ext-window-Window-cfg-plain'> /**
  137. </span> * @cfg {Boolean} plain
  138. * True to render the window body with a transparent background so that it will blend into the framing elements,
  139. * false to add a lighter background color to visually highlight the body element and separate it more distinctly
  140. * from the surrounding frame.
  141. */
  142. plain: false,
  143. <span id='Ext-window-Window-cfg-minimizable'> /**
  144. </span> * @cfg {Boolean} minimizable
  145. * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button
  146. * and disallow minimizing the window. Note that this button provides no implementation -- the
  147. * behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a custom
  148. * minimize behavior implemented for this option to be useful.
  149. */
  150. minimizable: false,
  151. <span id='Ext-window-Window-cfg-maximizable'> /**
  152. </span> * @cfg {Boolean} maximizable
  153. * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button
  154. * and disallow maximizing the window. Note that when a window is maximized, the tool button
  155. * will automatically change to a 'restore' button with the appropriate behavior already built-in that will restore
  156. * the window to its previous size.
  157. */
  158. maximizable: false,
  159. // inherit docs
  160. minHeight: 50,
  161. // inherit docs
  162. minWidth: 50,
  163. <span id='Ext-window-Window-cfg-expandOnShow'> /**
  164. </span> * @cfg {Boolean} expandOnShow
  165. * True to always expand the window when it is displayed, false to keep it in its current state (which may be
  166. * {@link #collapsed}) when displayed.
  167. */
  168. expandOnShow: true,
  169. // inherited docs, same default
  170. collapsible: false,
  171. <span id='Ext-window-Window-cfg-closable'> /**
  172. </span> * @cfg {Boolean} closable
  173. * True to display the 'close' tool button and allow the user to close the window, false to hide the button and
  174. * disallow closing the window.
  175. *
  176. * By default, when close is requested by either clicking the close button in the header or pressing ESC when the
  177. * Window has focus, the {@link #method-close} method will be called. This will _{@link Ext.Component#method-destroy destroy}_ the
  178. * Window and its content meaning that it may not be reused.
  179. *
  180. * To make closing a Window _hide_ the Window so that it may be reused, set {@link #closeAction} to 'hide'.
  181. */
  182. closable: true,
  183. <span id='Ext-window-Window-cfg-hidden'> /**
  184. </span> * @cfg {Boolean} hidden
  185. * Render this Window hidden. If `true`, the {@link #method-hide} method will be called internally.
  186. */
  187. hidden: true,
  188. <span id='Ext-window-Window-cfg-autoRender'> /**
  189. </span> * @cfg
  190. * @inheritdoc
  191. * Windows render to the body on first show.
  192. */
  193. autoRender: true,
  194. <span id='Ext-window-Window-cfg-hideMode'> /**
  195. </span> * @cfg
  196. * @inheritdoc
  197. * Windows hide using offsets in order to preserve the scroll positions of their descendants.
  198. */
  199. hideMode: 'offsets',
  200. <span id='Ext-window-Window-cfg-floating'> /**
  201. </span> * @cfg
  202. * @private
  203. */
  204. floating: true,
  205. ariaRole: 'alertdialog',
  206. itemCls: Ext.baseCSSPrefix + 'window-item',
  207. initialAlphaNum: /^[a-z0-9]/,
  208. overlapHeader: true,
  209. ignoreHeaderBorderManagement: true,
  210. // Flag to Renderable to always look up the framing styles for this Component
  211. alwaysFramed: true,
  212. <span id='Ext-window-Window-property-isWindow'> /**
  213. </span> * @property {Boolean} isWindow
  214. * `true` in this class to identify an object as an instantiated Window, or subclass thereof.
  215. */
  216. isWindow: true,
  217. // private
  218. initComponent: function() {
  219. var me = this;
  220. // Explicitly set frame to false, since alwaysFramed is
  221. // true, we only want to lookup framing in a specific instance
  222. me.frame = false;
  223. me.callParent();
  224. me.addEvents(
  225. <span id='Ext-window-Window-event-activate'> /**
  226. </span> * @event activate
  227. * Fires after the window has been visually activated via {@link #setActive}.
  228. * @param {Ext.window.Window} this
  229. */
  230. <span id='Ext-window-Window-event-deactivate'> /**
  231. </span> * @event deactivate
  232. * Fires after the window has been visually deactivated via {@link #setActive}.
  233. * @param {Ext.window.Window} this
  234. */
  235. <span id='Ext-window-Window-event-resize'> /**
  236. </span> * @event resize
  237. * Fires after the window has been resized.
  238. * @param {Ext.window.Window} this
  239. * @param {Number} width The window's new width
  240. * @param {Number} height The window's new height
  241. */
  242. 'resize',
  243. <span id='Ext-window-Window-event-maximize'> /**
  244. </span> * @event maximize
  245. * Fires after the window has been maximized.
  246. * @param {Ext.window.Window} this
  247. */
  248. 'maximize',
  249. <span id='Ext-window-Window-event-minimize'> /**
  250. </span> * @event minimize
  251. * Fires after the window has been minimized.
  252. * @param {Ext.window.Window} this
  253. */
  254. 'minimize',
  255. <span id='Ext-window-Window-event-restore'> /**
  256. </span> * @event restore
  257. * Fires after the window has been restored to its original size after being maximized.
  258. * @param {Ext.window.Window} this
  259. */
  260. 'restore'
  261. );
  262. if (me.plain) {
  263. me.addClsWithUI('plain');
  264. }
  265. if (me.modal) {
  266. me.ariaRole = 'dialog';
  267. }
  268. // clickToRaise
  269. if (me.floating) {
  270. me.on({
  271. element: 'el',
  272. mousedown: me.onMouseDown,
  273. scope: me
  274. });
  275. }
  276. me.addStateEvents(['maximize', 'restore', 'resize', 'dragend']);
  277. },
  278. getElConfig: function () {
  279. var me = this,
  280. elConfig;
  281. elConfig = me.callParent();
  282. elConfig.tabIndex = -1;
  283. return elConfig;
  284. },
  285. // State Management
  286. // private
  287. getState: function() {
  288. var me = this,
  289. state = me.callParent() || {},
  290. maximized = !!me.maximized;
  291. state.maximized = maximized;
  292. Ext.apply(state, {
  293. size: maximized ? me.restoreSize : me.getSize(),
  294. pos: maximized ? me.restorePos : me.getPosition()
  295. });
  296. return state;
  297. },
  298. applyState: function(state){
  299. var me = this;
  300. if (state) {
  301. me.maximized = state.maximized;
  302. if (me.maximized) {
  303. me.hasSavedRestore = true;
  304. me.restoreSize = state.size;
  305. me.restorePos = state.pos;
  306. } else {
  307. Ext.apply(me, {
  308. width: state.size.width,
  309. height: state.size.height,
  310. x: state.pos[0],
  311. y: state.pos[1]
  312. });
  313. }
  314. }
  315. },
  316. // private
  317. onMouseDown: function (e) {
  318. var preventFocus;
  319. if (this.floating) {
  320. if (Ext.fly(e.getTarget()).focusable()) {
  321. preventFocus = true;
  322. }
  323. this.toFront(preventFocus);
  324. }
  325. },
  326. // private
  327. onRender: function(ct, position) {
  328. var me = this;
  329. me.callParent(arguments);
  330. me.focusEl = me.el;
  331. // Double clicking a header will toggleMaximize
  332. if (me.maximizable) {
  333. me.header.on({
  334. scope: me,
  335. dblclick: me.toggleMaximize
  336. });
  337. }
  338. },
  339. // private
  340. afterRender: function() {
  341. var me = this,
  342. keyMap;
  343. me.callParent();
  344. // Initialize
  345. if (me.maximized) {
  346. me.maximized = false;
  347. me.maximize();
  348. }
  349. if (me.closable) {
  350. keyMap = me.getKeyMap();
  351. keyMap.on(27, me.onEsc, me);
  352. } else {
  353. keyMap = me.keyMap;
  354. }
  355. if (keyMap &amp;&amp; me.hidden) {
  356. keyMap.disable();
  357. }
  358. },
  359. <span id='Ext-window-Window-method-initDraggable'> /**
  360. </span> * @private
  361. * Override Component.initDraggable.
  362. * Window uses the header element as the delegate.
  363. */
  364. initDraggable: function() {
  365. var me = this,
  366. ddConfig;
  367. if (!me.header) {
  368. me.updateHeader(true);
  369. }
  370. /*
  371. * Check the header here again. If for whatever reason it wasn't created in
  372. * updateHeader (we were configured with header: false) then we'll just ignore the rest since the
  373. * header acts as the drag handle.
  374. */
  375. if (me.header) {
  376. ddConfig = Ext.applyIf({
  377. el: me.el,
  378. delegate: '#' + Ext.escapeId(me.header.id)
  379. }, me.draggable);
  380. // Add extra configs if Window is specified to be constrained
  381. if (me.constrain || me.constrainHeader) {
  382. ddConfig.constrain = me.constrain;
  383. ddConfig.constrainDelegate = me.constrainHeader;
  384. ddConfig.constrainTo = me.constrainTo || me.container;
  385. }
  386. <span id='Ext-window-Window-property-dd'> /**
  387. </span> * @property {Ext.util.ComponentDragger} dd
  388. * If this Window is configured {@link #cfg-draggable}, this property will contain an instance of
  389. * {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker}) which handles dragging
  390. * the Window's DOM Element, and constraining according to the {@link #constrain} and {@link #constrainHeader} .
  391. *
  392. * This has implementations of `onBeforeStart`, `onDrag` and `onEnd` which perform the dragging action. If
  393. * extra logic is needed at these points, use {@link Ext.Function#createInterceptor createInterceptor} or
  394. * {@link Ext.Function#createSequence createSequence} to augment the existing implementations.
  395. */
  396. me.dd = new Ext.util.ComponentDragger(this, ddConfig);
  397. me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
  398. }
  399. },
  400. // private
  401. onEsc: function(k, e) {
  402. // Only process ESC if the FocusManager is not doing it
  403. if (!Ext.FocusManager || !Ext.FocusManager.enabled || Ext.FocusManager.focusedCmp === this) {
  404. e.stopEvent();
  405. this.close();
  406. }
  407. },
  408. // private
  409. beforeDestroy: function() {
  410. var me = this;
  411. if (me.rendered) {
  412. delete this.animateTarget;
  413. me.hide();
  414. Ext.destroy(
  415. me.keyMap
  416. );
  417. }
  418. me.callParent();
  419. },
  420. <span id='Ext-window-Window-method-addTools'> /**
  421. </span> * @private
  422. * Contribute class-specific tools to the header.
  423. * Called by Panel's initTools.
  424. */
  425. addTools: function() {
  426. var me = this;
  427. // Call Panel's initTools
  428. me.callParent();
  429. if (me.minimizable) {
  430. me.addTool({
  431. type: 'minimize',
  432. handler: Ext.Function.bind(me.minimize, me, [])
  433. });
  434. }
  435. if (me.maximizable) {
  436. me.addTool({
  437. type: 'maximize',
  438. handler: Ext.Function.bind(me.maximize, me, [])
  439. });
  440. me.addTool({
  441. type: 'restore',
  442. handler: Ext.Function.bind(me.restore, me, []),
  443. hidden: true
  444. });
  445. }
  446. },
  447. <span id='Ext-window-Window-method-getFocusEl'> /**
  448. </span> * @private
  449. * Returns the focus holder element associated with this Window. By default, this is the Window's element.
  450. * @returns {Ext.Element/Ext.Component} the focus holding element or Component.
  451. */
  452. getFocusEl: function() {
  453. return this.getDefaultFocus();
  454. },
  455. <span id='Ext-window-Window-method-getDefaultFocus'> /**
  456. </span> * Gets the configured default focus item. If a {@link #defaultFocus} is set, it will
  457. * receive focus when the Window's &lt;code&gt;focus&lt;/code&gt; method is called, otherwise the
  458. * Window itself will receive focus.
  459. */
  460. getDefaultFocus: function() {
  461. var me = this,
  462. result,
  463. defaultComp = me.defaultButton || me.defaultFocus,
  464. selector;
  465. if (defaultComp !== undefined) {
  466. // Number is index of Button
  467. if (Ext.isNumber(defaultComp)) {
  468. result = me.query('button')[defaultComp];
  469. }
  470. // String is ID or CQ selector
  471. else if (Ext.isString(defaultComp)) {
  472. selector = defaultComp;
  473. // Try id/itemId match if selector begins with alphanumeric
  474. if (selector.match(me.initialAlphaNum)) {
  475. result = me.down('#' + selector);
  476. }
  477. // If not found, use as selector
  478. if (!result) {
  479. result = me.down(selector);
  480. }
  481. }
  482. // Otherwise, if it's got a focus method, use it
  483. else if (defaultComp.focus) {
  484. result = defaultComp;
  485. }
  486. }
  487. return result || me.el;
  488. },
  489. <span id='Ext-window-Window-method-onFocus'> /**
  490. </span> * @private
  491. * Called when a Component's focusEl receives focus.
  492. * If there is a valid default focus Component to jump to, focus that,
  493. * otherwise continue as usual, focus this Component.
  494. */
  495. onFocus: function() {
  496. var me = this,
  497. focusDescendant;
  498. // If the FocusManager is enabled, then we must noy jumpt to focus the default focus. We must focus the Window
  499. if ((Ext.FocusManager &amp;&amp; Ext.FocusManager.enabled) || ((focusDescendant = me.getDefaultFocus()) === me)) {
  500. me.callParent(arguments);
  501. } else {
  502. focusDescendant.focus();
  503. }
  504. },
  505. beforeLayout: function () {
  506. var shadow = this.el.shadow;
  507. this.callParent();
  508. if (shadow) {
  509. shadow.hide();
  510. }
  511. },
  512. onShow: function() {
  513. var me = this;
  514. me.callParent(arguments);
  515. if (me.expandOnShow) {
  516. me.expand(false);
  517. }
  518. me.syncMonitorWindowResize();
  519. if (me.keyMap) {
  520. me.keyMap.enable();
  521. }
  522. },
  523. // private
  524. doClose: function() {
  525. var me = this;
  526. // Being called as callback after going through the hide call below
  527. if (me.hidden) {
  528. me.fireEvent('close', me);
  529. if (me.closeAction == 'destroy') {
  530. this.destroy();
  531. }
  532. } else {
  533. // close after hiding
  534. me.hide(me.animateTarget, me.doClose, me);
  535. }
  536. },
  537. // private
  538. afterHide: function() {
  539. var me = this;
  540. // No longer subscribe to resizing now that we're hidden
  541. me.syncMonitorWindowResize();
  542. // Turn off keyboard handling once window is hidden
  543. if (me.keyMap) {
  544. me.keyMap.disable();
  545. }
  546. // Perform superclass's afterHide tasks.
  547. me.callParent(arguments);
  548. },
  549. // private
  550. onWindowResize: function() {
  551. var me = this,
  552. sizeModel;
  553. if (me.maximized) {
  554. me.fitContainer();
  555. } else {
  556. sizeModel = me.getSizeModel();
  557. if (sizeModel.width.natural || sizeModel.height.natural) {
  558. me.updateLayout();
  559. }
  560. }
  561. me.doConstrain();
  562. },
  563. <span id='Ext-window-Window-method-minimize'> /**
  564. </span> * Placeholder method for minimizing the window. By default, this method simply fires the {@link #event-minimize} event
  565. * since the behavior of minimizing a window is application-specific. To implement custom minimize behavior, either
  566. * the minimize event can be handled or this method can be overridden.
  567. * @return {Ext.window.Window} this
  568. */
  569. minimize: function() {
  570. this.fireEvent('minimize', this);
  571. return this;
  572. },
  573. afterCollapse: function() {
  574. var me = this;
  575. if (me.maximizable) {
  576. me.tools.maximize.hide();
  577. me.tools.restore.hide();
  578. }
  579. if (me.resizer) {
  580. me.resizer.disable();
  581. }
  582. me.callParent(arguments);
  583. },
  584. afterExpand: function() {
  585. var me = this;
  586. if (me.maximized) {
  587. me.tools.restore.show();
  588. } else if (me.maximizable) {
  589. me.tools.maximize.show();
  590. }
  591. if (me.resizer) {
  592. me.resizer.enable();
  593. }
  594. me.callParent(arguments);
  595. },
  596. <span id='Ext-window-Window-method-maximize'> /**
  597. </span> * Fits the window within its current container and automatically replaces the {@link #maximizable 'maximize' tool
  598. * button} with the 'restore' tool button. Also see {@link #toggleMaximize}.
  599. * @return {Ext.window.Window} this
  600. */
  601. maximize: function() {
  602. var me = this;
  603. if (!me.maximized) {
  604. me.expand(false);
  605. if (!me.hasSavedRestore) {
  606. me.restoreSize = me.getSize();
  607. me.restorePos = me.getPosition(true);
  608. }
  609. if (me.maximizable) {
  610. me.tools.maximize.hide();
  611. me.tools.restore.show();
  612. }
  613. me.maximized = true;
  614. me.el.disableShadow();
  615. if (me.dd) {
  616. me.dd.disable();
  617. }
  618. if (me.resizer) {
  619. me.resizer.disable();
  620. }
  621. if (me.collapseTool) {
  622. me.collapseTool.hide();
  623. }
  624. me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
  625. me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');
  626. me.syncMonitorWindowResize();
  627. me.fitContainer();
  628. me.fireEvent('maximize', me);
  629. }
  630. return me;
  631. },
  632. <span id='Ext-window-Window-method-restore'> /**
  633. </span> * Restores a {@link #maximizable maximized} window back to its original size and position prior to being maximized
  634. * and also replaces the 'restore' tool button with the 'maximize' tool button. Also see {@link #toggleMaximize}.
  635. * @return {Ext.window.Window} this
  636. */
  637. restore: function() {
  638. var me = this,
  639. tools = me.tools;
  640. if (me.maximized) {
  641. delete me.hasSavedRestore;
  642. me.removeCls(Ext.baseCSSPrefix + 'window-maximized');
  643. // Toggle tool visibility
  644. if (tools.restore) {
  645. tools.restore.hide();
  646. }
  647. if (tools.maximize) {
  648. tools.maximize.show();
  649. }
  650. if (me.collapseTool) {
  651. me.collapseTool.show();
  652. }
  653. me.maximized = false;
  654. // Restore the position/sizing
  655. me.setPosition(me.restorePos);
  656. me.setSize(me.restoreSize);
  657. // Unset old position/sizing
  658. delete me.restorePos;
  659. delete me.restoreSize;
  660. me.el.enableShadow(true);
  661. // Allow users to drag and drop again
  662. if (me.dd) {
  663. me.dd.enable();
  664. }
  665. if (me.resizer) {
  666. me.resizer.enable();
  667. }
  668. me.container.removeCls(Ext.baseCSSPrefix + 'window-maximized-ct');
  669. me.syncMonitorWindowResize();
  670. me.doConstrain();
  671. me.fireEvent('restore', me);
  672. }
  673. return me;
  674. },
  675. <span id='Ext-window-Window-method-syncMonitorWindowResize'> /**
  676. </span> * Synchronizes the presence of our listener for window resize events. This method
  677. * should be called whenever this status might change.
  678. * @private
  679. */
  680. syncMonitorWindowResize: function () {
  681. var me = this,
  682. currentlyMonitoring = me._monitoringResize,
  683. // all the states where we should be listening to window resize:
  684. yes = me.monitorResize || me.constrain || me.constrainHeader || me.maximized,
  685. // all the states where we veto this:
  686. veto = me.hidden || me.destroying || me.isDestroyed;
  687. if (yes &amp;&amp; !veto) {
  688. // we should be listening...
  689. if (!currentlyMonitoring) {
  690. // but we aren't, so set it up
  691. Ext.EventManager.onWindowResize(me.onWindowResize, me);
  692. me._monitoringResize = true;
  693. }
  694. } else if (currentlyMonitoring) {
  695. // we should not be listening, but we are, so tear it down
  696. Ext.EventManager.removeResizeListener(me.onWindowResize, me);
  697. me._monitoringResize = false;
  698. }
  699. },
  700. <span id='Ext-window-Window-method-toggleMaximize'> /**
  701. </span> * A shortcut method for toggling between {@link #method-maximize} and {@link #method-restore} based on the current maximized
  702. * state of the window.
  703. * @return {Ext.window.Window} this
  704. */
  705. toggleMaximize: function() {
  706. return this[this.maximized ? 'restore': 'maximize']();
  707. }
  708. });
  709. </pre>
  710. </body>
  711. </html>