Dhtmlx Components
- - dhtmlxScheduler specificity
- Using dhtmlxLayout and dhtmlxWindows together

Dhtmlx Components

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

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

To the point, to the whole Layout only status bar and two dhmtlx components (dhtmlxMenu 2.0, dhtmlxToolbar 2.0.) can be added.

As far as dhtmlxLayout items are instances of dhtmlxWindows members and dhtmlxLayout can be attached to a dhtmlxWindows member,you can include layouts in dhtmlxLayout items as well.

To attach a dhtmlx component to the layout - make the following steps:
1. Download a package with the needed component from the server
2. Set pathes to necessary files into the <head> tag of your HTML page. The files to which the paths need to be specified, should be checked in the corresponding documentation described work with this component.
3. And use one of the methods shown below:

var dhxAccord = dhxLayout.cells("a").attachAccordion();
var dhxGrid = dhxLayout.cells("a").attachGrid();
var dhxTreeGrid = dhxLayout.cells("a").attachGrid();
var dhxTabbar = dhxLayout.cells("a").attachTabbar();
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 dhxSBar = dhxLayout.cells("a").attachStatusBar();
var dhxTree = dhxLayout.cells("a").attachTree();

These methods, except attachStatusBar(), return dhtmlx[component] objects, which you can customize according to your needs.

If you want to attach dhtmlxGrid with paging - use the attachObject() method that attaches container with grid and paging area:

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

dhtmlxScheduler specificity

Please note, attachScheduler() differs from the other attach[component] methods. The reason is because attachScheduler() not only attaches the component but also initializes it, creates an instance with the predefined structure.

Therefore:

the method doesn't return a component object;
the method can be called only once;
if you need to set some configuration options for the scheduler, do this before attaching to the layout.

dhxLayout = new dhtmlXLayoutObject(document.body, "3L");
 
dhxLayout.cells("a").setWidth(800);
 
scheduler.config.xml_date="%Y-%m-%d %H:%i";
dhxLayout.cells("a").attachScheduler(null,"month", "scheduler_here");
scheduler.load("../common/events.xml");

For more details on the method, see the related API - attachScheduler().

Using dhtmlxLayout and dhtmlxWindows together

Sometimes using layout, you may need to show a pop-up window. Make the following steps for it:
1. Create an instance of dhtmlxWindows
2. Create a window
As far as layout is based on windows as well, you can use a dhtmlxWindows instance that has been already created by layout. This allows you to reduce used memory and increase script's performance:

<script>
      // creating layout instance
      var dhxLayout = new dhtmlXLayoutObject("3L");
      ...
      // creating pop-up window from layout's dhtmlxWindows' instance
      var popupWindow = dhxLayout.dhxWins.createWindow("popupWindow", ...);
</script>

There are cases when some windows' ids are already used by layout so you can't use them for creating another windows.
How can you identify the ids you are not allowed to use?
There is a function that 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>