dhtmlxlayout:dhtmlxlayout_configuration [Skin test wiki]

- dhtmlxLayout Configuration

Index

dhtmlxlayout

dhtmlxLayout Configuration

The following ways of configuring dhtmlxLayout are available for users:

Available Skins;
Patterns configuration;
Autosize configuration;
Enable/Disable Effects.

Available Skins

The following predefined skins are available for dhtmlxLayout users:

dhx_skyblue (the default one)	dhx_blue	dhx_black

The skin for the Layout can be set in the following way:

    <script>
            // setting dhx_blue skin (the default one) 
        var dhxLayout = new dhtmlXLayoutObject("parentId", "3L");
            // or
        var dhxLayout = new dhtmlXLayoutObject("parentId", "3L", "dhx_blue");
            // setting dhx_black skin
        var dhxLayout = new dhtmlXLayoutObject("parentId", "3L", "dhx_black");
            // change skin on the fly
        dhxLayout.setSkin("dhx_blue");
    </script>

The user can determine the way how the Layout will be displayed. This can be done by indicating the code of the chosen Layout's pattern as the second argument for any of the initializing methods, while the Layout is being initialized:

  <script>
      var dhxLayout = new dhtmlXLayoutObject("parentId", "3L");
  </script>

The user has two ways to use a certain pattern:

Use one of the predefined types of available Layout patterns;
Create his own new Layout pattern (the separate document describing this option is under construction) and use it.

The following predefined Layout patterns are available in dhtmlxLayout:

1C

2E

2U

3E

3W

3J

3T

3L

3U

4H

4I

4T

4U

5H

5I

6I

:!:

List of additional patterns:

4E	4W	4A	4J	4L	4F	4C	5U	5E	5W	6C

To use additional pattern you should attach code with it first:

  <head>
      <script src="patterns/dhtmlxlayout_pattern[pattern name].js"></script>
      <!-- for example -->
      <script src="patterns/dhtmlxlayout_pattern4j.js"></script>
  </head>

Autosize Configuration

First, the meaning of Autosize should be explained. By Autosize we mean here the ability of Layout's items to adjust automatically to the changing dimension of the Layout. Autosize Configuration can be applied to Window-based and Fullscreen types of dhtmlxLayout's initialization mainly as there is the possibility that the dimension of Layout's parent will be changed. The user can indicate which items are going to be subjects to Autosize in the following way:

  <script>
      dhxLayout.setAutoSize("b;c", "a;c");
  </script>

The items' ids are taken as input parameters of the above mentioned method, and they are separated from one another by semicolons ”;”. The first parameter in setAutoSize() method is responsible for autosizing horizontal items, while the second one - for vertical items. The indicated items will change their dimension in accordance to the new dimension of the Layout.

Enable/Disable Effects

There are some default effects that can be enabled/disabled in the Layout:

collapse;
resize;
highlight.

We recommend using effects to make your Layout more attractive. However, it should be done reasonably. The below mentioned snippets describe the way how effects can be enabled and disabled:

  <script>
      dhxLayout.setEffect("resize", true);
      dhxLayout.setEffect("resize", false);
  </script>

The first argument here is the name of the effect (“collapse”, “resize” or “highlight”), 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, in which the name of the event is set as an argument:

  <script>
      var state = dhxLayout.getEffect("resize"); // returns true|false;
  </script>

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

dhtmlxLayout Configuration

Available Skins

Patterns Configuration

Autosize Configuration

Enable/Disable Effects