Docs
API
  • number

    Number field type

    Example

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

    Properties

    cls

    String

    The 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

    Boolean

    Disable field.

    
    items: [{
      type: 'number',
      label: 'Age',
      name: 'age',
      disabled: true
    },{
    ...
    //Enable field
    field.enable();
    
    //Disable field
    field.disable();
    

    editable

    Boolean

    It enables editing combo field value.

    
    ...
    items: [{
      type: 'number',
      editable: false,
      label: 'Age',
      name: 'age',
      value: 30
    },{
    ...
    
    true

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

    inputHeight

    Number

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

    
    ...
    items: [{
      label: 'Salary',
      type: 'number',
      name: 'salary',
      inputHeight: 35
    },{
    ...
    

    max

    Number

    Maximum value.

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

    min

    Number

    Minimal value.

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

    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

    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

    ():Number

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

    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(){
          
        }
      }]
    ...