Docs
API

Fields

Fields types

button, checkbox, combo, date, hidden, html, line, number, password, radio, segbutton, set, string, switcher, tab, textarea.

button

button field type.

 

items: [{
...
},{
  label: 'Label',
  type: 'button',
  name: 'button',
  buttonText: true
},{
...

checkbox

Boolean

checkbox field type.

 

items: [{
...
},{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true
},{
...

combo

Mixed

combo field type.

 

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

date

String

date field type.

 

items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  value: new Date()

hidden

Mixed

hidden field type.

 

items: [{
  type: 'hidden',
  name: 'param',
  value: true
},{
...

html

String

html field type.

 

items: [{
  type: 'html',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join("")
},{
...

line

line field type.

 

items: [{
  type: 'line',
  defaults: {
    labelAlign: 'top'
  },
  items: [{
    type: 'string',
    label: 'Name',
    emptyText: 'Name',
    name: 'name'
  },{
    type: 'string',
    label: 'SurName',
    emptyText: 'SurName',
    name: 'surname'
  }]
}]
...

number

Number

number field type.

 

items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
...

password

Mixed

password field type.

 

items: [{
  label: 'Pass',
  name: 'pass',
  type: 'password'
...

radio

Mixed

radio field type.

 

items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...

segbutton

String

segmented button field type.

 

items: [{
...
},{
  label: 'Education',
  type: 'segbutton',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{
...

set

set field type.

 


items: [{
  type: 'set',
  label: 'User Info',
  checkbox: true,
  defaults: {
    inputWidth: 180,
    labelWidth: 90,
  },
  items: [{
    type: 'string',
    label: 'Login',
    emptyText: 'Login',
    name: 'login'
  },{
    type: 'password',
    label: 'Password',
    emptyText: 'Password',
    name: 'password'
  }]
},{
...

string

String

string field type.

 

items: [{
  type: 'string',
  label: 'Name',
  name: 'name',
...

switcher

Boolean

switcher field type.

 

items: [{
  type: 'switcher',
  label: 'Active',
  name: 'active',
  value: true
...

tab

String

tab field type.

 

activeTab: 0,
items: [{
  type: 'tab',
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
  type: 'tab',
  items: [{
    type: 'number',
    label: 'Age',
    name: 'age'
  },{
    type: 'checkbox',
    label: 'Married',
    name: 'married'
  }]
},{
  type: 'tab',
  items: [{
    type: 'combo',
    label: 'Country',
    name: 'country',
    data: [
      {index: 0, country: 'USA'},
      {index: 1, country: 'Canada'}
    ],
    displayKey: 'country',
    valueKey: 'index',
    value: 0
  },{
    type: 'textarea',
    inputWidth: 250,
    height: 110,
    emptyText: 'About',
    label: false,
    name: 'about'
  }]
}],
...

textarea

Array

textarea field type.

 

items: [{
  label: 'About',
  type: 'textarea',
  name: 'about',
  emptyText: 'About'
...

defaults

All listed properties can be auto set to columns if they do not already exist.

defaults

Object

Defaults fields properties.

 

defaults: {
  type: 'string'
},

All field configs

allowToggle

Boolean

It is used only for segbutton field.
It enables toggle. 


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...
true

cls

String

The CSS class that will be added to field.
It is used for custom styling field. 


items: [{
  type: 'string',
  label: 'Name',
  cls: 'field-name'
},{
...
}]

column

Boolean

It is used only for radio field.
Placing radio elements in column. 


...
items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...
false

columns

Number

It is used only for radio field.
It defines number of columns to place radio-s. 


...
items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  columns: 2,
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  },{
    text: 'BMW',
    value: 'bmw'
  }]
},{
...
undefined

data

Mixed

It is used only for combo field.
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"}
  ]
}

defaults

Object

It is used only for fields: radio, set, tab .

 

items: [{
  type: 'set',
  label: 'User Info',
  checkbox: true,
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',    
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
...

disabled

Boolean

Disable field. 


items: [{
  label: 'Name',    
  name: 'name',
  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 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: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  events: [{
    change: function(){
      
    }
  }]
},{
...

format

Object

Formatting fields.

 

...
items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  emptyText: 'm.d.Y',
  format: {
    read: 'm.d.Y',
    write: 'm.d.Y',
    edit: 'm.d.Y'
  }
...


...
items: [{
  type: 'number',
  label: 'Salary',
  name: 'salary',
  emptyText: '$80,000',
  format: {
    inputFn: function salaryInputFn(value){
      value = value.toString().replace('$', '').replace(/\,/g,'').replace('-', '').replace('.', '');
        
      if(value.length === 0){
        value = '';
      }     
      else if(value.length > 6){
        value = value.substr(0, 6);
        value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
      else{
        value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
      
      return value;
    }
  }
...

hidden

Boolean

If set to true than field is hidden. 


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

id

String

If to set id, it will be possible to get link on widget over Fancy.getWidget.

 

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

...
var numberField = Fancy.getWidget('employee'),
  newValue = numberField.get() + 2;

numberField.set(newValue);

items

Array

It is used for fields: line, set, tab, radio, segbutton.

 Line field 

items: [{
  type: 'line',
  defaults: {
    labelAlign: 'top'
  },
  items: [{
    type: 'string',
    label: 'Name',
    emptyText: 'Name',
    name: 'name'
  },{
    type: 'string',
    label: 'SurName',
    emptyText: 'SurName',
    name: 'surname'
  }]
}]
...

Radio field 

items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...

Tab field 

activeTab: 0,
items: [{
  type: 'tab',
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
  type: 'tab',
  items: [{
    type: 'number',
    label: 'Age',
    name: 'age'
  },{
    type: 'checkbox',
    label: 'Married',
    name: 'married'
  }]
},{
  type: 'tab',
  items: [{
    type: 'combo',
    label: 'Country',
    name: 'country',
    data: [
      {index: 0, country: 'USA'},
      {index: 1, country: 'Canada'}
    ],
    displayKey: 'country',
    valueKey: 'index',
    value: 0
  },{
    type: 'textarea',
    inputWidth: 250,
    height: 110,
    emptyText: 'About',
    label: false,
    name: 'about'
  }]
}],
...

SegButton field 

},{
  label: 'Education',
  type: 'segbutton',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{

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/Boolean

Text of field.

 

...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true
},{
...

labelAlign

String

Align of label.

Values: right, left, top..

 

...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
},{
...
left

max

Number|Date

Maximum value. 


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  min: 0
  min: 100
},{
...


...
items: [{
  type: 'sale',
  label: 'Sale',
  name: 'sale',
  max: new Date() //today
},{
...
undefined

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'
},{

multiToggle

Boolean

It is used only for segbutton field.
Enables multi toggle. 


...
items: [{
  label: 'Education',
  type: 'segbutton',
  name: 'education',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{
...
true

name

String

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

 

...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
},{
...

spin

Boolean

Enable a pair of up/down spinner buttons.
It is used only for number field. 


items: [{
  label: 'Salary',
  name: 'salary',
  value: 70000,
  spin: true,
  step: 1000,
  type: 'number',
  min: 0,
  max: 150000,
...

step

Number

increment/decrement value for number field if spin is true

 

items: [{
  label: 'Salary',
  name: 'salary',
  value: 70000,
  spin: true,
  step: 1000,
  type: 'number',
  min: 0,
  max: 150000,
...
1

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.

 

{
  label: 'Age',
  type: 'number',
  name: 'age',
  tabIndex: 2
}
undefined

type

String

Type of field.

 

{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
}

value

Mixed

Value of field.

 

items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
...

valueKey

String

Combo data key to associate as value.

 

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