-
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
number
Number field type
Example
items: [{ type: 'number', label: 'Age', name: 'age', ...
Properties
cls
StringThe CSS class that will be added to field.
It is used for custom styling field.items: [{ type: 'number', label: 'Age', name: 'age', cls: 'field-age' },{ ... }]
disabled
BooleanDisable field.
items: [{ type: 'number', label: 'Age', name: 'age', disabled: true },{ ... //Enable field field.enable(); //Disable field field.disable();
editable
BooleanIt enables editing combo field value.
... items: [{ type: 'number', editable: false, label: 'Age', name: 'age', value: 30 },{ ...
true emptyText
StringPlaceholder text.
... items: [{ type: 'number', label: 'Age', name: 'age', emptyText: 'Write your age', },{ ...
events
ArraySet event handler to field.
... items: [{ type: 'number', label: 'Age', name: 'age', events: [{ change: function(){ } }] },{ ...
format
FunctionFormatting.
... 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; } } ...
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);
inputHeight
NumberField input height. It influence only on fields with input element inside.
... items: [{ label: 'Salary', type: 'number', name: 'salary', inputHeight: 35 },{ ...
max
NumberMaximum value.
... items: [{ type: 'number', label: 'Age', name: 'age', min: 0 min: 100 },{ ...
min
NumberMinimal value.
... items: [{ type: 'number', label: 'Age', name: 'age', min: 0 },{ ...
label
StringText of field.
... items: [{ type: 'number', label: 'Age', name: 'age', },{ ...
labelAlign
StringAlign of label.
Values:
right
,left
,top
.... items: [{ type: 'number', label: 'Age', name: 'age', labelAlign: 'right' },{ ...
left name
StringName of field over which it is possible to get value of field.
... items: [{ type: 'number', label: 'Age', name: 'age', },{ ...
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 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 tip
String|NumberField 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
StringType of field (value - number).
{ type: 'number', label: 'Age', name: 'age', }
value
NumberValue of field.
items: [{ type: 'number', label: 'Age', name: 'age', value: 35 ...
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
():Numberreturn value of field.
tbar: [{ type: 'number', id: 'employee', value: 1 },{ ... }] ... var numberField = Fancy.getWidget('employee'); numberField.get();
set
(value: Number)Set value of field.
tbar: [{ type: 'number', id: 'employee', value: 1 },{ ... }] ... var numberField = Fancy.getWidget('employee'), newValue = numberField.get() + 2; numberField.set(newValue);
setWidth
(value: Number)Set new field width.
field.setWidth(400);
validate
():BooleanForce field validation.
It returns validation status.field.validate();
Events
blur
(field)Losing focus from field event.
items: [{ type: 'number', label: 'Age', name: 'age', events: [{ blur: function(){ } }] ...
change
(field, value)Change field value event.
items: [{ type: 'number', label: 'Age', name: 'age', events: [{ change: function(){ }, scope: {}//not required }] ...
focus
(field)Focus field event.
items: [{ type: 'number', label: 'Age', name: 'age', events: [{ focus: function(){ } }] ...
-
date