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

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

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