Common Configuration for Form and Toolbar Controls

UI-related Toolbar and Form are container widgets for controls like buttons and icons, input fields and selection controls.

All of the controls can be included in a toolbar or a form as an array of rows/columns or elements respectively. Each control has its own configuration. However, sometimes some properties like width/height, label alignment and label position coincide, which is done to achieve the uniformity of the widget's look-and-feel.

To avoid repetition of the same property for controls belonging to the same toolbar, you can make use of the elementsConfig property. Included into a form or toolbar it sets common configuration for all its children (controls).

Form Configuration

webix.ui({
    view:"form", 
    elements: [
        //..elements
    ],
    elementsConfig:{
        labelPosition:"top",
        on:{ onchange:function(newv, oldv){  
            webix.message("Value changed from: "+oldv+" to: "+newv);
        }}
    }
})

Related sample: Common Configuration

All the controls in this form will have a label on their top and respond to data alteration in input fields.

Toolbar Configuration

webix.ui({
    view:"toolbar",
    elements: [
        { view:"button"},
        { view:"segmented", options:[...]},
        { view:"text"}, 
        { view:"select", options:[...]}
    ],
    elementsConfig:{
        width: 150,
        height: 30,
        value:"edit"
    }
})

No matter how different the controls on the toolbar are, they all will get the same height and width as well as the same "edit" value.