Button

(esrith/amos/form/Button)

Button controls. Button can be used in conjunction with FormValidator class in two ways.

  1. Use as a form submitter.
  2. Use as a form resetter.
Description
new Button(params?srcNodeRef?)

Create a new Button widget.

Description
ICON_BOTTOM

align of icon is bottom

ICON_LEFT

align of icon is left

ICON_RIGHT

align of icon is right

ICON_TOP

align of icon is top

Type Description
_styleAttr Object

when you want to set style for other node. you can do this by example... _styleAttr:{ style-property:effected-node } this property was effected where this class was inherited and your widget was called by... var widget = new YourWidget({ style:{ style-property:style-value } }); now effected-node in you widget will have style-property = style-value

active Boolean

If true, force the control to enter the active state and classname 'amos-form-active' will be added.

busy Boolean

If true, this forces the control to enter the busy state and classname 'amos-form-busy' will be added.

disabled Boolean

If true, any control's events(except change) are not responding. Its content cannot be edited and is excluded when the form is submitted.

enabledToggle Boolean

If true, the button works as a toggle button. Toggle button is a button that enters active state after it is clicked and remains in active state until it is clicked again to return to normal state.

error Boolean

If true, this forces the control to enter the error state and classname 'amos-form-error' will be added.

filled Boolean

A flag that shows whether a form element is filled in (true) or empty (false).

icon String | Object

Icon of button.

iconAlignment String

Specifies the alignment of icon (use constant).

iconBaseClass String

Base class for icon.

iconContainerClass String

Class name for icon container.

id String

An unique id for an element. (The specified value must be unique within the document.)

label String

Label of button. Label is used to display text that a user cannot edit directly.

name String

Name of button. When sending a request to server, this property is the parameter's name.

readOnly Boolean

If true, the control is read-only and cannot be edited. However, its content, if presents, is included in form submission.

Title String

Text for tooltip.

type String

Type of button.

valid Boolean

Validity flag that shows whether a form element is validated to be valid (true) or invalid (false).

value String | Number | Object

Value of the element.

viewMode Boolean

If true, the control will show only the displayedValue.

Return type Description
__baseClassInherit(constructor) None

get className from superclass.

activate() None

Force the button to enter the activate state.

deactivate() None

Force the button to enter the normal state.

hide(elem?) None

Hide a specified element. The hidden element will not be displayed at all.

isValid() Boolean

Returns true when value validation succeeded; otherwise, false.

isVisible(elem?) Boolean

Return true if the element is visible, otherwise false.

reset() None

Reset all state and value to default.

show(elem?) None

Display a specified element.

toggle(elem?) None

Toggle visibility of a specified element.

Description
blur

Fires when an object loses focus.

click

Fires when the user clicks on a button.

dblclick

Fires when the user double-clicks on a button.

focus

Fires when an element gets focus.

keydown

Fires when the user is pressing a key (on the keyboard).

keypress

Fires when the user presses a key (on the keyboard).

keyup

Fires when the user releases a key (on the keyboard).

mousedown

Fires when a user presses a mouse button over an element.

mouseout

Fires when the mouse pointer is moved out of an element.

mouseover

Fires when the mouse pointer is moved onto an element.

mouseup

Fires when a user releases a mouse button over an element.

Constructors Detail
new Button(params?srcNodeRef?)

Create a new Button widget.

Parameters:
constants Detail
<String>
ICON_BOTTOM

align of icon is bottom

<String>
ICON_LEFT

align of icon is left

<String>
ICON_RIGHT

align of icon is right

<String>
ICON_TOP

align of icon is top

Properties Detail
<Object>
_styleAttr

when you want to set style for other node. you can do this by example... _styleAttr:{ style-property:effected-node } this property was effected where this class was inherited and your widget was called by... var widget = new YourWidget({ style:{ style-property:style-value } }); now effected-node in you widget will have style-property = style-value

Default value: {}

<Boolean>
active

Inherited from _StateMixin but overwritten in esrith/amos/core/_ButtonBase.js:62

If true, force the control to enter the active state and classname 'amos-form-active' will be added.

Default value: false

<Boolean>
busy

If true, this forces the control to enter the busy state and classname 'amos-form-busy' will be added.

Default value: false

<Boolean>
disabled

If true, any control's events(except change) are not responding. Its content cannot be edited and is excluded when the form is submitted.

Default value: false

<Boolean>
enabledToggle

If true, the button works as a toggle button. Toggle button is a button that enters active state after it is clicked and remains in active state until it is clicked again to return to normal state.

Default value: false

<Boolean>
error

If true, this forces the control to enter the error state and classname 'amos-form-error' will be added.

Default value: false

<Boolean>
filled

A flag that shows whether a form element is filled in (true) or empty (false).

Default value: false

<String | Object>
icon

Icon of button.

<String>
iconAlignment

Specifies the alignment of icon (use constant).

Default value: ICON_LEFT

<String>
iconBaseClass

Base class for icon.

Default value: amos-button-icon

<String>
iconContainerClass

Class name for icon container.

Default value: amos-button-icon-container

<String>
id

An unique id for an element. (The specified value must be unique within the document.)

<String>
label

Inherited from _FormMixin but overwritten in esrith/amos/form/Button.js:262

Label of button. Label is used to display text that a user cannot edit directly.

<String>
name

Inherited from _FormConstruct but overwritten in esrith/amos/core/_ButtonBase.js:126

Name of button. When sending a request to server, this property is the parameter's name.

<Boolean>
readOnly

If true, the control is read-only and cannot be edited. However, its content, if presents, is included in form submission.

Default value: false

<String>
Title

Text for tooltip.

<String>
type

Type of button.

Default value: button

<Boolean>
valid

Validity flag that shows whether a form element is validated to be valid (true) or invalid (false).

Default value: true

<String | Number | Object>
value

Value of the element.

<Boolean>
viewMode

If true, the control will show only the displayedValue.

Default value: false

Methods Detail
__baseClassInherit
(
  • constructor
)

get className from superclass.

Parameters
  • <Object> constructor Required
activate
()

Force the button to enter the activate state.

deactivate
()

Force the button to enter the normal state.

hide
(
  • elem?
)

Hide a specified element. The hidden element will not be displayed at all.

Parameters
  • <Node> elem Optional

    Specified element to be hidden.

<Boolean>
isValid
()

Returns true when value validation succeeded; otherwise, false.

<Boolean>
isVisible
(
  • elem?
)

Return true if the element is visible, otherwise false.

Parameters
  • <Node> elem Optional

    Specified element to be checked. If not specified, domNode of the widget is used instead.

reset
()

Reset all state and value to default.

show
(
  • elem?
)

Display a specified element.

Parameters
  • <Node> elem Optional

    Specified element to be displayed.

toggle
(
  • elem?
)

Toggle visibility of a specified element.

Parameters
  • <Node> elem Optional

    Specified element to toggle visibility.

Events Detail
blur

Fires when an object loses focus.

Event Payload:
  • <Object> evt

    -javascript event object

click

Fires when the user clicks on a button.

Event Payload:
  • <Object> evt

    -javascript event object

dblclick

Fires when the user double-clicks on a button.

Event Payload:
  • <Object> evt

    -javascript event object

focus

Fires when an element gets focus.

Event Payload:
  • <Object> evt

    -javascript event object

keydown

Fires when the user is pressing a key (on the keyboard).

Event Payload:
  • <Object> evt

    -javascript event object

keypress

Fires when the user presses a key (on the keyboard).

Event Payload:
  • <Object> evt

    -javascript event object

keyup

Fires when the user releases a key (on the keyboard).

Event Payload:
  • <Object> evt

    -javascript event object

mousedown

Fires when a user presses a mouse button over an element.

Event Payload:
  • <Object> evt

    -javascript event object

mouseout

Fires when the mouse pointer is moved out of an element.

Event Payload:
  • <Object> evt

    -javascript event object

mouseover

Fires when the mouse pointer is moved onto an element.

Event Payload:
  • <Object> evt

    -javascript event object

mouseup

Fires when a user releases a mouse button over an element.

Event Payload:
  • <Object> evt

    -javascript event object