Jx.Dialog

A Jx.Dialog implements a floating dialog. Dialogs represent a useful way to present users with certain information or application controls. Jx.Dialog is designed to provide the same types of features as traditional operating system dialog boxes, including:

dialogs may be modal (user must dismiss the dialog to continue) or non-modal
dialogs are movable (user can drag the title bar to move the dialog around)
dialogs may be a fixed size or allow user resizing.

Jx.Dialog uses Jx.ContentLoader to load content into the content area of the dialog. Refer to the Jx.ContentLoader documentation for details on content options.

Example

var dialog = new Jx.Dialog();

Events

open	triggered when the dialog is opened
close	triggered when the dialog is closed
change	triggered when the value of an input in the dialog is changed
resize	triggered when the dialog is resized

Extends

Jx.Dialog extends Jx.Panel, please go there for more details.

License

This file is licensed under an MIT style license

Summary

Jx.Dialog	Extends: Jx.Panel
Properties
{HTMLElement} blanket	modal dialogs prevent interaction with the rest of the application while they are open, this element is displayed just under the dialog to prevent the user from clicking anything.
Options
modal	(optional) {Boolean} controls whether the dialog will be modal or not.
width	(optional) {Integer} the initial width in pixels of the dialog.
height	(optional) {Integer} the initial height in pixels of the dialog.
horizontal	(optional) {String} the horizontal rule for positioning the dialog.
vertical	(optional) {String} the vertical rule for positioning the dialog.
label	(optional) {String} the title of the dialog box.
id	(optional) {String} an HTML ID to assign to the dialog, primarily used for applying CSS styles to specific dialogs
parent	(optional) {HTMLElement} a reference to an HTML element that the dialog is to be contained by.
resize	(optional) {Boolean} determines whether the dialog is resizeable by the user or not.
resizeTooltip	the tooltip to display for the resize handle, empty by default.
move	(optional) {Boolean} determines whether the dialog is moveable by the user or not.
close	(optional) {Boolean} determines whether the dialog is closeable by the user or not.
Constructor
Jx.Dialog	Construct a new instance of Jx.Dialog
Options
<Jx.Dialog.Options>, <Jx.Panel.Options>, <Jx.ContentLoader.Options>
Functions
resize	resize the dialog.
sizeChanged	overload panel’s sizeChanged method
toggleCollapse	sets or toggles the collapsed state of the panel.
show	show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible.
hide	hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog.
openURL	open the dialog and load content from the provided url.
open	open the dialog.
close	close the dialog and trigger the onClose callback function if necessary

Properties

{HTMLElement} blanket

modal dialogs prevent interaction with the rest of the application while they are open, this element is displayed just under the dialog to prevent the user from clicking anything.

Options

modal

(optional) {Boolean} controls whether the dialog will be modal or not. The default is to create modal dialogs.

width

(optional) {Integer} the initial width in pixels of the dialog. The default value is 250 if not specified.

height

(optional) {Integer} the initial height in pixels of the dialog. The default value is 250 if not specified.

horizontal

(optional) {String} the horizontal rule for positioning the dialog. The default is ‘center center’ meaning the dialog will be centered on the page. See {Jx.AutoPosition} for details.

vertical

(optional) {String} the vertical rule for positioning the dialog. The default is ‘center center’ meaning the dialog will be centered on the page. See {Jx.AutoPosition} for details.

label

(optional) {String} the title of the dialog box. “New Dialog” is the default value.

id

(optional) {String} an HTML ID to assign to the dialog, primarily used for applying CSS styles to specific dialogs

parent

(optional) {HTMLElement} a reference to an HTML element that the dialog is to be contained by. The default value is for the dialog to be contained by the body element.

resize

(optional) {Boolean} determines whether the dialog is resizeable by the user or not. Default is false.

resizeTooltip

the tooltip to display for the resize handle, empty by default.

move

(optional) {Boolean} determines whether the dialog is moveable by the user or not. Default is true.

close

(optional) {Boolean} determines whether the dialog is closeable by the user or not. Default is true.

Constructor

Jx.Dialog

Construct a new instance of Jx.Dialog

Parameters

options

{Object} an object containing options for the dialog.

Options

<Jx.Dialog.Options>, <Jx.Panel.Options>, <Jx.ContentLoader.Options>

Functions

resize

resize: function( width,
height,
autoPosition )

resize the dialog. This can be called when the dialog is closed or open.

Parameters

width	the new width
height	the new height
autoPosition	boolean, false by default, if resizing an open dialog setting this to true will reposition it according to its position rules.

sizeChanged

sizeChanged: function()

overload panel’s sizeChanged method

toggleCollapse

toggleCollapse: function( state )

sets or toggles the collapsed state of the panel. If a new state is passed, it is used, otherwise the current state is toggled.

Parameters

state

optional, if passed then the state is used, otherwise the state is toggled.

show

show : function( )

show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible.

hide

hide : function()

hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog.

openURL

openURL: function( url )

open the dialog and load content from the provided url. If you don’t provide a URL then the dialog opens normally.

Parameters

url	<String> the url to load when opening.

open

open: function()

open the dialog. This may be delayed depending on the asynchronous loading of dialog content. The onOpen callback function is called when the dialog actually opens

close

close: function()

close the dialog and trigger the onClose callback function if necessary