Presentation of the layout control
DHTMLX has a lot of formation to organize the construction of Web pages, this article mainly introduces Dhtmlxlayout. The layout in the picture below divides the individual components (1.Menu 2.Toolbar 3.Grid 4.Form form) into different regions.
To set the layout:
1. Initialize a layout with dhtmlxlayoutobject ()
Add the following code to the index.html:
<!DOCTYPE HTML><HTML> <Head> <title>Contact Manager</title> <Scriptsrc= "Codebase/dhtmlx.js"type= "Text/javascript"></Script> <Linkrel= "stylesheet"type= "Text/css"href= "Codebase/dhtmlx.css"> </Head> <Body> <Scripttype= "Text/javascript">dhtmlxevent (window,"Load",function(){
varLayout= NewDhtmlxlayoutobject (Document.body,"2U");
});
</Script> </Body></HTML>
The constructor for this layout has two parameters, one is the layout container of the HTML, and one is the layout parameter 2u.
Here's a look at some of the default parameters for layouts:
2. Add the following styles to the page to ensure full-screen mode of layout
<style> html, body{width:100%;/*provides the correct work of a full-screen layout*/Height:100%;/*provides the correct work of a full-screen layout*/Overflow:Hidden;/*hides the default body ' s space*/margin:0px;/*hides the body ' s scrolls*/}</style>
3. Use the SetText () method to set the title of the layout cell to be added in index JS
Dhtmlxevent (window, "load",function() { varnew Dhtmlxlayoutobject ( Document.body, "2U"); Layout.cells (
});
The Dhtmlxlayout API contains two APIs, one for the Dhtmlxlayout object, and another for the Dhtmlxlayout cell.
4. Use the SetWidth () method to set the width of the layout cell
Dhtmlxevent (window, "load",function() { varnew Dhtmlxlayoutobject ( Document.body, "2U"); Layout.cells ("a"). SetText ("Contacts"); Layout.cells ("B"). SetText ("Contact Details"); Layout.cells ("B"). SetWidth (500);
});
Then look at our results:
DHTMLX Front-end framework build one of your application Tutorials (ii)--Set layout