The user can load data to the toolbar by adding various types of items from script. Loading data from script means that the user should write a code line for adding every toolbar item. In our example to add a new button and set its tooltip, add one more button with its tooltip, and add a separator we should write the following:
myToolbar.addButton(id,pos,text,imgEnabled,imgDisabled);
myToolbar.setItemToolTip(id,tip);
myToolbar.addButton(id,pos,text,imgEnabled,imgDisabled);
myToolbar.setItemToolTip(id,tip);
myToolbar.addSeparator(id,pos);
Related sample: Init from script
Templates for Toolbar controls in JSON format are given below.
The loadStruct() method loads the toolbar data from a JSON file. When the data is loaded into the object, a user-defined handler is called (onLoadFunction), if it was indicated by user. All the data is loaded at once:
myToolbar.loadStruct("[path to this file]/file.json", onLoadFunction);
onLoadFunction = function(){
// data loaded and rendered
// your code here
};
The first parameter of loadStruct() method is the path to the JSON file, while the second parameter is an optional user-defined handler.
The loadStruct() method loads toolbar data from JSON string as well. When the data is loaded into the object, a user-defined handler is called. All the data is loaded at once:
myToolbar.loadStruct('{data:[{id:"a1",..},{id:"a2",..}]}', onLoadFunction);
onLoadFunction = function(){
// data loaded and rendered
// your code here
};
This section will give you the idea of JSON Format Templates for separate Toolbar controls. Its aim is to help you in creating JSON files for dhtmlxToolbar initialization.
// summary
[
{id: "item_a", type: "button", ...},
{id: "item_b", type: "buttonSelect", ...},
{id: "item_c", type: "buttonInput", ...}
]
// button
{
id: "open" // required, if emplty, will be autogenerated
type: "button" // required, item type
img: "open.gif" // optional, icon for the enabled item
imgdis: "open_dis.gif" // optional, icon for the disabled image
text: "Open" // optional, item text
title: "Tooltip here" // optional, tooltip for an item
enabled: false // optional, disable an item
hidden: true // optional, hide an item
action: "function_name" // optional, function name to exec on click
userdata: { // optional, userdata
p1: "value1" // userdata, name:value pairs
p2: "value2"
}
// deprecated from 4.0:
img_disabled: "open_dis.gif" // => imgdis: "open_dis.gif"
disabled: true // => enabled: false
}
// buttonSelect
{
id: "new" // required, if empty, will be autogenerated
type: "buttonSelect" // required, item type
img: "new.gif" // optional, icon for the enabled item
imgdis: "new_dis.gif" // optional, icon for the disabled image
text: "New" // optional, item text
title: "Tooltip here" // optional, tooltip for an item
enabled: false // optional, disable an item
hidden: true // optional, hide an item
action: "function_name" // optional, function name to exec on click
openAll: true // optional, open sublevels by clicking an icon
renderSelect: false // optional, do not show selection in sublevels
mode: "select" // optional, works in "select" mode
width: 70 // optional, static button width, for "select" mode
maxOpen: 5 // optional, count of visible sublevel items
selected: "subitem_id" // optional, preselect item for "select" mode
userdata: { // optional, userdata
p1: "value1" // userdata, name:value pairs
p2: "value2"
}
options: [{ // list of subitems
id: "new_text" // required, if empty, will be autogenerated
type: "button" // required, item type for a button
img: "text_doc.gif" // optional, icon for both enabled/disabled item
text: "Text Document" // optional, item text
enabled: false // optional, disable an item
action: "function_name" // optional, function name to exec on click
userdata: { // optional, userdata
p1: "value1" // userdata, name:value pairs
p2: "value2"
}
},{
id: "sep_id" // required, if empty, will be autogenerated
type: "separator" // required, item type for a separator
}]
// deprecated from 4.0:
img_disabled: "open_dis.gif" // => imgdis: "open_dis.gif"
disabled: true // => enabled: false
options: [{
type: "obj" // => type: "button"
type: "sep" // => type: "separator"
}]
}
// buttonTwoState
{
id: "open" // required, if empty, will be autogenerated
type: "buttonTwoState" // required, item type
img: "open.gif" // optional, icon for the enabled item
imgdis: "open_dis.gif" // optional, icon for the disabled image
text: "Open" // optional, item text
title: "Tooltip here" // optional, tooltip for an item
enabled: false // optional, disable an item
hidden: true // optional, hide an item
action: "function_name" // optional, function name to exec on click
selected: true // optional, pressed on init
userdata: { // optional, userdata
p1: "value1" // userdata, name:value pairs
p2: "value2"
}
// deprecated from 4.0:
img_disabled: "open_dis.gif" // => imgdis: "open_dis.gif"
disabled: true // => enabled: false
pressed: true // => selected: true
}
// buttonInput
{
id: "filter" // required, if empty, will be autogenerated
type: "buttonInput" // required, item type
value: "Text inside input" // optional, text inside of an input
title: "Tooltip here" // optional, tooltip for an item
enabled: false // optional, disable an item
hidden: true // optional, hide an item
width: 120 // optional, input width
userdata: { // optional, userdata
p1: "value1" // userdata, name:value pairs
p2: "value2"
}
// deprecated from 4.0:
disabled: true // => enabled: false
text: "Text inside input" // => value: "Text inside input"
}
// slider
{
id: "net_limit" // required, if empty, will be autogenerated
type: "slider" // required, item type
length: 70 // optional, slider line length
valueMin: 10 // required, min value
valueMax: 100 // required, max value
valueNow: 70 // optional, initial value
textMin: "10 MBit" // optional, text label for min value (left side)
textMax: "100 MBit" // optional, text label for max value (right side)
toolTip: "%v MBit" // optional, tooltip while dragging
// (actual value will replace "%v")
enabled: false // optional, disable an item
hidden: true // optional, hide an item
userdata: { // optional, userdata
p1: "value1" // userdata, name:value pairs
p2: "value2"
}
// deprecated from 4.0:
disabled: true // => enabled: false
value_min: 10 // => valueMin: 10
value_max: 100 // => valueMax: 100
value_now: 70 // => valueNow: 70
text_min: "10 MBit" // => textMin: "10 MBit"
text_max: "100 MBit" // => textMax: "100 MBit"
tip_template: "%v MBit" // => toolTip: "%v MBit"
}
// text
{
id: "info" // required, if empty, will be autogenerated
type: "text" // required, item type
text: "dhtmlxToolbar Demo" // required, item text,
// use span style='color:red;' to modify
title: "Tooltip here" // optional, tooltip for an item
hidden: true // optional, hide an item
userdata: { // optional, userdata
p1: "value1" // userdata, name:value pairs
p2: "value2"
}
}
// separator
{
id: "sep_id" // required, if empty, will be autogenerated
type: "separator" // required, item type
}