DHTMLX Touch documentation

Layout

Layout is a concept that defines how elements will interact with and relate to other elements and lets to compose several items into a single page. Ui-related layout inherits from view.


Full code of the example in the picture

Initialization

To init the component you need to perform a simple procedure - call initialization code.

Initialization code or an object constructor gives you a choice: you can create an object directly or by using common declaration.

dhx.ui.layout({...})// direct declaration
//or
dhx.ui ({...})//common declaration

Parameters

Whatever variant you choose it will include some of the following parameters (you can't use parameters cells and rows at the same time):

  • cols - specifies a list of horizontal views.
    The parameter lets get on the page several separate 'windows' divided vertically.
  • rows - specifies a list of vertical views
    The parameter lets get on the page several separate 'windows' divided horizontally.
  • type - sets a type of the border (know more about borders here)
    Set this parameter before 'cols' and 'rows' parameters

Please note, layout is a derived class, i.e. it inherits all the features of the base classes (layoutview).

dhx.ui({ 
       type:"wide",
       rows:[{
	     id: "somelayout",
	     height:250,
	     width: 700
        }]
});

Related how-tos