dhtmlxWindows 2.1 Guide and Code Samples

1. Introduction

1.1 Scope of the Document

This document describes dhtmlxWindows system, defines its methods and global parameters.

1.2 Target Readers

Target readers are users (developers).

2. What is dhtmlxWindows

dhtmlxWindows is a windowing system that enables the user to work with several windows and their content at the same time. This system allows windows to overlap, and provides means for the user to perform standard operations such as moving/resizing a window, sending a window to the foreground/background, minimizing/maximizing a window, changing window’s position, making a window modal and sticking a window.


Work with this system involves:

2.1. Main Features

2.2 Browser Compatibility

3. Initializing dhtmlxWindows

3.1 Minimal Initialization

The first things that need to be done for any type of dhtmlxWindows' initialization are the following:


Download the dhtmlxWindows package from the server and place it in a folder;


Create an index.html file;


Place the full paths to dhtmlxWindows' CSS and JS files into the header of html file.


<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxwindows.css">


<link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxwindows_dhx_blue.css">


<script src="[full path to this file]/dhtmlxcommon.js"></sript>


<script src="[full path to this file]/dhtmlxwindows.js"></script>

3.1.1 Basic Object for a Set of New Windows

A base for a set of new windows can be created in the following way:

var dhxWins= new dhtmlXWindows();

3.1.2 New Window Creation

While creating a new window with minimal initialization, the user should use createWindow() method and pass the following parameters:

  • Window Id;

  • Window's position (x & y);

  • Window's width & height.

var win = dhxWins.createWindow(String id, int x, int y, int width, int height);

The user can set the header text to the newly created window using the command setText():

dhxWins.window(id).setText(String text);

3.1.3 Default Values


Default values in dhtmlxWindows are:

  • Window control buttons (buttons "Park", "Maximize" and "Close" are enabled and visible by default);

  • Window icon (default icon is defined by the skin);

  • Window maxDimension (default value is "auto") and minDimension parameters (default value is "200x140px");

  • The possibility to resize a window (default value is "true");

  • The possibility to move a window (default value is "true");

  • Window's default skin (default value is "dhx_blue").

3.2 Extended Initialization

When creating a new window with extended initialization, the user should call the same commands described in Minimal initialization.

Additional parameters, which can be defined, are:

3.2.1 Header Icon


There is also the opportunity to specify any header icon if the default one is not suitable for the user. This can be done in the following way:

dhxWins.window(id).setIcon(String iconEnabled, String iconDisabled);

Along with setting a header icon, the user can choose to clear/remove it. In this case there will be just an empty space instead of any header icon. The user should do the following:

dhxWins.window(id).clearIcon();
It is also possible to restore the default window icon according to the loaded skin:
dhxWins.window(id).restoreIcon();

3.2.2 Allow/Deny Resizing


By default window resizing is allowed.

Extended initialization allows the user to deny window resizing by calling the method denyResize():

dhxWins.window(id).denyResize();

Resizing of a window can be allowed again with the help of the following method:

dhxWins.window(id).allowResize();

3.2.3 Allow/Deny Moving


By default window moving is allowed.

The user can deny window moving by calling the following method:

dhxWins.window(id).denyMove();

Window moving can be allowed again if the user calls method allowMove():

dhxWins.window(id).allowMove();

3.2.4 Allow/Deny Parking


By default window parking is allowed.

The user can choose to deny window parking using the following method:

dhxWins.window(id).denyPark();

Window parking can be allowed again with the help of the following method:

dhxWins.window(id).allowPark();

3.2.5 Hide/Disable Buttons


All default buttons are enabled. The user can hide some of/all these buttons or disable them.

In order to hide/disable these buttons use the following methods:

dhxWins.window(id).button("close").hide();
dhxWins.window(id).button("park").disable();

3.3 Attach Object

dhtmlxWindows allows users to attach objects to any window by method attachObject():

dhxWins.window(id).attachObject(objId);

If the user wants to adjust window's dimension to that of the container attached to the window, one more parameter should be added to attachOnject() method:

dhxWins.window(id).attachObject(objId, true);

Note: The container (which dimensions the user wants the window to be adjusted to) should have certain constant sizes.


3.3.1 Object Size Handling


By default, windows have overflow:hidden style.


In case the window is not able to display the whole object, the following style should be specified for the object:

<div id="objId" style="width:100%;height:100%;overflow:auto;...>

Now the window will display the scroll bar in case the object does not fit window 's size.

3.4 Append Object

The user can append an object from the page to any dhtmlx window. The essence of appending an object is the following: when the user appends more than one object to a window, every next object added doesn't replace the previous one, but is added right after it.
To append an object to a window, the user needs to indicate id of the window and id of the appended object:

dhxWins.window(id).appendObject(firstId);
dhxWins.window(id).appendObject(secondId);
It should be noted that the first object can be added to a window through attachObject() method, while for appending the second object ,the user should apply appendObject() method:
dhxWins.window(id).attachObject(objId);
dhxWins.window(id).appendObject(secondId);

3.5 Attach URL

There is the possibility to attach any external page to a window or any content stored locally (using AJAX) with the help of method attachURL():

dhxWins.window(id).attachURL(url, AJAX);

The second parameter here indicates whether the content stored locally will be loaded through AJAX (the second parameter should be set to true) or not (the second parameter should be omitted). When the content is loaded into the window, onContentLoaded event can be called.


3.5.1 Accessing Inner Window Content


Any object on the external page attached with attachURL() method can be accessed like this:


  • Page inner.html

...

<div id = "A">...</div>

<script>
function myFunc() {
...
}
</script>

...

  • Page index.html

<script>

var dhxWins = new dhtmlXWindows(...);
dhxWins.createWindow("w1",...);
w1.attachURL("inner.html");

// accessing <div id="A">

if (_isIE) {
dhxWins.window("w1")._frame.contentWindow.document.getElementById("A")...
} else {
dhxWins.window("w1")._frame.contentDocument.getElementById("A")...
}

// calling function from inner.html

dhxWins.window("w1")._frame.contentWindow.myFunc();

</script>

3.5.2 Window Accessing from Attached URL

If the user needs to do some action with a window from the attached URL (for example, close it by clicking some button on page), he should write the following code lines in the attached external page:

<input type="button" value="close window" onclick="closeWindow();"> // create a button

<script>
function closeWindow() {
parent.dhxWins.window("w1").close(); // close a window
// OR
parent.win.close(); // close a window
}
</script>
It should be noted that variables dhxWins and win should be created as global ones (in our main dhtmlxWindows script) in order to be seen by the script in the attached external page.

4. Global dhtmlxWindows Parameters

Global parameters affect the entire system of dhtmlxWindows.

4.1 imagePath

Method setImagePath() should be used to set the full paths to the directory where windows image files are located. In this method the user should set the path to 'codebase/imgs/' directory, where skin images are stored. Skin images are grouped by skin name in the directories inside this imgs one. The user shouldn't indicate a certain skin images directory inside imgs one in setImagePath() method, as the system will do it itself.


The following code string should be placed before any of data loading methods:

dhxWins.setImagePath("[full path to this directory]/codebase/imgs/");

4.2 Viewport

This parameter sets the invisible area that limits windows' movements. Windows can’t be completely moved outside the viewport.

Users can specify the size of the viewport. By default the size of the viewport occupies the document.body and automatically changes its size when document.body’s size changes.

To enable user-defined viewport, invoke the following code:

dhxWins.enableAutoViewport(false);
dhxWins.setViewport(10, 10, 1260, 500, parentObj);

parentObj parameter is used to attach a viewport to a parent object.

To attach a viewport to the existing object on page, the user should do the following:

dhxWins.enableAutoViewport(false);
dhxWins.attachViewportTo(obj);

keepInViewport() method, when is set to true, permanently locates a window within the viewport (the window can’t be moved outside the viewport).

window(id).keepInViewport(true/false);

By default this method is set to false. Thus, all windows can be moved outside the vieport in such a way that only a tiny part of window’s header will be seen.

4.3 Enable/Disable Effects

There are some default effects that can be enabled/disabled for dhtmlxWindows:

  • move;
  • resize.

We recommend using effects to make your windows more attractive. However, it must be done reasonably. It should be noted that effects are disabled by default.
The below mentioned snippets describe the way how effects can be enabled and disabled:
dhxWins.setEffect(efName, true);
dhxWins.setEffect(efName, false);
The first argument here is the name of the effect ("move" or "resize"), and the second one switches the effect on (true) or off (false).
When the user wants to get the current state of an effect, he should use getEffect() method, where the name of the event is set as an argument:
var state = dhxWins.getEffect(efName); // returns true|false;

The method returns true if the effect in question is enabled, and false in case it is disabled.

4.4 Skins

This parameter allows users to change dhtmlxWindows skins. There is a set of predefined skins, among which the user can choose one with the help of method setSkin():

dhxWins.setSkin(String skin);

Skins are able to be changed on the fly, i.e. the user can change them very easily in the process of work by using setSkin() method.

There is also the possibility for users to create their own skins.

The following built-in skins are available in dhtmlxWindows:

  • dhx_blue (the default one)

  • dhx_black
  • web

  • aqua_dark


  • aqua_orange


  • aqua_sky


  • modern_red


  • modern_black


  • modern_blue


  • clear_blue


  • clear_silver


  • clear_green


  • standard


It should be noted that some skins can be available as addons, and they are not included into the package. But they can be downloaded from the site.

5. Windows Settings Manipulations

5.1 Window Accessing

The user can access a window in the 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.

5.2 Window Iterator

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

forEachWindow(function(winHandler){
winHandler.show();
})

5.3 Changing Dimension

If the user wants to change window's dimension, he/she 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, use 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 with 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 cannot display the whole title text, the text will be cut.

5.4 Changing Position

As with window's dimension, it is available to change window's position. In order to do this, method setPosition() must 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();

5.5 Window Parking

If the user wants to park a window, he/she should use the command park().

If the window was parked up, this command makes it park down, and vice versa:

dhxWins.window(id).park();

5.6 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();

5.7 Bringing Window to Top/Bottom

The user can bring any window to 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.

5.8 Window Sticking/Unsticking

The user has the opportunity to stick/unstick a window - to place it always on 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 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 top of all unsticked windows, but below the sticked ones;

  • Method bringToBottom() will work the following way with a sticked window: it will be brought to bottom, but will be placed over any unsticked window;

  • Any sticked/unsticked window will always be placed under any modal window.

5.9 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 the 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 the value false makes it modeless.

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.

5.10 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();

5.11 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();

5.12 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();

5.13 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();

6. Buttons Settings Manipulations

6.1 Button Accessing

A button can be accessed in the following way:
var btn = dhxWins.window(id).button(id);

Default buttons ids are:

  • "park" for "Park" button;

  • "close" for "Close" button;

  • "help" for "Help" button;

  • "stick" for "Stick" button;

  • "sticked" for "Sticked" button (pressed "stick", used for "unstuck" action);

  • "minmax1" for "Maximize" button;

  • "minmax2" for "Minimize" button.

6.2 Showing/Hiding Buttons

There is the possibility to show/hide a button by calling the following methods:

dhxWins.window(id).button(id).show();
dhxWins.window(id).button(id).hide();

User-buttons also inherit these methods.

6.3 Button Enabling/Disabling

The button can be enabled/disabled by user:

dhxWins.window(id).button(id).enable();
dhxWins.window(id).button(id).disable();

User-buttons also inherit these methods.

Note: in some cases button enabling/disabling is determined by Object.

For example, when the window is Parked Up, resize buttons are inactive/disabled. But they become active/enabled when the window is Parked Down. Thus, resize buttons are disabled by Object.

6.4 Creating User-Buttons

This example will show the user how to create his own buttons for a window.

  1. To get started, the user should decide for which skin the button will be created. Take, for example, the skin "Web".

  2. Then the user should get to know the dimensions of buttons for the chosen skin.

  3. Each button can be divided into active and inactive. Besides, all buttons have the following states: "default", "over_default", "over_pressed", "disabled".

Thus, there must be 8 skins for each single user-button:

  • Active;

  • Default;

  • Over default;

  • Over pressed;

  • Disabled;

  • Inactive.

    1. Then the user should name the newly created button. For example, the name of the button can be "tray".

    2. The next step is to create the main folder for the new button (for example, "tray_button") and 2 subfolders in it called "active" and "inactive".

    3. Then the user is to create 4 subfolders in both "active" and "inactive" folders:

    • btns_default;

    • btns_disabled;

    • btns_over_default;

    • btns_over_pressed.

    As a result there will be the following tree:

    tray/

    active/

    btns_default/

    btns_disabled/

    btns_over_default/

    btns_over_pressed/

    inactive/

    btns_default/

    btns_disabled/

    btns_over_default/

    btns_over_pressed/

    1. Now the user should create 8 GIF files with button skins for each button state. Then each GIF file should be placed to a folder according to its state. A inified file name should be used for each skin, for example: "btn_tray.gif".

    2. After this the tree will be presented in the following way:

    tray/

    active/

    btns_default/

    btn_tray.gif

    btns_disabled/

    btn_tray.gif

    btns_over_default/

    btn_tray.gif

    btns_over_pressed/

    btn_tray.gif

    inactive/

    btns_default/

    btn_tray.gif

    btns_disabled/

    btn_tray.gif

    btns_over_default/

    btn_tray.gif

    btns_over_pressed/

    btn_tray.gif

    1. Now, when button skins are created, the user should proceed to a CSS file creation.

    6.5 CSS File Creation

    This example is going to show the user how to create a CSS file for buttons.

    1. The user should find a template CSS file dhtmlxwindows_user_button_template.css and save it with a different name. For example, it can be “user_button_tray.css”.

    2. Then he should modify this CSS file in the following way:

      • Replace %skin% with the skin name (in our example, we chose "web" skin);

      • Replace %button_root_folder% with the name of the root folder created by user (in our example it’s "tray");

      • Replace %button_name% with the name of the created button (in our example it’s "tray");

      • Replace %button_filename% with name of the created GIF files ("btn_tray.gif" in out example);

      • Link this newly created CSS file from the index page.

    7. Adding Necessary Code in the Process of Development

    7.1 Adding User-Button

    To add this newly created button to a window the user should use the following method:
    dhxWins.window(id).addUserButton(id, position, tooltip, name);

    This method takes the following parameters:

    • id – id of the newly created button (in our example it can be "tray");

    • position – the type of this parameter is int. This parameter defines the place of the button on the caption bar (left to right: 0 – the first button, 1 – the second, etc);

    • tooltip – this parameter sets the title that appears when the user hovers the mouse over the button;

    • name – the name of the button (in out example it is "tray").


    7.1.1 Defining Button Position


    All available window buttons are shown in the following picture:

    But not all of these buttons are displayed simultaneously. For example, buttons "stick" and "unstick", "minmax1" and "minmax2" are not displayed at the same time. Each button has its inner constant position. So, when you insert some user-button, you should count button's position paying attention even to the buttons that are invisible at the moment.
    For example, let's put a user-button between "park" and "minmax1" ones. Counting buttons from left to right starting from 0, stop on the button "park" - we have "3" as a result.
    So, this new button should have "4" as its position index.

    7.2 Adding Event to Button

    The user can attach an event to the newly created button in the following way:

    dhxWins.window(id).button(id).attachEvent("onClick", handler);

    The user can also remove an event from any user-created button:

    dhxWins.window(id).button(id).detachEvent("onClick");

    Any user-created button can be removed in the following way:

    dhxWins.window(id).button(id).removeUserButton(id);

    Besides, all default button methods will be available for user-created buttons as well:

    dhxWins.window(id).button(id).show();
    dhxWins.window(id).button(id).hide();
    dhxWins.window(id).button(id).isHidden();
    dhxWins.window(id).button(id).enable();
    dhxWins.window(id).button(id).disable();
    dhxWins.window(id).button(id).isEnabled();

    7.3 Removing User-Button

    To remove any user-button from the window the user should call the following method:

    dhxWins.window(id).removeUserButton(id);

    8. Event Handling

    8.1 Default Events

    Default events signal various actions, such as the user clicking a button to Park a window, or a window is being closed. Default events are usually button events.

    Button events can be as follows:

    • onClick. The onClick event handler executes the specified JS code or function, when the user clicks the left mouse button on the object.

    Default events can be redefined by user, who can choose to assign other user-defined events instead. In this case, default events will be ignored until they are restored by user.

    8.2 Redefine Default Button Event

    The user can choose to redefine a default button event by adding any user-defined event instead.

    To redefine a button default event the user can use attachEvent() method:

    dhxWins.window(id).button(id).attachEvent(eventName, handler);

    8.3 Adding Window Events Handlers

    The entire point of an event is to inform a handler that something has happened to a component in the GUI. A handler can figure out what exactly happened and respond in a meaningful way.

    The list of events to which user-defined handlers can be attached is given below:

    • onMoveFinish – occurs when the window movement was finished;

    • onResizeFinish – occurs when the window resizing was finished;

    • onFocus – occurs when the window was focused;

    • onParkDown/onParkUp – occurs when the window was parked down/up;

    • onMaximize/onMinimize – occurs when the window was maximized/minimized;

    • onShow/onHide – occurs when the window was shown/hidden;

    • onClose – occurs before the window is closed;

    • onHelp – occurs when the user clicks the "help" button;

    • onContentLoaded - occurs when the external page content is loaded into the window (attachURL() and attachURLAJAX() methods).

    8.4 Adding Global Event Handlers for Windows

    The user can add global event handlers for windows. This can be done in the following way:

    dhxWins.attachEvent(eventName, handler);
    Note: the names of the events are case-insensitive.

    8.5 Adding Personal Window Event Handler

    If there is a window to which the user wants to assign a special handler, this can be done by adding the handler to the window directly.

    While other windows will be calling global handlers, this window with personal handler will call this personal handler:

    dhxWins.window(id).attachEvent(eventName, handler);

    8.6 Restore Global Event Handler

    The user can detach a personal event from a window. In this case a global event handler will be restored for this window, i.e. the when personal handler is removed from the window, the widow will call global handler.

    dhxWins.window(id).detachEvent(eventName);

    8.7 Remove Global Handler

    Global handlers can be easily removed with the help of the following method:

    dhxWins.detachEvent(eventName);

    8.8 Understanding Event Handlers Priority

    In the situation described above windows w2 and w3 will call "globalHandler" when they are focused.

    The window w1 will call personal "w1Handler" when focused.

    9. Integration with Other Components

    9.1 Status Bar

    The user can add a status bar to any window in dhtmlxWindows with the help of attachStatusBar() method:

    var sb = dhxWins.window(id).attachStatusBar();
    When the status bar is added to a window, the user can write any custom text into it using the following methods:
    sb.setText("Some custom text");
    There is also the possibility to get the current Status Bar text in the following way:
    var text = sb.getText();
    getText() method returns the current Status Bar text.

    9.2 dhtmlxMenu

    A dxtmlxMenu 2.0 can be easily added to any window in the following way:

    dhxWins.window(id).attachMenu();

    The method returns dhtmlxMenu 2.0 object, which the user should customize according to his needs.

    9.3 dhtmlxToolbar

    A toolbar can be added to any window in the following way:

    dhxWins.window(id).attachToolbar();

    The method returns dhtmlxToolbar 2.0 object, which the user should customize according to his needs.

    9.4 dhtmlxTree

    The user can add a Tree to any window in dhtmlxWindows with the help of attachTree() method:
    dhxWins.window(id).attachTree();
    There is only one input parameter for this method. The parameter is the id of a virtual super item that is a parent to all the top level tree nodes of the added dhtmlxTree (see dhtmlxTree constructor description for details). If super root element id is 0, this parameter can be omitted. This method returns dhtmlxTree object, which the user can customize.

    9.5 dhtmlxGrid

    The user can add a Grid to any window in dhtmlxWindows with the help of attachGrid() method:
    dhxWins.window(id).attachGrid();
    The method returns dhtmlxGrid object, which the user should customize according to his needs.

    9.6 dhtmlxTreeGrid

    A TreeGrid can be added to any window in the following way:
    dhxWins.window(id).attachTreeGrid();
    The method returns dhtmlxTreeGrid object, which the user should customize according to his needs.

    9.7 dhtmlxFolders

    There is an easy way to add a Folders to any window in the following way:
    dhxWins.window(id).attachFolders();
    The method returns dhtmlxFolders object, which the user should customize according to his needs.

    9.8 dhtmlxTabbar

    There is an easy way to add a Tabbar to any window in the following way:
    dhxWins.window(id).attachTabbar();
    The method returns dhtmlxTabbar object, which the user should customize according to his needs.

    9.9 dhtmlxLayout

    A Layout can be added to any window this way:
    dhxWins.window(id).attachLayout(pattern, skin);

    The parameters of this method are the following:


    • pattern - the code of the Layout's pattern;
    • skin - the name of the chosen skin (optional). If this parameter is not indicated, the Layout will be attached with the default skin (dhx_blue).
    The method returns dhtmlxLayout object, which the user should customize according to his needs.

    9.10 dhtmlxAccordion

    A dhtmlxAccordion can be attached to a window like this:

    dhxWins.window(id).attachAccordion();

    The method returns dhtmlxAccordion object, which the user should customize according to his needs.

    9.11 dhtmlxEditor

    A dhtmlxEditor can be attached to a window this way:

    dhxWins.window(id).attachEditor();

    The method returns dhtmlxEditor object, which the user should customize according to his needs.


    9.12 Using dhtmlxLayout and dhtmlxWindows together

    Sometimes when using layout you may need to show a pop-up window. To do this you should first create an instance of dhtmlxWindows and then create a window. But as far as layout is based on windows as well, you can use a dhtmlxWindows instance that has been already created by layout. To achieve this you should do the following:
    <script>
    // creating layout instance
    var dhxLayout = new dhtmlXLayoutObject("3L");
    ...
    // creating pop-up window from layout's dhtmlxWindows' instance
    var popupWindow = dhxLayour.dhxWins.createWindow("popupWindow", ...);
    </script>
    This allows you to reduce used memory and increase script's performance.

    Note: There are cases when some windows' ids are already used by layout so you can't use them for creating another windows. How to identify the id you are not allowed to use?
    Take for example a layout with 3 cells called "a", "b" and "c". Windows' ids used for them are "wa", "wb" and "wc". Windows's ids for the layout with 5 cells could be called "wa", "wb", "wc", "wd" and "we". None of these ids can not be used.

    There is a function which allows you to check availability of any "id":
    <script>
    // check if id in use
    if (dhxLayout.dhxWins(id)) {
    // id is already in use, checked id can not be used for new window
    } else {
    // id is free for use
    }
    </script>