| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826 | <!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>The source code</title>  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>  <style type="text/css">    .highlight { display: block; background-color: #ddd; }  </style>  <script type="text/javascript">    function highlight() {      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";    }  </script></head><body onload="prettyPrint(); highlight();">  <pre class="prettyprint lang-js"><span id='Ext-window-Window'>/**</span> * A specialized panel intended for use as an application window. Windows are floated, {@link #resizable}, and * {@link #cfg-draggable} by default. Windows can be {@link #maximizable maximized} to fill the viewport, restored to * their prior size, and can be {@link #method-minimize}d. * * Windows can also be linked to a {@link Ext.ZIndexManager} or managed by the {@link Ext.WindowManager} to provide * grouping, activation, to front, to back and other application-specific behavior. * * By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element specify * {@link Ext.Component#renderTo renderTo}. * * **As with all {@link Ext.container.Container Container}s, it is important to consider how you want the Window to size * and arrange any child Components. Choose an appropriate {@link #layout} configuration which lays out child Components * in the required manner.** * *     @example *     Ext.create('Ext.window.Window', { *         title: 'Hello', *         height: 200, *         width: 400, *         layout: 'fit', *         items: {  // Let's put an empty grid in just to illustrate fit layout *             xtype: 'grid', *             border: false, *             columns: [{header: 'World'}],                 // One header just for show. There's no data, *             store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store *         } *     }).show(); */Ext.define('Ext.window.Window', {    extend: 'Ext.panel.Panel',    alternateClassName: 'Ext.Window',    requires: ['Ext.util.ComponentDragger', 'Ext.util.Region', 'Ext.EventManager'],    alias: 'widget.window',<span id='Ext-window-Window-cfg-x'>    /**</span>     * @cfg {Number} x     * The X position of the left edge of the window on initial showing. Defaults to centering the Window within the     * width of the Window's container {@link Ext.Element Element} (The Element that the Window is rendered to).     */<span id='Ext-window-Window-cfg-y'>    /**</span>     * @cfg {Number} y     * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within the     * height of the Window's container {@link Ext.Element Element} (The Element that the Window is rendered to).     */<span id='Ext-window-Window-cfg-modal'>    /**</span>     * @cfg {Boolean} [modal=false]     * True to make the window modal and mask everything behind it when displayed, false to display it without     * restricting access to other UI elements.     */<span id='Ext-window-Window-cfg-animateTarget'>    /**</span>     * @cfg {String/Ext.Element} [animateTarget=null]     * Id or element from which the window should animate while opening.     */<span id='Ext-window-Window-cfg-defaultFocus'>    /**</span>     * @cfg {String/Number/Ext.Component} defaultFocus     * Specifies a Component to receive focus when this Window is focused.     *     * This may be one of:     *     *   - The index of a footer Button.     *   - The id or {@link Ext.AbstractComponent#itemId} of a descendant Component.     *   - A Component.     */<span id='Ext-window-Window-cfg-onEsc'>    /**</span>     * @cfg {Function} onEsc     * Allows override of the built-in processing for the escape key. Default action is to close the Window (performing     * whatever action is specified in {@link #closeAction}. To prevent the Window closing when the escape key is     * pressed, specify this as {@link Ext#emptyFn Ext.emptyFn}.     */<span id='Ext-window-Window-cfg-collapsed'>    /**</span>     * @cfg {Boolean} [collapsed=false]     * True to render the window collapsed, false to render it expanded. Note that if {@link #expandOnShow}     * is true (the default) it will override the `collapsed` config and the window will always be     * expanded when shown.     */<span id='Ext-window-Window-cfg-maximized'>    /**</span>     * @cfg {Boolean} [maximized=false]     * True to initially display the window in a maximized state.     */<span id='Ext-window-Window-cfg-baseCls'>    /**</span>    * @cfg {String} [baseCls='x-window']    * The base CSS class to apply to this panel's element.    */    baseCls: Ext.baseCSSPrefix + 'window',<span id='Ext-window-Window-cfg-resizable'>    /**</span>     * @cfg {Boolean/Object} resizable     * Specify as `true` to allow user resizing at each edge and corner of the window, false to disable resizing.     *     * This may also be specified as a config object to Ext.resizer.Resizer     */    resizable: true,<span id='Ext-window-Window-cfg-draggable'>    /**</span>     * @cfg {Boolean} draggable     * True to allow the window to be dragged by the header bar, false to disable dragging. Note that     * by default the window will be centered in the viewport, so if dragging is disabled the window may need to be     * positioned programmatically after render (e.g., myWindow.setPosition(100, 100);).     */    draggable: true,<span id='Ext-window-Window-cfg-constrain'>    /**</span>     * @cfg {Boolean} constrain     * True to constrain the window within its containing element, false to allow it to fall outside of its containing     * element. By default the window will be rendered to document.body. To render and constrain the window within     * another element specify {@link #renderTo}. Optionally the header only can be constrained     * using {@link #constrainHeader}.     */    constrain: false,<span id='Ext-window-Window-cfg-constrainHeader'>    /**</span>     * @cfg {Boolean} constrainHeader     * True to constrain the window header within its containing element (allowing the window body to fall outside of     * its containing element) or false to allow the header to fall outside its containing element.     * Optionally the entire window can be constrained using {@link #constrain}.     */    constrainHeader: false,<span id='Ext-window-Window-cfg-constrainTo'>    /**</span>     * @cfg {Ext.util.Region/Ext.Element} constrainTo     * A {@link Ext.util.Region Region} (or an element from which a Region measurement will be read) which is used     * to constrain the window.     */<span id='Ext-window-Window-cfg-plain'>    /**</span>     * @cfg {Boolean} plain     * True to render the window body with a transparent background so that it will blend into the framing elements,     * false to add a lighter background color to visually highlight the body element and separate it more distinctly     * from the surrounding frame.     */    plain: false,<span id='Ext-window-Window-cfg-minimizable'>    /**</span>     * @cfg {Boolean} minimizable     * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button     * and disallow minimizing the window. Note that this button provides no implementation -- the     * behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a custom     * minimize behavior implemented for this option to be useful.     */    minimizable: false,<span id='Ext-window-Window-cfg-maximizable'>    /**</span>     * @cfg {Boolean} maximizable     * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button     * and disallow maximizing the window. Note that when a window is maximized, the tool button     * will automatically change to a 'restore' button with the appropriate behavior already built-in that will restore     * the window to its previous size.     */    maximizable: false,    // inherit docs    minHeight: 50,    // inherit docs    minWidth: 50,<span id='Ext-window-Window-cfg-expandOnShow'>    /**</span>     * @cfg {Boolean} expandOnShow     * True to always expand the window when it is displayed, false to keep it in its current state (which may be     * {@link #collapsed}) when displayed.     */    expandOnShow: true,    // inherited docs, same default    collapsible: false,<span id='Ext-window-Window-cfg-closable'>    /**</span>     * @cfg {Boolean} closable     * True to display the 'close' tool button and allow the user to close the window, false to hide the button and     * disallow closing the window.     *     * By default, when close is requested by either clicking the close button in the header or pressing ESC when the     * Window has focus, the {@link #method-close} method will be called. This will _{@link Ext.Component#method-destroy destroy}_ the     * Window and its content meaning that it may not be reused.     *     * To make closing a Window _hide_ the Window so that it may be reused, set {@link #closeAction} to 'hide'.     */    closable: true,<span id='Ext-window-Window-cfg-hidden'>    /**</span>     * @cfg {Boolean} hidden     * Render this Window hidden. If `true`, the {@link #method-hide} method will be called internally.     */    hidden: true,<span id='Ext-window-Window-cfg-autoRender'>    /**</span>     * @cfg     * @inheritdoc     * Windows render to the body on first show.     */    autoRender: true,<span id='Ext-window-Window-cfg-hideMode'>    /**</span>     * @cfg     * @inheritdoc     * Windows hide using offsets in order to preserve the scroll positions of their descendants.     */    hideMode: 'offsets',<span id='Ext-window-Window-cfg-floating'>    /**</span>     * @cfg     * @private     */    floating: true,    ariaRole: 'alertdialog',    itemCls: Ext.baseCSSPrefix + 'window-item',        initialAlphaNum: /^[a-z0-9]/,    overlapHeader: true,    ignoreHeaderBorderManagement: true,    // Flag to Renderable to always look up the framing styles for this Component    alwaysFramed: true,<span id='Ext-window-Window-property-isWindow'>    /**</span>     * @property {Boolean} isWindow     * `true` in this class to identify an object as an instantiated Window, or subclass thereof.     */    isWindow: true,    // private    initComponent: function() {        var me = this;        // Explicitly set frame to false, since alwaysFramed is        // true, we only want to lookup framing in a specific instance        me.frame = false;        me.callParent();        me.addEvents(<span id='Ext-window-Window-event-activate'>            /**</span>             * @event activate             * Fires after the window has been visually activated via {@link #setActive}.             * @param {Ext.window.Window} this             */<span id='Ext-window-Window-event-deactivate'>            /**</span>             * @event deactivate             * Fires after the window has been visually deactivated via {@link #setActive}.             * @param {Ext.window.Window} this             */<span id='Ext-window-Window-event-resize'>            /**</span>             * @event resize             * Fires after the window has been resized.             * @param {Ext.window.Window} this             * @param {Number} width The window's new width             * @param {Number} height The window's new height             */            'resize',<span id='Ext-window-Window-event-maximize'>            /**</span>             * @event maximize             * Fires after the window has been maximized.             * @param {Ext.window.Window} this             */            'maximize',<span id='Ext-window-Window-event-minimize'>            /**</span>             * @event minimize             * Fires after the window has been minimized.             * @param {Ext.window.Window} this             */            'minimize',<span id='Ext-window-Window-event-restore'>            /**</span>             * @event restore             * Fires after the window has been restored to its original size after being maximized.             * @param {Ext.window.Window} this             */            'restore'        );        if (me.plain) {            me.addClsWithUI('plain');        }        if (me.modal) {            me.ariaRole = 'dialog';        }        // clickToRaise        if (me.floating) {            me.on({                element: 'el',                mousedown: me.onMouseDown,                scope: me            });        }        me.addStateEvents(['maximize', 'restore', 'resize', 'dragend']);    },    getElConfig: function () {        var me = this,            elConfig;        elConfig = me.callParent();        elConfig.tabIndex = -1;        return elConfig;    },    // State Management    // private    getState: function() {        var me = this,            state = me.callParent() || {},            maximized = !!me.maximized;        state.maximized = maximized;        Ext.apply(state, {            size: maximized ? me.restoreSize : me.getSize(),            pos: maximized ? me.restorePos : me.getPosition()        });        return state;    },    applyState: function(state){        var me = this;        if (state) {            me.maximized = state.maximized;            if (me.maximized) {                me.hasSavedRestore = true;                me.restoreSize = state.size;                me.restorePos = state.pos;            } else {                Ext.apply(me, {                    width: state.size.width,                    height: state.size.height,                    x: state.pos[0],                    y: state.pos[1]                });            }        }    },    // private    onMouseDown: function (e) {        var preventFocus;                    if (this.floating) {            if (Ext.fly(e.getTarget()).focusable()) {                preventFocus = true;            }            this.toFront(preventFocus);        }    },    // private    onRender: function(ct, position) {        var me = this;        me.callParent(arguments);        me.focusEl = me.el;        // Double clicking a header will toggleMaximize        if (me.maximizable) {            me.header.on({                scope: me,                dblclick: me.toggleMaximize            });        }    },    // private    afterRender: function() {        var me = this,            keyMap;        me.callParent();        // Initialize        if (me.maximized) {            me.maximized = false;            me.maximize();        }        if (me.closable) {            keyMap = me.getKeyMap();            keyMap.on(27, me.onEsc, me);        } else {            keyMap = me.keyMap;        }        if (keyMap && me.hidden) {            keyMap.disable();        }    },<span id='Ext-window-Window-method-initDraggable'>    /**</span>     * @private     * Override Component.initDraggable.     * Window uses the header element as the delegate.     */    initDraggable: function() {        var me = this,            ddConfig;        if (!me.header) {            me.updateHeader(true);        }        /*         * Check the header here again. If for whatever reason it wasn't created in         * updateHeader (we were configured with header: false) then we'll just ignore the rest since the         * header acts as the drag handle.         */        if (me.header) {            ddConfig = Ext.applyIf({                el: me.el,                delegate: '#' + Ext.escapeId(me.header.id)            }, me.draggable);            // Add extra configs if Window is specified to be constrained            if (me.constrain || me.constrainHeader) {                ddConfig.constrain = me.constrain;                ddConfig.constrainDelegate = me.constrainHeader;                ddConfig.constrainTo = me.constrainTo || me.container;            }<span id='Ext-window-Window-property-dd'>            /**</span>             * @property {Ext.util.ComponentDragger} dd             * If this Window is configured {@link #cfg-draggable}, this property will contain an instance of             * {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker}) which handles dragging             * the Window's DOM Element, and constraining according to the {@link #constrain} and {@link #constrainHeader} .             *             * This has implementations of `onBeforeStart`, `onDrag` and `onEnd` which perform the dragging action. If             * extra logic is needed at these points, use {@link Ext.Function#createInterceptor createInterceptor} or             * {@link Ext.Function#createSequence createSequence} to augment the existing implementations.             */            me.dd = new Ext.util.ComponentDragger(this, ddConfig);            me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);        }    },    // private    onEsc: function(k, e) {        // Only process ESC if the FocusManager is not doing it        if (!Ext.FocusManager || !Ext.FocusManager.enabled || Ext.FocusManager.focusedCmp === this) {            e.stopEvent();            this.close();        }    },    // private    beforeDestroy: function() {        var me = this;        if (me.rendered) {            delete this.animateTarget;            me.hide();            Ext.destroy(                me.keyMap            );        }        me.callParent();    },<span id='Ext-window-Window-method-addTools'>    /**</span>     * @private     * Contribute class-specific tools to the header.     * Called by Panel's initTools.     */    addTools: function() {        var me = this;        // Call Panel's initTools        me.callParent();        if (me.minimizable) {            me.addTool({                type: 'minimize',                handler: Ext.Function.bind(me.minimize, me, [])            });        }        if (me.maximizable) {            me.addTool({                type: 'maximize',                handler: Ext.Function.bind(me.maximize, me, [])            });            me.addTool({                type: 'restore',                handler: Ext.Function.bind(me.restore, me, []),                hidden: true            });        }    },<span id='Ext-window-Window-method-getFocusEl'>    /**</span>     * @private     * Returns the focus holder element associated with this Window. By default, this is the Window's element.     * @returns {Ext.Element/Ext.Component} the focus holding element or Component.     */    getFocusEl: function() {        return this.getDefaultFocus();    },<span id='Ext-window-Window-method-getDefaultFocus'>    /**</span>     * Gets the configured default focus item.  If a {@link #defaultFocus} is set, it will     * receive focus when the Window's <code>focus</code> method is called, otherwise the     * Window itself will receive focus.     */    getDefaultFocus: function() {        var me = this,            result,            defaultComp = me.defaultButton || me.defaultFocus,            selector;        if (defaultComp !== undefined) {            // Number is index of Button            if (Ext.isNumber(defaultComp)) {                result = me.query('button')[defaultComp];            }            // String is ID or CQ selector            else if (Ext.isString(defaultComp)) {                selector = defaultComp;                                // Try id/itemId match if selector begins with alphanumeric                if (selector.match(me.initialAlphaNum)) {                    result = me.down('#' + selector);                }                // If not found, use as selector                if (!result) {                    result = me.down(selector);                }            }            // Otherwise, if it's got a focus method, use it            else if (defaultComp.focus) {                result = defaultComp;            }        }        return result || me.el;    },<span id='Ext-window-Window-method-onFocus'>    /**</span>     * @private     * Called when a Component's focusEl receives focus.     * If there is a valid default focus Component to jump to, focus that,     * otherwise continue as usual, focus this Component.     */    onFocus: function() {        var me = this,            focusDescendant;        // If the FocusManager is enabled, then we must noy jumpt to focus the default focus. We must focus the Window        if ((Ext.FocusManager && Ext.FocusManager.enabled) || ((focusDescendant = me.getDefaultFocus()) === me)) {            me.callParent(arguments);        } else {            focusDescendant.focus();        }    },    beforeLayout: function () {        var shadow = this.el.shadow;        this.callParent();        if (shadow) {            shadow.hide();        }    },    onShow: function() {        var me = this;        me.callParent(arguments);        if (me.expandOnShow) {            me.expand(false);        }        me.syncMonitorWindowResize();        if (me.keyMap) {            me.keyMap.enable();        }   },    // private    doClose: function() {        var me = this;        // Being called as callback after going through the hide call below        if (me.hidden) {            me.fireEvent('close', me);            if (me.closeAction == 'destroy') {                this.destroy();            }        } else {            // close after hiding            me.hide(me.animateTarget, me.doClose, me);        }    },    // private    afterHide: function() {        var me = this;        // No longer subscribe to resizing now that we're hidden        me.syncMonitorWindowResize();        // Turn off keyboard handling once window is hidden        if (me.keyMap) {            me.keyMap.disable();        }        // Perform superclass's afterHide tasks.        me.callParent(arguments);    },    // private    onWindowResize: function() {        var me = this,            sizeModel;        if (me.maximized) {            me.fitContainer();        } else {            sizeModel = me.getSizeModel();            if (sizeModel.width.natural || sizeModel.height.natural) {                me.updateLayout();            }        }        me.doConstrain();    },<span id='Ext-window-Window-method-minimize'>    /**</span>     * Placeholder method for minimizing the window. By default, this method simply fires the {@link #event-minimize} event     * since the behavior of minimizing a window is application-specific. To implement custom minimize behavior, either     * the minimize event can be handled or this method can be overridden.     * @return {Ext.window.Window} this     */    minimize: function() {        this.fireEvent('minimize', this);        return this;    },    afterCollapse: function() {        var me = this;        if (me.maximizable) {            me.tools.maximize.hide();            me.tools.restore.hide();        }        if (me.resizer) {            me.resizer.disable();        }        me.callParent(arguments);    },    afterExpand: function() {        var me = this;        if (me.maximized) {            me.tools.restore.show();        } else if (me.maximizable) {            me.tools.maximize.show();        }        if (me.resizer) {            me.resizer.enable();        }        me.callParent(arguments);    },<span id='Ext-window-Window-method-maximize'>    /**</span>     * Fits the window within its current container and automatically replaces the {@link #maximizable 'maximize' tool     * button} with the 'restore' tool button. Also see {@link #toggleMaximize}.     * @return {Ext.window.Window} this     */    maximize: function() {        var me = this;        if (!me.maximized) {            me.expand(false);            if (!me.hasSavedRestore) {                me.restoreSize = me.getSize();                me.restorePos = me.getPosition(true);            }            if (me.maximizable) {                me.tools.maximize.hide();                me.tools.restore.show();            }            me.maximized = true;            me.el.disableShadow();            if (me.dd) {                me.dd.disable();            }            if (me.resizer) {                me.resizer.disable();            }            if (me.collapseTool) {                me.collapseTool.hide();            }            me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');            me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');            me.syncMonitorWindowResize();            me.fitContainer();            me.fireEvent('maximize', me);        }        return me;    },<span id='Ext-window-Window-method-restore'>    /**</span>     * Restores a {@link #maximizable maximized} window back to its original size and position prior to being maximized     * and also replaces the 'restore' tool button with the 'maximize' tool button. Also see {@link #toggleMaximize}.     * @return {Ext.window.Window} this     */    restore: function() {        var me = this,            tools = me.tools;        if (me.maximized) {            delete me.hasSavedRestore;            me.removeCls(Ext.baseCSSPrefix + 'window-maximized');            // Toggle tool visibility            if (tools.restore) {                tools.restore.hide();            }            if (tools.maximize) {                tools.maximize.show();            }            if (me.collapseTool) {                me.collapseTool.show();            }            me.maximized = false;            // Restore the position/sizing            me.setPosition(me.restorePos);            me.setSize(me.restoreSize);            // Unset old position/sizing            delete me.restorePos;            delete me.restoreSize;            me.el.enableShadow(true);            // Allow users to drag and drop again            if (me.dd) {                me.dd.enable();            }                        if (me.resizer) {                me.resizer.enable();            }            me.container.removeCls(Ext.baseCSSPrefix + 'window-maximized-ct');            me.syncMonitorWindowResize();            me.doConstrain();            me.fireEvent('restore', me);        }        return me;    },<span id='Ext-window-Window-method-syncMonitorWindowResize'>    /**</span>     * Synchronizes the presence of our listener for window resize events. This method     * should be called whenever this status might change.     * @private     */    syncMonitorWindowResize: function () {        var me = this,            currentlyMonitoring = me._monitoringResize,            // all the states where we should be listening to window resize:            yes = me.monitorResize || me.constrain || me.constrainHeader || me.maximized,            // all the states where we veto this:            veto = me.hidden || me.destroying || me.isDestroyed;        if (yes && !veto) {            // we should be listening...            if (!currentlyMonitoring) {                // but we aren't, so set it up                Ext.EventManager.onWindowResize(me.onWindowResize, me);                me._monitoringResize = true;            }        } else if (currentlyMonitoring) {            // we should not be listening, but we are, so tear it down            Ext.EventManager.removeResizeListener(me.onWindowResize, me);            me._monitoringResize = false;        }    },<span id='Ext-window-Window-method-toggleMaximize'>    /**</span>     * A shortcut method for toggling between {@link #method-maximize} and {@link #method-restore} based on the current maximized     * state of the window.     * @return {Ext.window.Window} this     */    toggleMaximize: function() {        return this[this.maximized ? 'restore': 'maximize']();    }});</pre></body></html>
 |