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

cls

String

The CSS class that will be added to field.
It is used for custom styling 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){
      
    }
  }],
  cls: 'field-country'
},{
...
}]

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"}
  ]
}

disabled

Boolean

Disable field.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
	{index: 0, country: 'USA'},
	{index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  disabled: true
},{
...
//Enable field
field.enable();

//Disable field
field.disable();

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 enables editing combo field value.
If editable: false than sub search for combo list enables.


...
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

leftTpl

String

Template for left input element.

This property is presented for only combo field.


...
items: [{
  width: 300,
  label: 'Phone',
  displayKey: 'country',
  valueKey: 'country',
  itemCheckBox: true,
  value: 'UK',
  emptyText: 'Select Language',
  leftTpl: '<span class="flag {cls}"></span><span class="phone-code">{code}</span>',
  leftWidth: 55,
  listItemTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>',
  data: [{
    index: 'uk',
	country: 'UK',
	code: '+44',
	cls: 'flag-uk'
  },{
	index: 'in',
	country: 'India',
	code: '+91',
	cls: 'flag-in'
  },{
	index: 'usa',
	country: 'USA',
	code: '+1',
	cls: 'flag-usa'
  },{
	index: 'ja',
	country: 'Japan',
	code: '+81',
	cls: 'flag-ja'
  }];
},{
...
undefined

listItemTpl

Number

Template for list item.

This property is presented for only combo field.


...
items: [{
  width: 300,
  label: 'Phone',
  displayKey: 'country',
  valueKey: 'country',
  itemCheckBox: true,
  value: 'UK',
  emptyText: 'Select Language',
  leftTpl: '<span class="flag {cls}"></span><span class="phone-code">{code}</span>',
  leftWidth: 55,
  listItemTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>',
  data: [{
    index: 'uk',
	country: 'UK',
	code: '+44',
	cls: 'flag-uk'
  },{
	index: 'in',
	country: 'India',
	code: '+91',
	cls: 'flag-in'
  },{
	index: 'usa',
	country: 'USA',
	code: '+1',
	cls: 'flag-usa'
  },{
	index: 'ja',
	country: 'Japan',
	code: '+81',
	cls: 'flag-ja'
  }];
},{
...

leftWidth

Number

Width for for left input element.

This property is presented for only combo field and requires leftTpl.


...
items: [{
  width: 300,
  label: 'Phone',
  displayKey: 'country',
  valueKey: 'country',
  itemCheckBox: true,
  value: 'UK',
  emptyText: 'Select Language',
  leftTpl: '<span class="flag {cls}"></span><span class="phone-code">{code}</span>',
  leftWidth: 55,
  listItemTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>',
  data: [{
    index: 'uk',
	country: 'UK',
	code: '+44',
	cls: 'flag-uk'
  },{
	index: 'in',
	country: 'India',
	code: '+91',
	cls: 'flag-in'
  },{
	index: 'usa',
	country: 'USA',
	code: '+1',
	cls: 'flag-usa'
  },{
	index: 'ja',
	country: 'Japan',
	code: '+81',
	cls: 'flag-ja'
  }];
},{
...
20|0

maxListRows

Number

Max number of row in list.
This property is used only for combo field.


maxListRows: 7,
9

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
...

Methods

clear

()

Clear value.


tbar: [{
  type: 'number',
  id: 'employee',
  value: 1
},{
...
}] 

...
var numberField = Fancy.getWidget('employee');

numberField.clear();

disable

()

Disable field.


field.disable();

enable

()

Enable field.


field.enable();

get

():String|Array

Returns value of field.
If field has property multiSelect: true than returns Array of strings.


field.get();

getInputValue

():String

Returns displayed value in field input.
This method is used only for combo since value and displayed value for combo could be different.


field.getInputValue();

set

(value: String|Number)

Set value of field.
For combo should be taken value according to valueKey property.


field.set('US');

setData

(data: Array)

Set new combo data.


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

combo.setData([
  {index: 0, country: 'Canada'},
  {index: 1, country: 'Mexico'},
  {index: 2, country: 'USA'}
]);

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

empty

(field)

This event occurs when field input is cleaned.
It is used only for combo field and is required because
event change does not react on cleaning field input.


...
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){
      grid.addFilter(field.name, value);
    }
  },{
    empty: function(field){
	  grid.addFilter(field.name, '');
	}
  }]
},{
...