Common Configuration for Form and Toolbar Controls

UI-related Toolbar and Form are specific components since they don't mean much as they are yet act as containers for controls like buttons and icons, input fields and selection controls.

All the controls are included in a toolbar and 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 component's look-and-feel.

To avoid multiple repetition of one and the same property for controls belonging to one and 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: [//..elenemts 
        ]
    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 with have the 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 will all get the same height and width as well as the same "edit" value.

Back to top