loads data to the component via XML or JSON, usually component config
| data | string|object | XML|JSON URL|string|object |
| doOnLoad | function | (optional) calls user-defined handler after data is loaded and rendered |
| promise | a "promise" object |
var myComponent = new dhtmlXComponent();
// local json/xml object
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]});
// local json/xml string
myComponent.loadStruct('<data><node id="a1".../></data>');
// json/xml from server
myComponent.loadStruct("server/data.xml");
// local json/xml with callback
myComponent.loadStruct({data:[{id:"a1",..},{id:"a2",..}]}, function(){
// data loaded and rendered
// your code here
});
// local json/xml string with callback
myComponent.loadStruct('<data><node id="a1".../></data>', function(){
// data loaded and rendered
// your code here
});
// json/xml from server with callback
myComponent.loadStruct("server/data.xml", function(){
// data loaded and rendered
// your code here
});
// returns a "promise" object, see details
myComponent.loadStruct(url).then(function(text){
// text - a server side response
});
The type of incoming data will be detected automatically, so you can use this method for loading both XML and JSON in different formats:string, URL from server, object itself.
In the case of loading config from server:
DHTMLX is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks. Read more about integration of DHTMLX with Promiz.js.
// summary
[
{id: "item_a", type: "button", ...},
{id: "item_b", type: "buttonSelect", ...},
{id: "item_c", type: "buttonInput", ...}
]
// button
{
id: "open" // required, will be generated automatically if empty
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, generated automatically if empty
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, working in the "select" mode
width: 70 // optional, static button width,
// useful in "select" mode
maxOpen: 5 // optional, count of visible sublevel items
selected: "subitem_id" // optional, preselect item for the "select" mode
userdata: { // optional, userdata
p1: "value1" // userdata, name:value pairs
p2: "value2"
}
options: [{ // list of subitems
id: "new_text" // required, generated automatically if empty
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, generated automatically if empty
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, will be generated automatically if empty
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, generated automatically if empty
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, will be generated automatically if empty
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, generated automatically if empty
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, will be generated automatically if empty
type: "separator" // required, item type
}
// summary
<?xml version="1.0"?>
<toolbar>
<item id="item_a" type="button" ... />
<item id="item_b" type="buttonSelect" ... />
<item id="item_c" type="buttonInput" ... />
</toolbar>
// button
<item
id = "open" // required, generated automatically if empty
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
>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item>
// buttonSelect
<item
id = "new" // required, generated automatically if empty
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 the icon
renderSelect = "false" // optional, do not show selection in the sublevel
mode = "select" // optional, working in the "select" mode
width = "70" // optional, static button width,
// useful in "select" mode
maxOpen = "5" // optional, count of visible sublevel items
selected = "subitem_id" // optional, preselect item for the "select" mode
>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
// list of subitems
<item
id = "new_text" // required, generated automatically if empty
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
>
<itemText>
Text Document // optional, alternate the text of an item
</itemText>
</item>
<item
id = "new_text" // required, generated automatically if empty
type = "separator" // required, item type for a separator
/>
</item>
// buttonTwoState
<item
id = "open" // required, will be generated automatically if empty
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
>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item>
// buttonInput
<item
id = "filter" // required, generated automatically if empty
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
>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item>
// slider
<item
id = "net_limit" // required, will be generated automatically if empty
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
>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item>
// text
<item
id = "info" // required, generated automatically if empty
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
>
// optional, userdata
<userdata name="p1">value1</userdata>
<userdata name="p2">value2</userdata>
</item>
// separator
<item
id = "sep_id" // required, will be generated automatically if empty
type = "separator" // required, item type
/>