DHTMLX Docs & Samples Explorer

Index
dhtmlxForm

# Dhtmlx Components Integration

Pretty often, there is the situation when you need to combine form with some other dhtmlx components.
DhtmlxForm allows you to combine form with the next components:

- Layout
- Window
- Accordion
- Tabbar

Lets consider the first variant in details.

## Form placement to a layout's cell

To implement form attaching you need to do the following:
1. Download the dhtmlxLayout package from the server and place it in a folder.
2. Include related js and css files into the header of html file .

    <link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="../../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <script src="../../../codebase/dhtmlxcommon.js"></script>
    <script src="../../../codebase/dhtmlxlayout.js"></script>
    <script src="../../../codebase/dhtmlxcontainer.js"></script>

3. Create a layout object. The step depends on the type of layout initialization (for detailed information about layout initialization see the respective part of the documentation). We will consider 'object-based' variant. In this case, your further actions are:

- Specify an HTML container for your future layout.

    <div id="parentId" style="position:absolute; width:600px; height:400px;"></div>

- Create a new dhtmlXLayoutObject.

    var dhxLayout = new dhtmlXLayoutObject("parentId", "3L", "dhx_black")

4. And now, when all preparations is finished, the last and most principal step is left - add the form to layout. Here the method attachForm() will help us.

    var dhxForm = dhxLayout.cells("a").attachForm();

Attaching is completed and you can continue your subsequent work.