DHTMLX Docs & Samples Explorer

Windows Settings Manipulations

Window Accessing

The user can access a window in two following ways:

  • Using a direct link to the object that will be returned by createWindow() method:
    var dhxWins = new dhtmlxWindows();
    var win = dhxWins.createWindow(id,);
  • Through the global scope by calling window() function:
    var dhxWins = new dhtmlxWindows();
    dhxWins.window(id);

Thus, the user can access this window using win variable or by calling window() function.

Regardless of the way the window is accessed, the content of win variable and windows.window(id) will be equal.

Window Iterator

Method forEachWindow() calls a user-defined function for every existing window passing a window handler into it.

    forEachWindow(function(win){
        // code here
    });
    // or
    function doWithWindow(win){
        // code here
    });
    forEachWindow(doWithWindow);

Changing Dimension

If the user wants to change window's dimension, he should use method setDimension() and pass width and height values:

    dhxWins.window(id).setDimension(int width, int height);

To set only window's width, or only its height, the user should apply the following variants of syntax:

    dhxWins.window(id).setDimension(int width); // only width is set
    dhxWins.window(id).setDimension(null, int height); // only height is set

The same syntax variants are available for methods that are responsible for setting minimum and maximum dimensions. Default minimum and maximum Dimensions are set in dhtmlxWindows. The user has the possibility to set his own minimum and maximum Dimension parameters to a window by calling methods setMaxDimension() and setMinDimension():

    dhxWins.window(id).setMaxDimension(int maxWidth, int maxHeight);
    dhxWins.window(id).setMinDimension(int minWidth, int minHeight);

There is also a method to get window's dimension (will return array (width, height)):

    var dimension = dhxWins.window(id).getDimension();

The following methods can also be used to get minimum and maximum Dimensions:

    var maxDimension = dhxWins.window(id).getMaxDimension();
    var minDimension = dhxWins.window(id).getMinDimension();

Note: a window will be able to occupy the whole viewport after minimizing if the user sets maxDimension to auto:

    dhxWins.window(id).setMaxDimension("auto", "auto");

In this case the window becomes unresizable (only in the maximized state). Note: if the user changes window's dimension in such a way that it can not display the whole title text, the text will be cut.

Changing Position

As with window's dimension, the user is allowed to change window's position. In order to do this, method setPosition() should be called with values x and y:

    dhxWins.window(id).setPosition(int x, int y);

There is also a command to get window's position (will return Array(x, y)):

    var position = dhxWins.window(id).getPosition();

Window Parking

If the user wants to park a window, he should use the command park(). If the window was parked up, this command makes it park down, and vice versa:

    dhxWins.window(id).park();

Window Minimizing/Maximizing

To minimize/maximize a window from script, the user should call the following methods:

  • maximize();
  • minimize();
    dhxWins.window(id).maximize();
    dhxWins.window(id).minimize();

Bringing Window to Top/Bottom

The user can bring any window to the top with the help of method bringToTop():

    dhxWins.window(id).bringToTop();

In this case the window will be automatically focused.

Method bringToBottom() brings any window to bottom:

    dhxWins.window(id).bringToBottom();

In the situation when this method was applied to the top window, the window that lies right after the top one, occupies its position and becomes the top window. Some peculiarities of these two methods are revealed dealing with sticked/unsticked windows.

Window Sticking/Unsticking

The user has the opportunity to stick/unstick a window - to place it always on the top. To do this the user should use methods stick() or unstick().

    dhxWins.window(id).stick();
    dhxWins.window(id).unstick();

If there is any window that was made sticked in the system, global windows behavior will be the following:

  • All windows will be divided into 2 groups: sticked and unsticked;
  • Sticked windows (even unfocused ones) will always be positioned over the unsticked ones;
  • Method bringToTop() will place a sticked window on the top among the other sticked ones. As for an unsticked window (in case, there is at least one sticked window), it will be placed on the top of all unsticked windows, but below the sticked ones;
  • Method bringToBottom() will work in the following way with a sticked window: it will be brought to the bottom, but will be placed over any unsticked window;
  • Any sticked/unsticked window will always be placed under any modal window.

Making Window Modal/Modeless

There is the possibility to make a window modal calling method setModal():

dhxWins.window(id).setModal(Boolean state);

Any modal window has the following features:

  • Only one modal window is allowed at a time;
  • If a user wants to set modal option to any other window, this option should be removed from the current modal window. Or current modal window itself should be removed;
  • Any modal window will always be placed over any other windows (even sticked ones);
  • A modal window requires the user to interact with it, before he can return to operating any other windows (i.e. this window is always focused);
  • By default, a newly created window is always modeless.

The value true in method setModal() makes a window modal, while value false makes it modeless. Calling methods hide() and show() doesn't change the window modality at all. That's why, if you want to hide/show a modal window you should use the related method in pair with setModal().

//to hide a modal window and enable other elements
dhxWins.window(id).hide();
dhxWins.window(id).setModal(false);
//to show the modal window again and disable other elements
dhxWins.window(id).show();
dhxWins.window(id).setModal(true);

A modal window blocks all other work-flow until it is closed. Thus, the user won't be able to do anything else while a modal window is open. Modal windows can be used in order to warn the user, or draw his attention to some important change, alert, or event that is going to happen.

Get Topmost/Bottommost Window

The user is able to get the handler of the topmost window with the help of the following method:

    dhxWins.window(id).getTopmostWindow();

To get handler of the bottommost window, the user should call the following method:

    dhxWins.window(id).getBottommostWindow();

Making Window Centered

There is also the possibility to make any window centered (place it in the center of the viewport) by calling method center(). This method is similar to setPosition() method in some way, but the position of a window is set automatically and does not require the user to specify it.

Note: Position of a window will be defined relative to the viewport.

    dhxWins.window(id).center();

There is also a method which allows you to center window on the screen:

    dhxWins.window(id).centerOnScreen();

Window Progress Indicator

The user can show a progress indicator in any window. This indicator will visually inform the user about the fact that the information in a window is still loading. A progress indicator can be shown in the following way:

    dhxWins.window(id).progressOn();

A progress indicator can be easily hidden in a window in such a way:

    dhxWins.window(id).progressOff();

Window Header Control

A header of a certain window can be easily hidden by the following method:

    dhxWins.window(id).hideHeader();

The window header will be made visible again in the following way:

    dhxWins.window(id).showHeader();