combo

Combo field type

Example


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
...

Properties

data

Mixed

Combo values.


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  events: [{
    change: function(field, value){
      
    }
  }]
},{
...

...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: {
    proxy: {
      url: 'countries.json'
    }
  },
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  events: [{
    change: function(field, value){
      
    }
  }]
},{
...

countries.json
{
  "data": [
    {"index": 0, "country": "Canada"},
    {"index": 1, "country": "Finland"},
    {"index": 2, "country": "France"},
    {"index": 3, "country": "Japan"},
    {"index": 4, "country": "UK"},
    {"index": 5, "country": "USA"}
  ]
}

displayKey

String

Combo data key to display.
It is used only for combo field.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
	{index: 0, country: 'USA'},
	{index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
}]
...

editable

Boolean

It is used only for combo field.
It enables editing combo field value.


...
items: [{
  label: 'Text',
  displayKey: 'valueText',
  valueKey: 'index',
  editable: false,
  data: [{
    index: "AL",
    valueText: "Alabama"
  },{
    index: "AK",
    valueText: "Alaska"
...
true

emptyText

String

Placeholder text.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  emptyText: 'Write your age',
},{
...

events

Array

Set event handler to field.


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  events: [{
    change: function(field, value){
      
    }
  }]
},{
...
left

itemCheckBox

Boolean

Adds checkboxes for filter combo list.


},{
  type: 'combo',
  label: 'Country',
  name: 'country',
  multiSelect: true,
  itemCheckBox: true,
  data: [{
	index: 0,
	country: 'USA'
  }, {
	index: 1,
	country: 'Canada'
  }],
  displayKey: 'country',
  valueKey: 'index'
},{
true

inputHeight

Number

Field input height. It influence only on fields with input element inside.


...
items: [{
  label: 'Salary',
  type: 'number',
  name: 'salary',
  inputHeight: 35
},{
...

label

String

Text of field.


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
},{
...

labelAlign

String

Align of label.

Values: right, left, top.


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  labelAlign: 'right'
},{
...
left

minListWidth

Number

The minimum width of list for combo.
When field is not wide but values in list are long than for better look
it is possible to set minListWidth


minListWidth: 150,

multiSelect

Boolean

Enables multiSelect for combo.


},{
  type: 'combo',
  label: 'Country',
  name: 'country',
  multiSelect: true,
  itemCheckBox: true,
  data: [{
	index: 0,
	country: 'USA'
  }, {
	index: 1,
	country: 'Canada'
  }],
  displayKey: 'country',
  valueKey: 'index'
},{

name

String

Name of field over which it is possible to get value of field.


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
},{
...

type

String

Type of field (value - combo).


{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
}

value

Mixed

Value of field.


{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
}

valueKey

String

Combo data key to associate as value.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: comboData,
  displayKey: 'country',
  valueKey: 'index',
  value: 0
...

Events

change

(field, value)

Value of field.


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  events: [{
    change: function(field, value){
      
    }
  }]
},{
...