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/window.js"></script>
        <link rel="stylesheet" href="../../codebase/window.css">
    </head>
    <body>
        <script>
            // creating dhtmlxWindow 
            var dhxWindow = new dhx.Window({
                header: "DHX Window",
                modal: false,
                resizable: true,
                movable: true
            });
</script> </body> </html>

Related sample:  metaTitle

Include source files

Create an HTML file and place full paths to CSS and JS files of dhtmlxWindow into the header of the created HTML file. The files are:

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

The structure of the Window package is the following:

  • sources - the source code files of the library; they are easy-to-read and are mostly intended for debugging;
  • codebase - the obfuscated code files of the library; they are much smaller and intended for use in production. Include these files in your apps when they are ready;
  • samples - the code samples;
  • docs - the full documentation of the component.

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.

window.html

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

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.

Related sample:  metaTitle

Configuration properties

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

  • title - (string) adds some text into the header of a window
  • viewportOverflow - (boolean) defines whether a window can go beyond borders of a browser window
  • resizable - (boolean) defines whether a window can be resized
  • movable - (boolean) defines whether a window is movable
  • modal - (boolean) defines whether a window is modal
  • closable - (boolean) defines whether a window can be closed
  • width - (number) sets the width of a window, 50% of the browser window's width by default
  • height - (number) sets the height of a window, 50% of the browser window's height by default
  • minWidth - (number) sets the minimal width of a window, 100 by default
  • minHeight - (number) sets the minimal height of a window, 100 by default
  • footer - (boolean) adds a footer for a window
  • css - (string) adds style classes for the component
  • htmlContent - (string) sets an HTML content into a window on initialization

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();
  • by calling attach() to attach other DHTMLX components
dhxWindow.attach("richtext",{mode: "document"});
dhxWindow.show();
  • via the htmlContent 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