Docs
API

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

    subSearch

    Boolean

    Enables search field in list with values.
    This property disables editable property.
    It is used only for combo type. 

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

    tabIndex

    Number

    Sets a DOM tabIndex for this field.
    tabIndex may be set to -1 in order to remove the field from the tab rotation.
    Available for fields with input.

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

    tip

    String|Number

    Field tip.

     
    
}, {
  label: 'Name',
  tip: 'Name',
  emptyText: 'Name',
  name: 'name'
}, {
  label: 'SurName',
  tip: '{value}',
  emptyText: 'SurName',
  value: 'Johnson',
  name: 'surname'
}, {
  label: 'E-mail',
  emptyText: 'E-mail',
  name: 'email',
  tip: function(field, value, label) {
	return field.label;
  }
}, {

    Sample on JSFiddle

    undefined

    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

    blur

    ()

    Blur field.

     
    
field.blur();

    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();

    focus

    ()

    Focus field.

     
    
field.focus();

    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'}
]);

    setWidth

    (value: Number)

    Set new field width. 

    
field.setWidth(400);

    validation

    ():Boolean

    Force field validation.
    It returns validation status. 

    
field.validation();

    Events

    blur

    (field)

    Losing focus from field event.

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

    change

    (field, value)

    Change field value event.

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

    focus

    (field)

    Focus field event.

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