number

Number field type

Example


items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
...

Properties

emptyText

String

Placeholder text.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  emptyText: 'Write your age',
},{
...

events

Array

Set event handler to field.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  events: [{
    change: function(){
      
    }
  }]
},{
...

format

Function

Formatting.


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

String

If 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);

min

Number

Minimal value.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  min: 0
},{
...

max

Number

Maximum value.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  min: 0
  min: 100
},{
...

label

String

Text of field.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
},{
...

labelAlign

String

Align of label.

Values: right, left, top.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  labelAlign: 'right'
},{
...
left

name

String

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


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
},{
...

spin

Boolean

Enable 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

Number

increment/decrement value for number field if spin is true


items: [{
  label: 'Salary',
  name: 'salary',
  value: 70000,
  spin: true,
  step: 1000,
  type: 'number',
  min: 0,
  max: 150000,
...
1

type

String

Type of field (value - number).


{
  type: 'number',
  label: 'Age',
  name: 'age',
}

value

Number

Value of field.


items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  value: 35
...

Methods

clear

()

Clear value.


tbar: [{
  type: 'number',
  id: 'employee',
  value: 1
},{
...
}] 

...
var numberField = Fancy.getWidget('employee');

numberField.clear();

get

():Number

return value of field.


tbar: [{
  type: 'number',
  id: 'employee',
  value: 1
},{
...
}] 

...
var numberField = Fancy.getWidget('employee'),
  newValue = numberField.get() + 2;

numberField.set(newValue);

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);

Events

change

(field, value)

Value of field.


items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  events: [{
    change: function(){
      
    },
    scope: {}//not required
  }]
...