-
Config
- barHeight
-
bbar
- bbarHeight
-
buttons
- buttonsHeight
- cls
- defaults
- draggable
-
events
-
footer
- height
- id
- i18n
-
items
- column
-
data
- defaults
- disabled
- displayKey
- editable
- emptyText
- events
-
format
- 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
- method
- modal
- params
- renderOuter
- renderTo
- scrollable
- shadow
-
subTitle
-
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
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
Booleancheckbox field type.
items: [{ ... },{ label: 'Married', type: 'checkbox', name: 'married', value: true },{ ...
combo
Mixedcombo 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
Stringdate field type.
items: [{ type: 'date', label: 'Birthday', name: 'birthday', value: new Date()
hidden
Mixedhidden field type.
items: [{ type: 'hidden', name: 'param', value: true },{ ...
html
Stringhtml 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
Numbernumber field type.
items: [{ type: 'number', label: 'Age', name: 'age', ...
password
Mixedpassword field type.
items: [{ label: 'Pass', name: 'pass', type: 'password' ...
radio
Mixedradio 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
Stringsegmented 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
Stringstring field type.
items: [{ type: 'string', label: 'Name', name: 'name', ...
switcher
Booleanswitcher field type.
items: [{ type: 'switcher', label: 'Active', name: 'active', value: true ...
tab
Stringtab 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
Arraytextarea 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
ObjectDefaults fields properties.
defaults: { type: 'string' },
All field configs
allowToggle
BooleanIt 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
StringThe CSS class that will be added to field.
It is used for custom styling field.items: [{ type: 'string', label: 'Name', cls: 'field-name' },{ ... }]
column
BooleanIt 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
NumberIt 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
MixedIt 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
ObjectIt 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
BooleanDisable field.
items: [{ label: 'Name', name: 'name', disabled: true }] ... //Enable field field.enable(); //Disable field field.disable();
displayKey
StringCombo 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
BooleanIt enables/disable editing field value.
... items: [{ label: 'Text', displayKey: 'valueText', valueKey: 'index', editable: false, data: [{ index: "AL", valueText: "Alabama" },{ index: "AK", valueText: "Alaska" ...
true emptyText
StringPlaceholder text.
... items: [{ type: 'number', label: 'Age', name: 'age', emptyText: 'Write your age', },{ ...
events
ArraySet event handler to field.
... items: [{ label: 'Married', type: 'checkbox', name: 'married', value: true, events: [{ change: function(){ } }] },{ ...
format
ObjectFormatting 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
BooleanIf set to true than field is hidden.
tbar: [{ type: 'number', id: 'employee', hidden: true, value: 1 },{ ... }]
id
StringIf 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
ArrayIt is used for fields:
line, set, tab, radio, segbutton
.items: [{ type: 'line', defaults: { labelAlign: 'top' }, items: [{ type: 'string', label: 'Name', emptyText: 'Name', name: 'name' },{ type: 'string', label: 'SurName', emptyText: 'SurName', name: 'surname' }] }] ...
Radio fielditems: [{ 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 fieldactiveTab: 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' }] },{
inputHeight
NumberField input height. It influence only on fields with input element inside.
... items: [{ label: 'Salary', type: 'number', name: 'salary', inputHeight: 35 },{ ...
itemCheckBox
BooleanAdds 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
NumberField input height. It influence only on fields with input element inside.
... items: [{ label: 'Salary', type: 'number', name: 'salary', inputHeight: 35 },{ ...
label
String/BooleanText of field.
... items: [{ label: 'Married', type: 'checkbox', name: 'married', value: true },{ ...
labelAlign
StringAlign of label.
Values: right, left, top..
... items: [{ label: 'Married', type: 'checkbox', name: 'married', value: true, labelAlign: 'right' },{ ...
left leftTpl
StringTemplate 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, displayTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>', 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 leftWidth
NumberWidth 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, displayTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>', 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 max
Number|DateMaximum 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
NumberMax number of row in list.
This property is used only for combo field.maxListRows: 7,
9 min
Number|DateMinimal value.
... items: [{ type: 'number', label: 'Age', name: 'age', min: 0 },{ ...
... items: [{ type: 'sale', label: 'Sale', name: 'sale', max: new Date(), //today min: new Date(2017, 1, 1) },{ ...
undefined minListWidth
NumberThe 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 setminListWidth
minListWidth: 150,
multiSelect
BooleanEnables 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
BooleanIt 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
StringName of field over which it is possible to get value of field.
... items: [{ label: 'Married', type: 'checkbox', name: 'married', value: true, labelAlign: 'right' },{ ...
showPassTip
BooleanSpecial right side element to show/hide password.
{ label: 'Pass', name: 'pass', showPassTip: true, type: 'password' }
false spin
BooleanEnable 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
Numberincrement/decrement value for number field if
spin
is trueitems: [{ label: 'Salary', name: 'salary', value: 70000, spin: true, step: 1000, type: 'number', min: 0, max: 150000, ...
1 subSearch
BooleanEnables search field in list with values.
This property disableseditable
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
NumberSets 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
StringType of field.
{ label: 'Married', type: 'checkbox', name: 'married', value: true, labelAlign: 'right' }
value
MixedValue of field.
items: [{ label: 'Married', type: 'checkbox', name: 'married', value: true, labelAlign: 'right' ...
valueKey
StringCombo data key to associate as value.
items: [{ type: 'combo', label: 'Country', name: 'country', data: comboData, displayKey: 'country', valueKey: 'index', value: 0 ...
vtype
MixedValidation.
},{ name: 'age', label: 'Age', type: 'number', vtype: { before: ['notempty', 'notnan'], type: 'max', param: 70 } }]
},{ name: 'email', label: 'Email', vtype: 'email' },{
width
NumberField width.
items: [{ label: 'Name', width: 100, type: 'string', name: 'name', labelAlign: 'right' ...
-
date