Attaching DHTMLX Components
Attaching Components to Tabbar's cells
The following components can be attached to dhtmlxLayout's items:
- dhtmlxTree;
- dhtmlxGrid;
- dhtmlxTreeGrid;
- dhtmlxTabbar;
- dhtmlxAccordion;
- dhtmlxFolders;
- dhtmlxMenu;
- dhtmlxToolbar;
- dhtmlxEditor;
- dhtmlxLayout;
- Status Bar.
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> tabbar.addTab("tab1","First tab","100px"); var dhxTree = tabbar.cells("tab1").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 = tabbar.cells("tab1").attachGrid(); var dhxTreeGrid = tabbar.cells("tab1").attachGrid(); var dhxTabbar = tabbar.cells("tab1").attachTabbar(); var dhxAccord = tabbar.cells("tab1").attachAccordion(); var dhxFolders = tabbar.cells("tab1").attachFolders(); var dhxMenu = tabbar.cells("tab1").attachMenu(); var dhxBar = tabbar.cells("tab1").attachToolbar(); var dhxEditor = tabbar.cells("tab1").attachEditor(); var db = tabbar.cells("tab1").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 dhtmlxTabbar tab you should use setContent() method to attach container with grid and paging area:
tabbar.setContent("a1","paging_container");