A dialog widget is a div based popup window that contains a title bar and a content area. The dialog widget can be dragged, resized and close with the X icon.If the content height exceeds the maximum height, a scroll bar will come automatically. An overlay can be turned on by setting modal attribute to true.
The simple way to add Dialog widget to the application is as follows
The whole list of configuration parameters is available in Dialog.
Dialog widgets are highly configurable, as user can define callback functions for onOpen and onClose events.
The properties bindable for dialog widget are
If center is set to true, it will have precedence over xpos and ypos, which will be updated according to the actual position of the dialog.
For more information please read the article on widget bindings.
To enable Drag & Drop on a Dialog widget it's enough to set the
movable property to true
It is possible to specify the desired proxy by setting the
movableProxy configuration property:
Overlay: a div the same size as the dialog, using a xOverlay class (see above for comments on the style)
CloneOverlay: a clone of the dialog
The Dialog can only be dragged from its title bar and its movements are constrained to viewport.
The syntax to add listeners on dragstart and dragend is as follow:
It is possible to set the
movableProxy default properties at application level:
Here's a movable dialog example with code:
Resizable dialog allows users to resize the dialog by dragging any corners of the dialog. Dialogue resizing can be enabled by setting "resizable" property to true.