/** * @class Ext.Dialog * @extend Ext.Panel * @xtype dialog * @xtype window * * This class provides a convenient way to display a "popup" component to interact with * the user that is resizable, draggable and closable (similar to a browser popup window, * but contained in the normal Ext JS component tree). This means dialogs are not subject * to the restrictions of browser popup windows, but provide similar modal experiences. * * var dialog = Ext.create({ * xtype: 'dialog', * title: 'Dialog', * * maximizable: true, * html: 'Content<br>goes<br>here', * * buttons: { * ok: function () { // standard button (see below) * dialog.destroy(); * } * } * }); * * dialog.show(); * * The above use of `buttons` is a {@link Ext.Container#cfg!weighted weighted} container. * This form allows the Ext JS config system to merge properties by aligning on `itemId` * as the object keys (`'ok'` in this case). This merging capability enables the use of * `standardButtons` but is also a powerful technique for leveraging class inheritance * in your views. * * ## Standard Buttons * * The main advantage of using the `buttons` config is the availability of * {@link Ext.Panel#cfg!standardButtons standardButtons}. The `standardButtons` config * describes many common buttons (such as `ok` above) and provides their `text` as well * as the proper, platform-specific ordering. * * Custom buttons can be mixed with standard buttons or can fully replace them: * * buttons: { * ok: 'onOK', * * verify: { * text: 'Verify', * handler: 'onVerify', * weight: 200 * } * } * * When combined, custom buttons are presented first. In the above, the `weight` config * is used to order the Verify button after the OK button. The weights assigned to the * {@link Ext.Panel#cfg!standardButtons standardButtons} vary by platform but `200` is * beyond their range. * * ## Handling ESC and Close * * Many dialogs have a `Cancel` button (or equivalent) that closes the dialog without * taking action. In some cases this action is first confirmed to avoid data loss. * * A common problem when implementing dialogs is the presence of these other two means to * dismiss the dialog since they often bypass the button handler that is expected to be * used to achieve an orderly shutdown. * * With `Ext.Dialog`, both the ESC key and `close` tool handler call the `close` method * to dismiss the dialog. The `close` method (and its `closeAction` config) are enhanced * versions of the implementation in `Ext.Panel`. * * The default dismiss sequence uses the `dismissAction` config to identify the candidate * `buttons`. The most common match here is the `Cancel` button. If there is a matching * button then that button's `handler` is called just as if the user had clicked on it * instead. * * The end result is that when using `standardButtons` such as `cancel` or `close`, you * seldom need to worry about ESC or `close` tool inconsistency. The handler for your * button will be called in all cases. * * ### Custom Buttons and Options * * If the dialog has custom buttons, the `dismissHandler` config can be used to direct * `close` to a suitable method. Ideally this would be the same method connected to the * corresponding button. * * buttons: { * goAway: { * text: 'Go Away!', * handler: 'onGoAway' * } * }, * * dismissHandler: 'onGoAway' * * To simply allow the `closeAction` config to call `hide` or `destroy` methods for ESC * and `close`, do the following: * * dismissHandler: true * * The {@link #method!close close method} will fire the {@link #event!beforeclose beforeclose} * and {@link #event!close close} events in any case. Using the `closeAction` approach * exposes dialogs to this alternate shutdown sequence but can be enabled as above for * simple use cases. * * ## Maximize / Restore * * The ability to `maximize` (fill the viewport) with the dialog can be quite useful for * complex popups. This can take two forms: * * - The `maximizable` config to provide a {@link Ext.Tool tool} to `maximize` and also * to `restore` the dialog. * - The `maximized` config to control the current state. * * The `maximized` config can be used directly if the `maximizeTool` is not desired. In * other words, the ability to control the `maximized` config is not dependent on whether * `maximizable` is set or not. * * ### Note * This class is analogous to the Ext JS Classic Toolkit's 'Ext.window.Window' class. This * class has those names (`Ext.Window` and `Ext.window.Window`) as alternate class names * and the `window` xtype for compatibility sake. * @since 6.5.0 */ /** * @property {Boolean} [isDialog=true] * `true` in this class to identify an object this type, or subclass thereof. */ /** * @event beforemaximize * Fires before maximizing the dialog. Returning `false` from this event will cancel * the maximization. * @param {Ext.Dialog} dialog */ /** * @event beforerestore * Fires before restoring the dialog. Returning `false` from this event will cancel * the restoration. * @param {Ext.Dialog} dialog */ /** * @event maximize * Fires after the dialog has been maximized. If there is a `maximizeAnimation` this * event will fire after the animation is complete. * @param {Ext.Dialog} dialog */ /** * @event restore * Fires after the dialog has been restored to its original size. If there is a * `restoreAnimation` this event will fire after the animation is complete. * @param {Ext.Dialog} dialog */ /** * @cfg {String/String[]} [dismissAction=['cancel', 'abort', 'no', 'close']] * This config lists one or more `itemId` values to look for in this dialog's * `buttons`. The first button to be found from this list will be invoked in * response to the ESC key or the `close` tool. * * This config is ignored if a `dismissHandler` is specified. * * @since 6.5.0 */ /** * @cfg {Object} maximizeAnimation * The animation configuration to use when maximizing. * * @since 6.5.0 */ /** * @cfg {Object/Ext.Dialog} maximizeProxy * Configuration options for a proxy dialog to animate to/from maximized state. * The `title`, `iconCls`, `ui`, `cls` and `userCls` will be copied to the proxy. * * @since 6.5.0 */ /** * @cfg {Object/Ext.Tool} maximizeTool * Configuration options for the `maximize` tool. * * @since 6.5.0 */ /** * @cfg {Object} restoreAnimation * The animation configuration to use when restoring to normal size. * * @since 6.5.0 */ /** * @cfg {Object/Ext.Tool} restoreTool * Configuration options for the `restore` tool. * * @since 6.5.0 */ /** * @cfg {Boolean/Ext.drag.Constraint} [constrainDrag=true] * Set to `false` to not constrain the dialog to the viewport. * * @since 6.5.0 * @accessor */ /** * @cfg {String/Function} [dismissHandler] * The function or controller method name to call on ESC key press or `close` * tool click. * * If this config is specified, `dismissAction` will be ignored. * * @controllable * @since 6.5.0 * @accessor */ /** * @cfg {Boolean} [maximizable=false] * Set to `true` to display the 'maximizeTool` to allow the user to maximize the * dialog. Note that when a dialog is maximized, the `maximizeTool` is replaced * with the `restoreTool` to give the user the ability to restore the dialog to * its previous size. * * This config only controls the presence of the `maximize` and `restore` tools. * The dialog can always be set to `maximized` by directly setting the config or * calling the `maximize` and `restore` methods. * * @since 6.5.0 * @accessor */ /** * @cfg {Boolean} [maximized=false] * Set to `true` to display the dialog in a maximized state. Changing this config * after construction will utilize the `maximizeAnimation` or `restoreAnimation`. * * These can be avoided by passing `null` to `maximize` or `restore` methods: * * dialog.setMaximized(true); // uses maximizeAnimation * // or: * dialog.maximize(null); // no animation for this change * * dialog.setMaximized(false); // uses restoreAnimation * // or: * dialog.restore(null); // no animation for this change * * @since 6.5.0 * @accessor */ /** * @cfg {String/Function} maskTapHandler * The function or method name to call when the modal mask is tapped. A common use * for this config is to cancel the dialog. * * Ext.create({ * xtype: 'dialog', * * buttons: { * ok: 'onOK', * cancel: 'onCancel' * }, * * maskTapHandler: 'onCancel' * }); * * @controllable * @since 6.5.0 * @accessor */ /** * @cfg {Boolean} [modal=true] * @inheritdoc */ /** * @cfg {Boolean} [shadow=true] * @inheritdoc */ /** * @cfg buttons * @inheritdoc * @react-child */ /** * @cfg hideAnimation * @inheritdoc */ /** * @cfg showAnimation * @inheritdoc */