Docs
API
  • button

    Button field type

    Example

    
    items: [{
    ...
    },{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button'
    },{
    ...
    

    Properties

    buttonText

    String

    Button text.

    
    items: [{
      label: 'Name',    
      type: 'button',
      name: 'name',
      buttonText: 'Button'
    },{
      ...
    

    cls

    String

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

    
    items: [{
      type: 'button',
      label: 'Name',    
      name: 'name',
      buttonText: 'Button'
      cls: 'field-name'
    },{
    ...
    }]
    

    disabled

    Boolean

    Disable field.

    
    items: [{
      label: 'Name', 
      type: 'button',  
      name: 'name',
      buttonText: 'Button',
      disabled: true
    },{
    ...
    //Enable field
    field.enable();
    
    //Disable field
    field.disable();
    

    enableToggle

    Boolean

    Enables pressed state for button.

    
    ...
    items: [{
      label: 'Label',
      type: 'button',
      type: 'button',
      name: 'button',
      buttonText: 'Button',
      enableToggle: true
    },{
    ...
    
    
    ...
    items: [{
      label: 'Label',
      type: 'button',
      type: 'button',
      name: 'button',
      buttonText: 'Button',
      pressed: true,
      enableToggle: true
    },{
    ...
    

    events

    Array

    Set event handler to field.

    
    ...
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button',
      events: [{
        click: function(){
          
        }
      }]
    },{
    ...
    

    handler

    Function

    Fires on field button click.

    
    ...
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button',
      handler: function(){
        
      }
    },{
    ...
    

    label

    String

    Text of field.

    
    ...
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button'
    },{
    ...
    

    labelAlign

    String

    Align of label.

    Values: right, left, top.

    
    ...
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button',
      labelAlign: 'right'
    },{
    ...
    
    left

    name

    String

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

    
    ...
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button'
    },{
    ...
    

    pressed

    Boolean

    Button becomes pressed.
    To use this property requires to enable toggle enableToggle:true.

    
    ...
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button',
      pressed: true,
      enableToggle: true
    },{
    ...
    

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

    
    {
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button'
    }
    

    Methods

    disable

    ()

    Disable field.

    
    field.disable();
    

    enable

    ()

    Enable field.

    
    field.enable();
    

    setPressed

    (value: Boolean)

    Change button press state.
    Requires property enableToggle: true.

    
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button',
      pressed: true,
      enableToggle: true
    },{
    ...
    field.setPressed(false);
    

    setText

    (value: String)

    Change button text.

    
    items: [{
      type: 'button',
      name: 'button',
      buttonText: 'Button'
    },{
    ...
    field.setText('My Button');
    

    setWidth

    (value: Number)

    Set new field width.

    
    field.setWidth(400);
    

    Events

    click

    (field: Object)

    Field button event click.

    
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      buttonText: 'Button',
      events: [{
        click: function(){
          
        },
        scope: {}//not required
      }]
    ...
    

    pressedchange

    (field: Object, value: Boolean)

    Field button pressedchange.
    Fires only if property enableToggle: true.

    
    items: [{
      label: 'Label',
      type: 'button',
      name: 'button',
      enableToggle: true,
      buttonText: 'Button',
      events: [{
        pressedchange: function(){
          
        }
      }]
    ...