UI-related combo is a text-like field with a popup window that appears as you click the field. A popup displays options for users to select. At the same time, you can edit the text field and the items will be filtered according to the input values.
Related sample: Editable Combo Box ('combo')
//short form
{
view:"combo",
id:"field_m",
label:"Combo",
value:"One",
options:["One", "Two", "Three"]
}
//full form
{
view:"combo",
id:"field_t",
label:"Combo",
value:"1",
options:[
{id:1, value:"One"},
{id:2, value:"Two"},
{id:3, value:"Three"}
]
}
//server options
{ view:"combo", options:"server/data.json"}
Combo API allows getting an object of a popup and a list inside it for further usage:
var popup = combo.getPopup();
var list = popup.getBody();
//or
var list = popup.getList();
Combo box control can be customized in a number of ways, e.g.:
To learn more, go to Advanced Combo and Richselect Settings article.
In the Webix Pro edition the control can be extended to show either a dataview or datatable in the popup:
In case of a full initialization form, the getValue() method for combo will return ID of selected option rather than text. Use getInputNode() to get to input object and, hence, the text value.
$$("field_t").getValue(); // -> returns 1
$$("field_t").getInputNode().value // -> returns "One"
Related sample: Working with UnitList Items