Controls are the most important components for event handling since they enable interaction with users. They are used separately as well as can be nested into toolbar, form, and other components. All ui-related controls inherit from input.
Button, Checkbox, Colorpicker, Combo, Counter, Datepicker, Icon, Imagebutton, Label, Radio, Richselect, Search, Select, Segmented, Suggest List, Tabbar, Text, Textarea, Toggle
When working with controls, specify their IDs if you want to refer to them later and attach events to them.
Controls share a lot of features that work the same way with most of them or with very little difference.
Control constructor includes its name and properties defining its look-and-feel and behavior.
Some properties duplicate HTML attributes, some are typically Webix control properties. In addition, you can set necessary HTML attributes to your control within attributes object property.
{view:"text", width:200, click:"", attributes:{ maxlength:10 }...}
The label (string) property sets a text label for a control, a string placed by the control.
Please, don't mix it with a separate view label.
Related sample: Positioning Labels
Any control can be set disabled and readonly with the help of dedicated properties:
elements:[
{view:"text", readonly:true},
{view:"datepicker", disabled:true}
]
Here we make use of the align (string) property that defines horizontal position of the control and its label with respect to the parent container (e.g. form):
Related sample: Aligning Inputs and Labels
Each time control is inited, space is reserved for it. It either equals to parent (form, toolbar) dimensions or is set as control width.
In case several controls are in the same row/column, the available space is distributed equally among them.
Total width of the control includes inputWidth and, therefore, labelWidth (study the picture). If you set width less than the combination of them, a part of the control won't be visible. At the same time, you can make width bigger - then, spacing will appear.
The following sizing options are possible:
//text2 is 3 times bigger than text1
rows:[
{view:"text", name:"text1", gravity:1},
{view:"text", name:"text2", gravity:3}
]
Controls can trigger any function for any component in the application. Study Event Handling for details.
Inner events of controls include:
Two major possibilities here include:
1 . Attaching event inside the control constructor.
With the click property. It equals to the "onItemClick" event.
{view:"button", click:"$$("my_form").save()" }
With the on property that allows attaching custom handlers to specified inner events of the control:
//clicking
{view:"button", on:{
'onItemClick': function(){...}
}
}
//state changing
{view:"text", on:{'onChange': function(){... }
}
}
2 . The same using the attachEvent() method.
//clicking
$$("my_button").attachEvent("onItemClick", function(){.... });
//state changing
$$("my_text").attachEvent("onChange", function(){.....});
The implementation of an onChange() function is described in the Form documentation.
Each form field can have one related field defined by its relatedView property.
This field can react on changes in master field and change it's state:
This behaviour is also defined by the master field with the relatedAction property:
Enabling a form field by changes in another
elements:[
{view:"text", id:"master", relatedView:"slave", relatedAction:"enable"},
{view:"text", id:"slave", disabled:true}
]
The following conditions should be observed:
Related sample: Automatic form reconfiguration
Single-value controls
For such controls as text and textarea value property isn't normally set beforehand, as they are intended for user filling.
So these exist different variants of value treating:
Multiple-value controls
Such controls fall into two groups:
These values are set within options property either as an array or as a collections of objects.
Array of options for Combo box
{ view:"combo", id:'field_m', label: 'Combo', value:"One", yCount:"3",
options:["One", "Two", "Three"]}
The initial value is specified by the value property and corresponds to any value from the predefined ones:
Collection of objects
{ view:"radio", label:"Branch", value:1,options:[
{ value:"Master", id:1 },
{ value:"Branch", id:2 }]
}
Th initial value can be set as a text value of any option:
{ view:"radio", label:"Branch", text:"Master",options:[
{ value:"Master", id:1 },
{ value:"Branch", id:2 }]
}
If both text and value properties are defined, the text one will be ignored.
Related sample: Radio Button ('radio')
Serverside options for multiple-value controls
Such controls as select, richselect and combo can get values from the serverside. The script that returns the needed data, can be defined directly in the options property:
view:"combo", options:"server/data.json"
Related sample: Advanced options for select controls ('combo' and 'richselect')
Note that the getValue() method will return the ID of the currently selected tab/segment/option.
Values can be as well set after initialization with the help of the dedicated setValue() method for a single control or setValues() to set the values for controls within the form. Find the latter in the related article.
Both methods take the needed value (or object with 'ID-value' pair(s)) as parameter and are called from the necessary control or the form where the controls are nested:
$$('text1').setValue('Anna'); //for a single text field with "text1" ID
$$('form1').setValues( //value for 2 text field in the form
{ text1:"Anna",
text2:"Brown"}
)
Values of two-state controls(checkbox and radio) can be changed programmatically in different ways:
$$("mycheckbox").toggle(); //-> if checked - becomes unchecked and vice versa
Within the library we have two methods for getting values:
In case you want to get the value of a separate control, call the getValue method from it:
{view:"select", id:"my_sel", value:1, options:[
{ id:1, value:"Master" },
{ id:2, value:"Release" } ]
}
var value = $$("my_sel").getValue(); //- > returns 1
In case controls are embedded into a form, we call the getValues() method from this form while specifying name or ID of the dedicated control.
webix.ui({
view:"form", elements:[
{view:"text", id:"title", value:""},
...//other controls
]
})
var title = $$("myform").getValues().title, //-> retuns value of text input
Conrol Value can be different:
In case the getValue() method returns object (e.g. date object) and you'd like to see the string result at once, you can include the stringResult property into the control constructor:
webix.ui({
view:"datepicker",
stringResult:true, // false by default
..config
});
All controls can be shown and hidden on demand:
For hidden inputs within the form the library offer peculiar API that actually eliminates the need of creating hidden fields. Here you manipulate with values only.
Controls can be styled to your taste with the help of CSS Image Maps.
If you have several instances of one and the same control within a form or a toolbar (a lot of text fields in the form or several buttons on a toolbar) and want them to have the same properties, you can define these properties only once in an elementsConfig object.
Find more info in the corresponding article of our documentation.
Back to top