This section describes configuration options used to create an HtmlApplication object.


The name of the layout used by the application as the default layout.

Type: String

A view in a PhoneJS application is created using the dxView and dxLayout markups merged together. The dxView markup component defines the markup that is rendered specially for the current view. The dxLayout markup component commonly represents the unchanged markup that can be used in several views. When a certain layout is going to be used in all (most) application views, use the defaultLayout option of the HtmlApplication object to set this layout as a default one.

$(function() {
    app = new DevExpress.framework.html.HtmlApplication({
        defaultLayout: 'Navbar'
<div data-options="dxView: { name: 'home', title: 'Home' }">

To set a specific layout for a view, use the layout option of the corresponding dxView markup component.

<div data-options="dxView: { name: 'splash', layout: 'splashLayout' }">

A layout is identified by its name, which is specified via the name option of the dxLayout markup component. If you use one of the predefined layouts, open the HTML file that contains the markup of the needed layout and find the value of the name option in the dxLayout component configuration.

<div class="navbar-layout" data-options="dxLayout : { name: 'navbar', platform: 'ios', controller: 'navbar' } " >

To get more details of the process of the layout and view merging, refer to the Insert View into Layout topic.


Specifies whether or not view cashing is disabled.

Type: Boolean

By default, this option is not specified, which means that view caching is enabled. In this instance, the first time a view is displayed - it is cached. Each following time when the view must be displayed repeatedly, it is obtained from the cache. This allows the application to not have to create a view each time it is displayed. For details on the process of the view display, refer to the View Life Cycle topic.

To disable view caching, set this option to true. In this mode, each view will be created and rendered each time it is displayed.


Specifies the object that represents a root namespace of the application.

Type: Object

The object passed to this option should be previously defined. The following example illustrates how to create the MyAppNamespace object and pass it to the namespace configuration option of the application.

window.MyAppNamespace = {};
$(function() { = new DevExpress.framework.html.HtmlApplication(
        { namespace: MyAppNamespace }
    );":view/:name", { view: "home", name: '' });;

When defining the functions that return ViewModels for application views, create these functions within the application's namespace specified via the namespace option.

MyAppNamespace.home = Function() {
    var viewModel = {
    return viewModel;


Specifies application behavior when the user navigates to a root view.

Type: String
Default Value: "resetHistory"
Accepted Values: 'keepHistory'|'resetHistory'

The application usually consists of several root views accessible from global navigation. Each root view may have a stack of child views that are invoked one from another. For instance, a child view can be invoked to show detailed information on an item selected within a root view. To learn more about navigation stacks, refer to the Navigation History topic.

The navigateToRootViewMode option specifies whether the child view stack of a root view is kept or reset when you return back to this root view.

The default value is "resetHistory". In this case, the application always displays the root view when you navigate to it. If you change the value to "keepHistory", the application will show the last accessed child view of this root view.


An array of dxCommand configuration objects used to define commands available from the global navigation of the application.

Type: Array

The following example illustrates how to create an HtmlApplication, and define "Index" and "About" commands for the application's global navigation.

$(function () {
    app = new DevExpress.framework.html.HtmlApplication({ 
        defaultLayout: "default",
                title: "Index",
                action: "#Index",
                icon: "home"
                title: "About",
                action: "#About",
                icon: "info"
    app.router.register(":view", { view: "mainView" });

The navigation widget that is used in the application for global navigation will display commands defined using the navigation option. For instance, if a NavBar widget is used for global navigation, commands will be displayed as navbar items. Command configuration options will be taken into account as well. For example, the value of a command's action option will be used to get the URI to which the application will navigate when clicking the corresponding item in the global navigation.

For more information on navigation, refer to the Navigation and Routing section of the documentation.



13.1 Use the namespace option.

Specifies the object that represents the root namespace of the application.

Type: Object


Specifies options for the application's view port.

Type: Object

Assign an object of configuration options of the application's view port. The following options can be specified.

  • allowZoom
    Specifies whether or not to enable pinch-zooming in the application's views
  • allowPan
    Specifies whether or not to enable panning on the vertical and horizontal axes in the application's views

As an alternative, you can set view port options using the initViewPort method.