Layout

An object used to define markup options for a layout.

Type: Object

A layout defines the structure of an application. Each screen of an application usually consists of a specific view, and several common UI elements such as the dxNavBar and dxToolbar widgets.

To define a layout, create an HTML page and add a div element to it. To declare this element as a layout, set the element's data-options attribute to dxLayout, and pass the required layout markup options.

The following example illustrates the declaration of a layout consisting of a toolbar that is common for all views, and two placeholders ("content" and "footer").

HTML
<div class="my-layout" data-options="dxLayout: { name:'default', platform:'ios' }" id="page">
    <div id="wrapper">
        <div class="layout-header" data-bind="dxToolbar: { dataSource:toolbarData }"></div>
        <div class="layout-content" data-options="dxContentPlaceholder: { name:'content', transition:'slide' }"></div>
    </div>
    <div class="layout-footer" data-options="dxContentPlaceholder: { name:'footer', transition:'overflow' }"></div>
</div>

The default application layout is specified by the defaultLayout field of the options object passed to the application constructor.

JavaScript
app = new DevExpress.framework.html.HtmlApplication({ defaultLayout: "default" });

For more information about layouts, refer to the Views and Layouts help section.

Configuration

This section describes configuration options used to create a layout.