Docs
API
  • string

    String field type

    Example

    
    items: [{
      type: 'string',
      label: 'Name',
      name: 'name',
    ...
    

    Properties

    cls

    String

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

    
    items: [{
      editable: false,
      type: 'string',
      label: 'Name',
      name: 'name',
      cls: 'field-name'
    },{
    ...
    }]
    

    editable

    Boolean

    It enables/disable editing field value.

    
    ...
    items: [{
      editable: false,
      type: 'string',
      label: 'Name',
      name: 'name'
    ...
    
    true

    emptyText

    String

    Placeholder text.

    
    ...
    items: [{
      type: 'string',
      label: 'Name',
      name: 'name',
      emptyText: 'Write your name',
    },{
    ...
    

    events

    Array

    Set event handler to field.

    
    ...
    items: [{
      type: 'string',
      label: 'Name',
      name: 'name',
      events: [{
        change: function(){
          
        }
      }]
    },{
    ...
    

    format

    Function

    Formatting.

    
    function phoneInputFn(value){
      value = parseInt(value.replace(/\-/g, ''));
      
      if(isNaN(value)){
        value = '';
      }
      else{
        value = String(value);
      }
      
      switch(value.length){
        case 0:
        case 1:
        case 2:
          break;
        case 4:
        case 5:
        case 6:
          value = value.replace(/^(\d{3})/, "$1-");
          break;
        case 7:
        case 8:
        case 9:
          value = value.replace(/^(\d{3})(\d{3})/, "$1-$2-");
          break;
        case 10:
          value = value.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
          break;
        default:
          value = value.substr(0, 10);
          value = value.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
      }
      
      return value;
    }
    ...
    items: [{
      label: 'Phone',
      name: 'phone',
      emptyText: 'xxx-xxx-xxxx',
      format: {
        inputFn: phoneInputFn
      }
    

    id

    String

    If to set id, it will be possible to get link on widget over Fancy.getWidget.

    
    tbar: [{
      type: 'string',
      id: 'position',
      value: 'JavaScript Architect'
    },{
    ...
    }] 
    
    ...
    var stringField = Fancy.getWidget('position');
    
    stringField.set('CEO');
    

    inputHeight

    Number

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

    
    ...
    items: [{
      label: 'Name',
      type: 'string',
      inputHeight: 35
    },{
    ...
    

    label

    String

    Text of field.

    
    ...
    items: [{
      type: 'string',
      label: 'Name',
      name: 'name',
    },{
    ...
    

    labelAlign

    String

    Align of label.

    Values: right, left, top.

    
    ...
    items: [{
      type: 'string',
      label: 'Name',
      name: 'name',
      labelAlign: 'right'
    },{
    ...
    
    left

    name

    String

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

    
    ...
    items: [{
      type: 'string',
      label: 'Name',
      name: 'name',
    },{
    ...
    

    tabIndex

    Number

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

    
    {
      type: 'string',
      label: 'Name',
      name: 'name',
      tabIndex: 2
    }
    
    undefined

    tip

    String|Number

    Field 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

    String

    Type of field (value - number).

    
    {
      type: 'string',
      label: 'Name',
      name: 'name',
    }
    

    value

    Boolean

    Value of field.

    
    items: [{
      type: 'string',
      label: 'Name',
      name: 'name',
      value: 35
    ...
    

    Methods

    blur

    ()

    Blur field.

    
    field.blur();
    

    clear

    ()

    Clear value.

    
    tbar: [{
      type: 'string',
      id: 'position',
      value: 'JavaScript Architect'
    },{
    ...
    }] 
    
    ...
    var stringField = Fancy.getWidget('position');
    
    stringField.clear();
    

    disable

    ()

    Disable field.

    
    field.disable();
    

    enable

    ()

    Enable field.

    
    field.enable();
    

    focus

    ()

    Focus field.

    
    field.focus();
    

    get

    ():String

    return value of field.

    
    tbar: [{
      type: 'string',
      id: 'position',
      value: 'JavaScript Architect'
    },{
    ...
    }] 
    
    ...
    var stringField = Fancy.getWidget('position');
    
    stringField.clear();
    

    set

    (value: String)

    Set value of field.

    
    tbar: [{
      type: 'string',
      id: 'position',
      value: 'JavaScript Architect'
    },{
    ...
    }] 
    
    ...
    var stringField = Fancy.getWidget('position');
    
    stringField.set('CEO');
    

    setWidth

    (value: Number)

    Set new field width.

    
    field.setWidth(400);
    

    validate

    ():Boolean

    Force field validation.
    It returns validation status.

    
    field.validate();
    

    Events

    blur

    (field)

    Losing focus from field event.

    
    items: [{
      type: 'string',
      label: 'Name',
      name: 'name',
      events: [{
        blur: function(){
          
        }
      }]
    ...
    

    change

    (field, value)

    Change field value event.

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

    focus

    (field)

    Focus field event.

    
    items: [{
      type: 'date',
      label: 'Birthday',
      name: 'birthday',
      events: [{
        focus: function(){
          
        }
      }]
    ...