dhtmlxlayout:global_items [Skin test wiki]

- Global Items

Global Items

Global items are those components that are attached to the whole Layout. When they are attached to some of Layout's items - they are not referred to as “global”. Global items are not related to any Layout's item, but to the whole Layout in general. Like menu or toolbar on the top of an application window. Among dhtmlx components that can be added to the Layout as a whole, the following ones can be named:

dhtmlxMenu 2.0;
dhtmlxToolbar 2.0.

Also the Layout can have a Status Bar attached to it.

All the above mentioned components and items can be attached to the Layout separately or altogether. It should be noted that they can be added only to already initialized Layout.

Attaching Menu

First, the user should download dhtmlxMenu 2.0 package from the server into the same folder where previously downloaded packages were put. Then, the full path to the following files is to be indicated in the <head> tag of html file:

“dhtmlxmenu.js” file from “dhtmlxMenu” folder;
“dhtmlxmenu_dhx_blue.css” file from “dhtmlxMenu” folder.

    <head>
        <script src="[full path to this file]/dhtmlxmenu.js"></script>
        <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxmenu_dhx_blue.css">
    </head>

And now one line of code will be enough to attach a dhtmlxMenu to the whole Layout:

  <script>
      var menu = dhxLayout.attachMenu();    
  </script>

When the page is reloaded, the menu panel will be displayed at the top part of the Layout above the toolbar panel and below the header (if they are there). If the user wants to add menu items to it, he should refer to the “dhtmlxMenu guide and code samples” documentation.

Attaching Toolbar

When dhtmlxToolbar 2.0 package is downloaded from the server into the same folder where previously downloaded packages were put, the user should indicate the full path for the following files in the <head> tag of html file:

“dhtmlxtoolbar.js” file from “dhtmlxToolbar” folder;
“dhtmlxtoolbar_dhx_blue.css” from “dhtmlxToolbar” folder.

    <head> 
        <script src="[full path to this file]/dhtmlxtoolbar.js"></script>
        <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxtoolbar_dhx_blue.css">
    </head>

A dhtmlxToolbar 2.0 can be attached to the Layout very easily:

    <script>
        var bar = dhxLayout.attachToolbar();
    </script>

As in the case of adding a menu, when the page is reloaded, the toolbar panel will be displayed at the top part of the Layout below the header and below the menu panel (in case they are there). If the user wants to add toolbar items to it, he should refer to the “dhtmlxToolbar guide and code samples” documentation.

Attaching Status Bar

Status Bar will be easily attached to the bottom area of the Layout in the following way:

  <script>
      var sb = dhxLayout.attachStatusBar();
  </script>

Its job is mainly to display information about the current state of the item it is attached to, which is the Layout in our case, and Status Bar have only method fot text manipulation:

  <script>
      // setting text
      sb.setText("Status Bar");
      // getting text
      var text = sb.getText();
  </script>