Docs
API
  • radio

    Radio field type

    Example

    
    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'
      }]
    },{
    ...
    

    Properties

    cls

    String

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

    
    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'
      }],
      cls: 'field-brand'
    },{
    ...
    }]
    

    column

    Boolean

    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

    Number

    It 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

    events

    Array

    Set event handler to field.

    
    ...
    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'
      }],
      events: [{
        change: function(){
          
        }
      }]
    },{
    ...
    

    items

    Array

    Radio values.

    
    ...
    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'
      }]
    },{
    ...
    

    label

    String

    Text of field.

    
    ...
    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'
      }]
    },{
    ...
    

    labelAlign

    String

    Align of label.

    Values: right, left, top.

    
    ...
    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'
      }],
      labelAlign: 'right'
    },{
    ...
    
    left

    name

    String

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

    
    ...
    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'
      }]
    },{
    ...
    

    type

    String

    Type of field (value - radio).

    
    {
      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'
      }]
    }
    

    value

    Boolean

    Value of field.

    
    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'
      }]
    ...
    

    Methods

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

    get

    (): String

    Returns value of field.
    Every radio item has text and value.
    It will return not displayed text but radio item value.

    
    field.set('uk');
    

    set

    (value: String)

    Sets value of field.
    Every radio item has text and value.
    To change value needs to know radio item value.

    
    field.set('uk');
    

    setWidth

    (value: Number)

    Set new field width.

    
    field.setWidth(400);
    

    Events

    change

    (field, value)

    Change field value event.

    
    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'
      }],
      events: [{
        change: function(){
          
        },
        scope: {}//not required
      }]
    ...