Initialization

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

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

Related sample:  Window. Basic Initialization

Include source files

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

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

index.html

// creating dhtmlxWindow
var dhxWindow = new dhx.Window({
    modal: false,
    resizable: true,
    movable: true
});
dhxWindow.show();

Related sample:  Window. Basic Initialization

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

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

Configuration properties

You can specify the following properties in the configuration object of Window:

closable defines whether a window can be closed
css adds style classes for the component
footer adds a footer for a window
header adds a header to a window
height sets the height of a window, 50% of the browser window's height by default
html sets an HTML content into a window on initialization
left the left coordinate of a window position
minHeight sets the minimal height of a window, 100 by default
minWidth sets the minimal width of a window, 100 by default
modal defines whether a window is modal
movable defines whether a window is movable
node optional, the container for a window or its id
resizable defines whether a window can be resized
title adds some text into the header of a window
top the top coordinate of a window position
viewportOverflow defines whether a window can go beyond borders of a browser window
width sets the width of a window, 50% of the browser window's width by default

The detailed information on configuration options can be found in the Configuration article.

Set content

There are several ways of adding content into the dhtmlxWindow:

  • by using attachHTML to attach some HTML content into a window on the fly
var dhxWindow = new dhx.Window({title: "Window"});
var html = "<h1>Header</h1><p>paragraph</p>";
dhxWindow.attachHTML(html);
dhxWindow.show();

Related sample:  Window. Attach HTML To Window

  • by calling attach to attach other DHTMLX components
dhxWindow.attach("richtext",{mode: "document"});
dhxWindow.show();

Related sample:  Window. Attaching Other Components

  • via the html property to attach some HTML content into a window before initialization
var dhxWindow = new dhx.Window({
    htmlContent:"<h1>Header</h1><p>paragraph</p>"
});
Back to top