The application code

Now that we have covered how to use the DHTMLX's layout component, we are ready to create a layout for the application. Open the app.js file and get ready to start writing the code.

Create the layout

Enter the following code directly below the config object in the app.js file:

// Layout
var appLayout;
dhtmlxEvent(window, "load", function(){
   appLayout = new dhtmlXLayoutObject(document.body, "2U");
   appLayout.cells("a").hideHeader();
   appLayout.cells("b").setText("User Chart");
});

First, we defined the global variable appLayout that will allow us access to the layout in other methods of the application. Then we created the layout wrapped in a page load event. When the page loads the layout will be created.

After refreshing the page it will look like the following screenshot: