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.

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 toolbar. Check details in the article Customization.

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
});

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 article Customization.

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
});

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
});

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
});

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

Closability

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

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

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
});

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

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

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
});

Default values of the size-related properties are:

  • minWidth - 100
  • minHeight - 100
  • width - 50% of the browser window's width
  • height - 50% of the browser window's height

Setting HTML content

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

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