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

date

Date field type

Example


items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday'

Properties

cls

^String

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


items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  cls: 'field-birthday'
},{
...
}]

disabled

^Boolean

Disable field.


items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  disabled: true
},{
...
//Enable field
field.enable();

//Disable field
field.disable();

editable

^Boolean

It enables/disable editing field value.


...
items: [{
  editable: false,
  type: 'date',
  label: 'Birthday',
  name: 'birthday'
...

true

events

^Array

Set event handler to field.


...
items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday'
  events: [{
    change: function(){
      
    }
  }]
},{
...

disabled

^Boolean

Disable field.


items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  disabled: true
},{
...

format

^Mixed

Formatting.


{
  label: 'Birthday',
  name: 'birthday',
  value: item.birthday,
  format: {
    read: 'Y.m.d',
    write: 'Y.m.d',
    edit: 'd.m.Y'
  },
  type: 'date'
}

inputHeight

^Number

Field input height. It influence only on fields with input element inside.


{
  label: 'Birthday',
  name: 'birthday',
  value: item.birthday,
  format: {
    read: 'Y.m.d',
    write: 'Y.m.d',
    edit: 'd.m.Y'
  },
  type: 'date',
  inputHeight: 35
}

label

^String

Text of field.


...
items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday'
},{
...

labelAlign

^String

Align of label.

Values: right, left, top.


...
items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday'
  labelAlign: 'right'
},{
...

left

max

^Date

The maximum allowed date value for this field.


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

min

^Date

The minimum allowed date value for this field.


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

name

^String

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


...
items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday'
},{
...

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: 'date',
  label: 'Birthday',
  name: 'birthday',
  tabIndex: 2
}

undefined

type

^String

Type of field (value - date).


{
  type: 'date',
  label: 'Birthday',
  name: 'birthday'
}

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

value

^Date

Value of field.


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

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

return value of field.


field.get();

set

^{(value: Date)}

Sets value of field.


field.set(new Date(2017, 2, 17));

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: 'date',
  label: 'Birthday',
  name: 'birthday',
  events: [{
    blur: function(){
      
    }
  }]
...

change

^{(field, value)}

Change field value event.


items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  events: [{
    change: function(){
      
    },
    scope: {}//not required
  }]
...

focus

^(field)

Focus field event.


items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  events: [{
    focus: function(){
      
    }
  }]
...