Skip to main content

Configuration

dhtmlxWindow provides a set of configuration options you can define in the constructor of the component before its initialization. It's possible to set a title into the header of a window, add a footer with controls, specify the sizes of a window and decide whether it should be resizable, movable or modal, set some HTML content and define other useful settings to adapt the component to your needs.

Closability#

There is the closable property that adds a Close button into the right top part of a window to allow a user to close a window on clicking it. This option is set to true by default.

var dhxWindow = new dhx.Window({    closable:false});

Related sample: Window. Closable Window

Custom node#

To place a window into a custom node you need to specify the container for a window via the node property:

var dhxWindow = new dhx.Window({    node:"customDiv"});

Related sample: Window. Window Container

note

If no HTML container is specified, the window will be placed in the body.

Footer#

You can provide a window with a footer that will include some additional controls for manipulating the content.

var dhxWindow = new dhx.Window({    footer:true});

Related sample: Window. Window With Footer

By default a footer is initialized with no controls. To add a control into the footer, you need to manipulate the footer object of the toolbar. Follow the instructions given in the Customization article.

Modality#

It is possible to make a window modal, if there's a necessity. Use the modal property to turn this functionality on:

var dhxWindow = new dhx.Window({    modal:true});

Related sample: Window. Modal Window

A modal window blocks the main window on its calling. It means that only the modal window remains active, while the main window becomes gray and unresponsive.

Movability#

To equip a window with the ability to be moved around the screen, you should set the movable property to true:

var dhxWindow = new dhx.Window({    movable:true});

Related sample: Window. Movable Window

Overflowing browser window#

By default, a window can't cross the borders of a browser window. To enable such a possibility, make use of the viewportOverflow configuration property.

var dhxWindow = new dhx.Window({    viewportOverflow:true});

Related sample: Window. Viewport Overflow

note

The property makes sense when set together with the movable property.

Resizing#

The default window has fixed sizes with no possibility to change them from UI. You can switch on the corresponding configuration option to make a window resizable.

var dhxWindow = new dhx.Window({    resizable:true});

Related sample: Window. Resizable Window.

Then you will be able to regulate the sizes of a window by dragging resizers that appear on hovering sides of a window.

note

To define the resizing limits, set necessary values to the minWidth / minHeight properties.

Setting HTML content#

You can set some HTML content into a window via the html configuration option, as in:

var dhxWindow = new dhx.Window({    htmlContent:"<h1>Header</h1><p>paragraph</p>"});

Sizing#

You can adjust the size of a window via a set of options that define both the initial width and height of a window and the minimal dimensions of the component.

var dhxWindow = new dhx.Window({    width:250,    height:250,    minWidth:170,    minHeight:170});

Related sample: Window. Resizable Window.

Default values of the size-related properties are:

Title#

dhtmlxWindow is initialized with an empty header. You can provide some text label for the header of the window via the title property.

var dhxWindow = new dhx.Window({    title: "DHX Window"});

The header can also contain some buttons. You can control them via the header object of the window. Check details in the Customization article.