The following types of items manipulations are available for dhtmlxLayout users:

• Items Accessing;
• Id-Index Interconnection;
• Iterator;
• Header Manipulation;
• Item's Expanding/Collapsing;
• Item's Undocking to window/Window's Docking to items;
• Item's Sizing;
• Attaching Object;
• Attaching URL;
• Fixing Cells Sizes;
• Progress Control.

Here we'd like to draw your attention to the following ways of items accessing:

• Through Layout items' indexes;
• Through Layout items' ids.

Items can be referred to as a collection of Items, where [0] is the zero-based index of a certain item. All the items have their own indexes starting with 0.

In all the below mentioned snippets, however, another variant of items accessing is used: through Layout items' ids. All the items in the Layout have ids that go in alphabetical succession starting with “a”. In this case items are referred to as cells. Thus, we can access any Layout's item in two following ways:

  <script>
      var item = dhxLayout.cells("a");
      // or
      var item = dhxLayout.items[0];
  </script>

In the below mentioned code samples we'll use item with the id “a” as an example.

Each method will return item object.

Layout item's ids and indexes are interrelated in such a way that one can be easily got with the help of another:

  <script>
      var index = dhxLayout.getIndexById("a"); // we'll get 0
      var id = dhxLayout.getIdByIndex(0); // we'll get "a"
  </script>

Method forEachItem() calls user-defined function for every existing item passing item object into it. Using iterator can be very useful in case the user wants all the items to be subjects of the same changes. For example, the user can use hideHeader() method to hide headers of all items in the Layout:

  <script>
      // calling iterator
      dhxLayout.forEachItem(function(item){
          // actions, for example:         
          item.hideHeader();
       });
  </script>
 
  //or
 
  <script>
      function doItemAction(item) {
          // actions, for example:
          item.hideHeader();
      }
      // calling iterator
      dhxLayout.forEachItem(doItemAction);
  </script>

The header is situated at the top of the item. This header displays functional buttons that are used to manipulate items, and it also displays items' title texts. Header manipulations include:

• Hiding/showing the header;
• Getting header's current state;
• Setting header's text;
• Getting header's text.

The header can be easily hidden with the help of hideHeader() method:

      dhxLayout.cells("a").hideHeader();

In order to show the header the following method is used:

      dhxLayout.cells("a").showHeader();

When the user wants to get the current state of a certain header, he should use isHeaderVisible() method. If the method returns true, the header is visible, and vice versa:

      var isVisible = dhxLayout.cells("a").isHeaderVisible(); // returns true|false;

By default, the header contains text of the item id. To set/change text for the header, the following code should be used:

      dhxLayout.cells("a").setText("New Text");

To get header's text, the following code should be used:

      var text = dhxLayout.cells("a").getText();

Let's look at some general behavior of items in the Layout:

If the last item visible in one row/column becomes collapsed, the nearest collapsed item will be expanded instead. The component expands either the nearest left item or the nearest right item (if there is no nearest left one). In other words, if there are two or more items in one row/column, at least one of them will be always held expanded.

If the last item visible in one row/column becomes collapsed, and there is at least one Undocked item in the layout, one of the Undocked items will be docked and will stay expanded.

In order to expand an item from the script, the user should write the following line of code:

  <script>
      dhxLayout.cells("a").expand();
  </script>

There is also a method that is aimed at collapsing an item:

  <script>
      dhxLayout.cells("a").collapse();
  </script>

Any item in dhtmlxLayout can be easily Undocked to a window - extracted from the single layout in order to be displayed separately in a window. In v.1.0 there is no possibility to dock item content to another item - just dock back. The user should write the following in order to Undock an item with API method:

  <script>
      dhxLayout.cells("a").undock();
  </script>

An undocked window can be Docked back - made a part of the single layout again - in the following way:

  <script>
      dhxLayout.cells("a").dock();
  </script>

There is the possibility to resize any item in the Layout. However, there are some limitations in item's sizing that users should know:

• If there is only one item in a row, it is impossible to set width for this item;
• If there is only one item in a column, it is impossible to set height for this item;
• The system checks all width/height values set: in case of any invalid values usage, the system will just ignore them.

There are separate methods for setting item's width and height:

  <script>
      dhxLayout.cells("a").setWidth(200);
      dhxLayout.cells("a").setHeight(200);
  </script>

Input parameters the user should specify are item's width and height values.

Current item's width and height can be easily got in the following way:

  <script>
      var width = dhxLayout.cells("a").getWidth();
      var height = dhxLayout.cells("a").getHeight();
  </script>

If the user wants to attach an object to a certain Layout's item, he should first create this object on page.

For example, we create a <div> element with id “objId” and with some text inside it. Then we just use the following line of code to attach this object we've just created to a Layout item:

    <div id="objId">
        Some text
    </div>
    <script>
        dhxLayout.cells("a").attachObject("objId");
        // or
        var obj = document.getElementById("objId");
        dhxLayout.cells("a").attachObject(obj);
    </script>

By default, panels have overflow:hidden style.

In case the panel 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 panel will display the scroll bar in case the object does not fit panel's size.

Sometimes the user needs to display a web page in a Layout's item. attachURL() method is used for this purpose in the following way:

  <script>
      dhxLayout.cells("a").attachURL("http://www.google.com/");
  </script>

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 dhxLayout = new dhtmlXLayoutObject(...);
            ...
            dhxLayout.cells("a").attachURL("inner.html");
            // accessing <div id="A">
            if (_isIE) {
                dhxLayout.cells("a")._frame.contentWindow.document.getElementById("A")...
            } else {
                dhxLayout.cells("a")._frame.contentDocument.getElementById("A")...
            }
            // calling function from inner.html
            dhxLayout.cells("a")._frame.contentWindow.myFunc();
    </script>

If the user needs to do some action with a panel 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="collapse cell" onclick="collapseCell();"> // create a button
 
      <script>
           function collapseCell() {
               parent.dhxLayout.cells("a").collapse(); // collapse cell "a"
           }
      </script>

It should be noted that variable dhxLayout should be created as a global one (in our main dhtmlxLayout script) in order to be seen by the script in the attached external page.

If the user needs to fix size of a certain Layout's cell, there's a method that does the exact thing:

    <script>
        dhxLayout.cells("a").fixSize(true, false);
    </script>

The first parameter is responsible for resizing cell's width, and the second one - for resizing cell's height. If the user sets two parameters to true, the user won't be able to resize the item horizontally and vertically.

Progress control is an indicator of state, you may show/hide it, depending on state of cell's content. Progress can be applied to whole layout or just to any cell.

Here is a code for whole layout's progress:

    <script>
        // turning progress on
        dhxLayout.progressOn();
        // turning progress off
        dhxLayout.progressOff(); 
    </script>

Here is a code for cells' progres:

    <script>
        // turning progress on
        dhxLayout.cells("a").progressOn();
        // turning progress off
        dhxLayout.cells("a").progressOff(); 
    </script>