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

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

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

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

Events

change

(field, value)

Value of field.


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