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
  - delay
  - 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
  - tip
  - 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
- getHeight
- getItem
- getSubTitle
- getTitle
- getValues
- hide
- hideBar
- nextTab
- on
- once
- prevTab
- remove
- set
- setActiveTab
- setHeight
- setSubTitle
- setTitle
- setWidth
- show
- showat
- showBar
- submit
- un
- valid

switcher

Switcher field type

Example


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

Properties

events

^Array

Set event handler to field.


...
items: [{
  type: 'switcher',
  label: 'Active',
  name: 'active',
  value: true
  events: [{
    change: function(){
      
    }
  }]
},{
...

id

^String

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


tbar: [{
  type: 'switcher',
  id: 'married',
  value: true
},{
...
}] 

...
var switcher = Fancy.getWidget('married');

switcher.set(true);

label

^String

Text of field.


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

labelAlign

^String

Align of label.

Values: right, left, top.


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

left

name

^String

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


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

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


{
  type: 'switcher',
  label: 'Active',
  name: 'active',
  value: true
}

value

^Boolean

Value of field.


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

Methods

blur

⁽⁾

Blur field.


field.blur();

clear

⁽⁾

Clear value.


tbar: [{
  type: 'switcher',
  id: 'married',
  value: true
},{
...
}] 

...
var switcher = Fancy.getWidget('married');

switcher.clear();

disable

⁽⁾

Disable field.


field.disable();

enable

⁽⁾

Enable field.


field.enable();

focus

⁽⁾

Focus field.


field.focus();

get

^():Boolean

return value of field.


tbar: [{
  type: 'switcher',
  id: 'married',
  value: true
},{
...
}] 

...
var switcher = Fancy.getWidget('married');

switcher.get();

set

^{(value:Boolean)}

set value of field.


tbar: [{
  type: 'switcher',
  id: 'married',
  value: true
},{
...
}] 

...
var switcher = Fancy.getWidget('married');

switcher.set(true);

setWidth

^{(value: Number)}

Set new field width.


field.setWidth(400);

Events

blur

^(field)

Losing focus from field event.


items: [{
  type: 'switcher',
  label: 'Active',
  name: 'active',
  value: true,
  events: [{
    blur: function(){
      
    }
  }]
...

change

^{(field, value)}

Change field value event.


items: [{
  type: 'switcher',
  label: 'Active',
  name: 'active',
  value: true,
  events: [{
    change: function(){
      
    },
    scope: {}//not required
  }]
...

focus

^(field)

Focus field event.


items: [{
  type: 'switcher',
  label: 'Active',
  name: 'active',
  value: true,
  events: [{
    focus: function(){
      
    }
  }]
...