DHTMLX Touch documentation

Toolbar

Toolbar is a component that contains buttons, labels, icons and other controls used for most-popular commands in app. Ui-related toolbar 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, in other words, lets you create object by using common declaration.

dhx.ui ({
    view:"toolbar", 
    ...
})

All the available toolbar controls and their attributes

Parameters

In constructor you can specify the following parameters:

  • type - lets to specify one of the predefined toolbar looks.
MainBar
SubBar
BigBar
BigBarV
BigTabBar

If available types don't fit your needs you can create your own toolbar type

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

dhx.ui({ 
        rows:[{
             view:"toolbar", type:"MainBar", height:110, id:"leftbar", data:[
                                                                             {type:"label", label:"Name"},
                                                                             {type:"label", label:"Surname"}]
	     }]
        ...
})

Brief information about 'id' (this parameter toolbar inherits from the base class 'view').
You can set 'id' both for the whole toolbar and for any of the controls.

Related how-tos