Skip to main content

Initialization

info

Download the DHTMLX Window package as a part of the DHTMLX Suite library

To initialize DHTMLX Window on a page, you need to take the following simple steps:

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Window</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <script>
            // creating DHTMLX Window 
            const dhxWindow = new dhx.Window({
                title: "DHX Window",
                modal: false,
                resizable: true,
                movable: true
            });
        </script>
    </body>
</html>

Include source files​

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
index.html
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Initialize Window​

Initialize Window with the dhx.Window object constructor. The constructor takes an optional parameter:

  • an object with configuration properties (see the full list below). If this argument is not passed to the constructor, the settings will be default.
note

Don't use window as a variable name for dhxWindow object, since it is reserved for the browser window.

index.js
// creating DHTMLX Window
const dhxWindow = new dhx.Window({
    modal: false,
    resizable: true,
    movable: true
});
dhxWindow.show();
note

To show a created window on a page, you should call the show() method after initialization of the component.

Configuration properties​

There is a set of properties you can specify for Window to optimize its configuration for your needs.

The detailed information on Window configuration options can be found in the Window API overview article.

Set content​

There are several ways of adding content into the DHTMLX Window:

  • via the html property to attach some HTML content into a window before initialization
  • by using attachHTML() to attach some HTML content into a window on the fly
  • by calling attach() to attach other DHTMLX components