To remove a certain cell from a layout, apply the removeCell method. As a parameter it takes the id of a cell to be removed:
layout.removeCell(id);
Related sample: Layout. Remove Cell
You can get the object of a cell by its id. Use the getCell method for this purpose:
layout.getCell("header");
You can easily attach any DHTMLX component to a cell of Layout using the attach method of a cell:
var layout = new dhx.Layout({width:"400px", height:"600px"});
var list = new dhx.List(null, {
template: listTemplate,
itemHeight: 52,
height: "100%",
dragMode: "both"
});
list.data.load('../common/library.json');
layout.getCell("list").attach(list);
Related sample: Layout. Attach
You can easily attach some HTML content to a cell of Layout via the attachHTML() method of a cell. It takes as a parameter a string with HTML.
var layout = new dhx.Layout({width:"400px", height:"600px"});
var html = "<p>Hello world</p>";
layout.getCell("content").attachHTML(html);
It is possible to hide/show a cell with the help of its API. Both the hide and show methods take the id of a cell as a parameter.
// hiding a cell
layout.getCell("toolbar").hide();
// showing a cell
layout.getCell("toolbar").show();
Since the object of a cell has the hidden attribute, a cell can be hidden in a layout. You can check the visibilty of cell via the isVisible method. It returns true if a cell is visible and false if it is hidden.
layout.getCell("sidebar").isVisible(); // -> true|false
You can collapse/expand a specified cell using two corresponding methods of a Layout cell - collapse() and expand():
// collapsing a cell by its id
layout.getCell("sidebar").collapse();
// expanding a cell by its id
layout.getCell("sidebar").expand();
Related sample: Layout. Expand/Collapse
It is also possible to collapse and expand a specified cell of Layout using the toggle() method of a cell:
layout.getCell("toolbar").toggle();
Related sample: Layout. Toggle
Back to top