| sidebar_label | Step 2. Specify the Layout |
|---|---|
| title | Step 2. Specify the Layout |
Our application will have the following structure:
- Toolbar
- Grid with a list of users
- Chart
To set the main scheme of our app we should start by initializing the Layout. Later we will attach the rest of the components to it.
To specify the app's layout:
1. Create an HTML container where the layout will be placed later.
<div id="layout"></div>2. Create a Layout object and place it into the HTML container that we’ve just created.
var layout = new dhx.Layout("layout", {
height: "700px", // it’s important to set the height of the layout
width: "1600px",
rows: [
{
id: "toolbar-cell", //here the toolbar will be placed
gravity: false, //remove automatic cell stretching
},
{
cols: [
{
id: "grid-cell", //here the grid will be placed
width: "65%" // width in % for this cell
},
{
css: "dhx_widget--bg_gray",
// pass the css class to make the background gray
id: "chart-cell", //here the chart will be placed
width: "35%", // width in% for this cell
padding: "20px" // padding inside the cell
}
]
}
]
});We divide the layout into two rows. The first row will contain a toolbar. The second row will be divided into two columns: one for Grid and another for Chart.
You can read more information about Configuration of a cell and about Styling of Layout cells.