Docs

API

Config
- barHeight
- bbar
  - allowToggle
  - cls
  - data
  - disabled
  - displayKey
  - editable
  - emptyText
  - enableToggle
  - events
  - format
  - handler
  - hidden
  - id
  - imageCls
  - inputHeight
  - itemCheckBox
  - leftTpl
  - leftWidth
  - max
  - menu
  - min
  - minListWidth
  - multiSelect
  - multiToggle
  - pressed
  - spin
  - step
  - subSearch
  - text
  - tip
  - toggleGroup
  - type
  - valueKey
  - vtype
  - width
- bbarHeight
- buttons
  - allowToggle
  - cls
  - data
  - disabled
  - displayKey
  - editable
  - emptyText
  - enableToggle
  - events
  - format
  - handler
  - hidden
  - id
  - imageCls
  - inputHeight
  - itemCheckBox
  - leftTpl
  - leftWidth
  - max
  - menu
  - min
  - minListWidth
  - multiSelect
  - multiToggle
  - pressed
  - spin
  - step
  - subSearch
  - text
  - tip
  - toggleGroup
  - type
  - valueKey
  - vtype
  - width
- buttonsHeight
- cls
- defaults
- draggable
- events
  - init
  - set
  - scope
- footer
  - status
  - source
    - text
    - link
- height
- id
- i18n
- items
  - column
  - data
    proxy
    
    reader
    
    root
    
    url
  - defaults
  - disabled
  - displayKey
  - editable
  - emptyText
  - events
  - format
    edit
    
    inputFn
    
    read
    
    write
  - itemCheckBox
  - inputHeight
  - inputLabel
  - inputWidth
  - label
  - labelAlign
  - labelWidth
  - listItemTpl
  - leftTpl
  - leftWidth
  - max
  - min
  - minListWidth
  - multiSelect
  - multiToggle
  - name
  - showPassTip
  - spin
  - step
  - subSearch
  - tabIndex
  - type
  - value
  - valueKey
  - vtype
  - width
- lang
  - date
    read
    
    write
    
    edit
    
    today
    
    startDay
    
    days
    
    months
    
    am
    
    pm
    
    AM
    
    PM
    
    ok
    
    cancel
  - decimalSeparator
  - loadingText
  - sourceText
  - thousandSeparator
- method
- modal
- params
- renderOuter
- renderTo
- scrollable
- shadow
- subTitle
  - cls
  - style
  - text
- subTBar
  - allowToggle
  - action
  - cls
  - data
  - disabled
  - displayKey
  - editable
  - emptyText
  - enableToggle
  - events
  - format
  - handler
  - hidden
  - id
  - imageCls
  - inputHeight
  - itemCheckBox
  - leftTpl
  - leftWidth
  - max
  - menu
  - minListWidth
  - multiSelect
  - multiToggle
  - paramsMenu
  - paramsText
  - pressed
  - spin
  - step
  - subSearch
  - text
  - tip
  - toggleGroup
  - type
  - valueKey
  - vtype
  - width
- subTBarHeight
- tbar
  - allowToggle
  - action
  - cls
  - data
  - disabled
  - displayKey
  - editable
  - emptyText
  - enableToggle
  - events
  - format
  - handler
  - hidden
  - id
  - imageCls
  - inputHeight
  - itemCheckBox
  - leftTpl
  - leftWidth
  - max
  - menu
  - minListWidth
  - multiSelect
  - multiToggle
  - paramsMenu
  - paramsText
  - pressed
  - spin
  - step
  - subSearch
  - text
  - tip
  - toggleGroup
  - type
  - valueKey
  - vtype
  - width
- tbarHeight
- title
  - cls
  - style
  - text
  - tools
    handler
    
    text
- theme
  - name
  - config
    barHeight
    
    bottomScrollHeight
    
    panelBorderWidth
    
    titleHeight
- url
- width
- window
Fields
- button
- checkbox
- combo
- date
- hidden
- html
- line
- number
- password
- radio
- segbutton
- set
- string
- switcher
- tab
- textarea
Events
- init
- set
Methods
- clear
- destroy
- each
- get
- getItem
- getSubTitle
- getTitle
- getValues
- hide
- hideBar
- nextTab
- on
- once
- prevTab
- remove
- set
- setActiveTab
- setHeight
- setSubTitle
- setTitle
- setWidth
- show
- showat
- showBar
- submit
- un
- valid

radio

Radio field type

Example


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

Properties

cls

^String

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

column

^Boolean

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

events

^Array

Set event handler to 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'
  }],
  events: [{
    change: function(){
      
    }
  }]
},{
...

items

^Array

Radio values.


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

label

^String

Text of 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'
  }]
},{
...

labelAlign

^String

Align of label.

Values: right, left, top.


...
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'
  }],
  labelAlign: 'right'
},{
...

left

name

^String

Name of field over which it is possible to get value of 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'
  }]
},{
...

type

^String

Type of field (value - radio).


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

value

^Boolean

Value of 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'
  }]
...

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}

Returns value of field.
Every radio item has text and value.
It will return not displayed text but radio item value.


field.set('uk');

set

^{(value: String)}

Sets value of field.
Every radio item has text and value.
To change value needs to know radio item value.


field.set('uk');

setWidth

^{(value: Number)}

Set new field width.


field.setWidth(400);

Events

change

^{(field, value)}

Change field value event.


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'
  }],
  events: [{
    change: function(){
      
    },
    scope: {}//not required
  }]
...