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){
      
    }
  }]
},{
...

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

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

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){
      
    }
  }]
},{
...