dhtmlxlayout:attaching_dhtmlx_components [Skin test wiki]

- Attaching DHTMLX Components

Index

dhtmlxlayout

Attaching DHTMLX Components

Attaching Components to the Whole Layout

Only two dhmtlx components can be added to the whole Layout:

dhtmlxMenu 2.0;
dhtmlxToolbar 2.0.

A Status Bar can be attached to the whole Layout as well. The user should refer to Attaching Global Items section of this document to get more information on attaching components to the whole dhtmlxLayout.

Attaching Components to Layout's items

The following components can be attached to dhtmlxLayout's items:

dhtmlxTree;
dhtmlxGrid;
dhtmlxTreeGrid;
dhtmlxTabbar;
dhtmlxAccordion;
dhtmlxFolders;
dhtmlxMenu;
dhtmlxToolbar;
dhtmlxEditor;
Status Bar.

Note: as far as dhtmlxLayout items are instances of dhtmlxWindows members, and dhtmlxLayout can be attached to a dhtmlxWindows member, the user can include layouts in dhtmlxLayout items as well.

Attaching Tree

In the first place, the user needs to download the dhtmlxTree package from the server and set path to necessary files from it into the <head> tag of our html. The files to which the paths need to be specified should be checked in the documentation describing work with dhtmlxTree.

dhtmlxTree component can be easily added to any item in the Layout with the help of attachTree() method. This method returns dhtmlxTree object, which the user can customize.

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 the super root element's id is 0, this parameter can be omitted:

    <script>
        var dhxTree = dhxLayout.cells("a").attachTree();
    </script>

Attaching Other dhtmlx Components

User's first steps are to download packages of those components he wants to attach and to set the paths to necessary files from other dhtmlx components packages into the <head> tag of html. The files to which the paths need to be specified are different for different components, and should be checked in the corresponding documentation describing work with these components.

After that dhtmlx components listed above can be attached to any item in dhtmlxLayout in the following ways:

    <script>
        var dhxGrid = dhxLayout.cells("a").attachGrid();
        var dhxTreeGrid = dhxLayout.cells("a").attachGrid();
        var dhxTabbar = dhxLayout.cells("a").attachTabbar();
        var dhxAccord = dhxLayout.cells("a").attachAccordion();
        var dhxFolders = dhxLayout.cells("a").attachFolders();
        var dhxMenu = dhxLayout.cells("a").attachMenu();   
        var dhxBar = dhxLayout.cells("a").attachToolbar();
        var dhxEditor = dhxLayout.cells("a").attachEditor();
        var db = dhxLayout.cells("a").attachStatusBar();
    </script>

These methods, except attachStatusBar() one, return dhtmlx[component] objects, which the user can customize according to his needs.

Please note if you want to attach dhtmlxGrid with paging to the dhtmlxLayout cell you should use attachObject() method to attach container with grid and paging area:

   dhxLayout.cells("a").attachObject("paging_container");

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 “a”, “b” and “c”. Windows's ids for the layout with 5 cells could be called “a”, “b”, “c”, “d” and “e”. None of these ids can not be used, it ids are used by the layout in case of windows undocking.

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>