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"
    }
})

Related sample:  Toolbar: Common Configuration

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.

Back to top