Creating a new toolbar type

Problem

How to create your own toolbar type?

Solution

The following is an example of creating a new toolbar type:

dhx.Type(dhx.ui.toolbar, {
 name:"BigButtonsBar",
 css:"dhx_bigbuttonsbar",
 height: 55,
});

Parameters

In dhx.Type() you can set the following parameters:

  • name - the name of a new-created type.
  • css - the appropriate css class. The parameter specifies an attribute 'class' where you define all stuff for toolbar elements' appearance & behavior.
  • height - the height of the toolbar.
  • width - the width of the toolbar.
  • vertical - (boolean) lets to set toolbar's width.
    The parameter defines whether ('true') or not ('false') toolbar's width can be set. The default value is 'false'.
    Please note, if you set the parameter to 'true', the parameter 'height' will be ignored and the standard height is specified.
    You can't set the height and the width of the toolbar at the same time.

Extra parameters

You can use 3 more parameters if you need to change the existed type cardinally. The parameters cooperate and define the toolbar.

  • template
  • templateStart
  • templateEnd

Firstly, code contained in templateStart parameter is executed. Then, code from the template and finally, templateEnd's code.

dhx.Type(dhx.ui.toolbar, {
  name:"TransparentBar"
  css:"dhx_transparentbar",
  template:dhx.Template("#value#"),
  vertical:true,
  width:210,
  templateStart:dhx.Template("<div dhx_l_id='#id#' class='dhx_list_item dhx_list_{common.css}_item{obj.$selected?_selected:}' style='width:{common.width}px; height:{common.height}px; padding:{common.padding}px; margin:{common.margin}px; overflow:hidden;'>"),
  templateEnd:dhx.Template("</div>")
}