Print Friendly

Class Ext.Toolbar.Button

Package:Ext
Class:Toolbar.Button
Extends:Button
Defined In:Toolbar.js
A button that renders into a toolbar.

Properties   -  Methods   -  Events   -  Config Options

Public Properties

Property Defined By
  disabled : Boolean Button
Read-only. True if this button is disabled
  hidden : Boolean Button
Read-only. True if this button is hidden
  pressed : Boolean Button
Read-only. True if this button is pressed (only if enableToggle = true)

Public Methods

Method Defined By
  Toolbar.ButtonObject config ) Toolbar.Button
Creates a new Button
  addEventsObject object ) : void Observable
Used to define events on this Observable
  addListenerString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this component
  destroy() : void Toolbar.Button
Removes and destroys this button
  disable() : void Toolbar.Button
Disables this item
  enable() : void Toolbar.Button
Enables this item
  fireEventString eventName, Object... args ) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  focus() : void Button
Focus the button
  getEl() : Ext.Element Button
Returns the button's underlying element
  getText() : String Button
Gets the text for this button
  hasListenerString eventName ) : Boolean Observable
Checks to see if this object has any listeners for a specified event
  hide() : void Toolbar.Button
Hides this button
  onString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  removeListenerString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener
  setDisabledBoolean enabled ) : void Button
Convenience function for boolean enable/disable
  setHandlerFunction handler, [Object scope] ) : void Button
Assigns this button's click handler
  setTextString text ) : void Button
Sets this button's text
  setVisibleBoolean visible ) : void Button
Convenience function for boolean show/hide
  show() : void Toolbar.Button
Shows this button
  toggle[Boolean state] ) : void Button
If a state it passed, it becomes the pressed state otherwise the current state is toggled.
  unString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener (shorthand for removeListener)

Public Events

Event Defined By
  click : ( Button this, EventObject e ) Button
Fires when this button is clicked
  mouseout : ( Button this, Event e ) Button
Fires when the mouse exits the button
  mouseover : ( Button this, Event e ) Button
Fires when the mouse hovers over the button
  toggle : ( Button this, Boolean pressed ) Button
Fires when the "pressed" state of this button changes (only if enableToggle = true)

Config Options

Config Options Defined By
  clickEvent : String Button
The type of event to map to the button's event handler (defaults to 'click')
  cls : String Button
A CSS class to apply to the button's main element.
  disabled : Boolean Button
True to start disabled (defaults to false)
  enableToggle : Boolean Button
True to enable pressed/not pressed toggling (defaults to false)
  handleMouseEvents : Boolean Button
False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
  handler : Function Button
A function called when the button is clicked (can be used instead of click event)
  hidden : Boolean Button
True to start hidden (defaults to false)
  icon : String Button
The path to an image to display in the button (the image will be set as the background-image CSS property of the butt...
  iconCls : String Button
A css class which sets a background image to be used as the icon for this button (defaults to undefined).
  menu : Mixed Button
Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to unde...
  menuAlign : String Button
The position to align the menu to (see Ext.Element.alignTo for more details, defaults to 'tl-bl?').
  minWidth : Number Button
The minimum width for this button (used to give a set of buttons a common width)
  pressed : Boolean Button
True to start pressed (only if enableToggle = true)
  repeat : Boolean/Object Button
True to repeat fire the click event while the mouse is down. This can also be an Ext.util.ClickRepeater config object...
  scope : Object Button
The scope of the handler
  tabIndex : Number Button
The DOM tabIndex for this button (defaults to undefined)
  template : Ext.Template Button
(Optional) An Ext.Template with which to create the Button's main element. This Template must contain numeric substit...
  text : String Button
The button text
  toggleGroup : String Button
The group this toggle button is a member of (only 1 per group can be pressed, only applies if enableToggle = true)
  tooltip : String/Object Button
The tooltip for the button - can be a string or QuickTips config object
  tooltipType : String Button
The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
  type : String Button
The button's type, corresponding to the DOM input element type attribute. Either "submit," "reset" or "button" (defau...

Property Details

disabled

public Boolean disabled
Read-only. True if this button is disabled
This property is defined by Button.

hidden

public Boolean hidden
Read-only. True if this button is hidden
This property is defined by Button.

pressed

public Boolean pressed
Read-only. True if this button is pressed (only if enableToggle = true)
This property is defined by Button.

Constructor Details

Toolbar.Button

public function Toolbar.Button( Object config )
Creates a new Button
Parameters:
  • config : Object
    A standard Ext.Button config object

Method Details

addEvents

public function addEvents( Object object )
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
This method is defined by Observable.

addListener

public function addListener( String eventName, Function handler, [Object scope], [Object options] )
Appends an event handler to this component
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
    • delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
    • single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

    Combining Options
    Using the options argument, it is possible to combine different types of listeners:

    A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

    el.on('click', this.onClick, this, {
     			single: true,
        		delay: 100,
        		forumId: 4
    		});

    Attaching multiple handlers in 1 call
    The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

    el.on({
    			'click': {
            		fn: this.onClick,
            		scope: this,
            		delay: 100
        		}, 
        		'mouseover': {
            		fn: this.onMouseOver,
            		scope: this
        		},
        		'mouseout': {
            		fn: this.onMouseOut,
            		scope: this
        		}
    		});

    Or a shorthand syntax which passes the same scope object to all handlers:

    el.on({
    			'click': this.onClick,
        		'mouseover': this.onMouseOver,
        		'mouseout': this.onMouseOut,
        		scope: this
    		});
Returns:
  • void
This method is defined by Observable.

destroy

public function destroy()
Removes and destroys this button
Parameters:
  • None.
Returns:
  • void
This method is defined by Toolbar.Button.

disable

public function disable()
Disables this item
Parameters:
  • None.
Returns:
  • void
This method is defined by Toolbar.Button.

enable

public function enable()
Enables this item
Parameters:
  • None.
Returns:
  • void
This method is defined by Toolbar.Button.

fireEvent

public function fireEvent( String eventName, Object... args )
Fires the specified event with the passed parameters (minus the event name).
Parameters:
  • eventName : String
  • args : Object...
    Variable number of parameters are passed to handlers
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true
This method is defined by Observable.

focus

public function focus()
Focus the button
Parameters:
  • None.
Returns:
  • void
This method is defined by Button.

getEl

public function getEl()
Returns the button's underlying element
Parameters:
  • None.
Returns:
  • Ext.Element
    The element
This method is defined by Button.

getText

public function getText()
Gets the text for this button
Parameters:
  • None.
Returns:
  • String
    The button text
This method is defined by Button.

hasListener

public function hasListener( String eventName )
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
This method is defined by Observable.

hide

public function hide()
Hides this button
Parameters:
  • None.
Returns:
  • void
This method is defined by Toolbar.Button.

on

public function on( String eventName, Function handler, [Object scope], [Object options] )
Appends an event handler to this element (shorthand for addListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    (optional)
Returns:
  • void
This method is defined by Observable.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

removeListener

public function removeListener( String eventName, Function handler, [Object scope] )
Removes a listener
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

setDisabled

public function setDisabled( Boolean enabled )
Convenience function for boolean enable/disable
Parameters:
  • enabled : Boolean
    True to enable, false to disable
Returns:
  • void
This method is defined by Button.

setHandler

public function setHandler( Function handler, [Object scope] )
Assigns this button's click handler
Parameters:
  • handler : Function
    The function to call when the button is clicked
  • scope : Object
    (optional) Scope for the function passed in
Returns:
  • void
This method is defined by Button.

setText

public function setText( String text )
Sets this button's text
Parameters:
  • text : String
    The button text
Returns:
  • void
This method is defined by Button.

setVisible

public function setVisible( Boolean visible )
Convenience function for boolean show/hide
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • void
This method is defined by Button.

show

public function show()
Shows this button
Parameters:
  • None.
Returns:
  • void
This method is defined by Toolbar.Button.

toggle

public function toggle( [Boolean state] )
If a state it passed, it becomes the pressed state otherwise the current state is toggled.
Parameters:
  • state : Boolean
    (optional) Force a particular state
Returns:
  • void
This method is defined by Button.

un

public function un( String eventName, Function handler, [Object scope] )
Removes a listener (shorthand for removeListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

Event Details

click

public event click
Fires when this button is clicked
Subscribers will be called with the following parameters:
  • this : Button
  • e : EventObject
    The click event
This event is defined by Button.

mouseout

public event mouseout
Fires when the mouse exits the button
Subscribers will be called with the following parameters:
  • this : Button
  • e : Event
    The event object
This event is defined by Button.

mouseover

public event mouseover
Fires when the mouse hovers over the button
Subscribers will be called with the following parameters:
  • this : Button
  • e : Event
    The event object
This event is defined by Button.

toggle

public event toggle
Fires when the "pressed" state of this button changes (only if enableToggle = true)
Subscribers will be called with the following parameters:
  • this : Button
  • pressed : Boolean
This event is defined by Button.

Config Details

clickEvent

clickEvent : String
The type of event to map to the button's event handler (defaults to 'click')
This config option is defined by Button.

cls

cls : String
A CSS class to apply to the button's main element.
This config option is defined by Button.

disabled

disabled : Boolean
True to start disabled (defaults to false)
This config option is defined by Button.

enableToggle

enableToggle : Boolean
True to enable pressed/not pressed toggling (defaults to false)
This config option is defined by Button.

handleMouseEvents

handleMouseEvents : Boolean
False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
This config option is defined by Button.

handler

handler : Function
A function called when the button is clicked (can be used instead of click event)
This config option is defined by Button.

hidden

hidden : Boolean
True to start hidden (defaults to false)
This config option is defined by Button.

icon

icon : String
The path to an image to display in the button (the image will be set as the background-image CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
This config option is defined by Button.

iconCls

iconCls : String
A css class which sets a background image to be used as the icon for this button (defaults to undefined).
This config option is defined by Button.

menu

menu : Mixed
Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
This config option is defined by Button.

menuAlign

menuAlign : String
The position to align the menu to (see Ext.Element.alignTo for more details, defaults to 'tl-bl?').
This config option is defined by Button.

minWidth

minWidth : Number
The minimum width for this button (used to give a set of buttons a common width)
This config option is defined by Button.

pressed

pressed : Boolean
True to start pressed (only if enableToggle = true)
This config option is defined by Button.

repeat

repeat : Boolean/Object
True to repeat fire the click event while the mouse is down. This can also be an Ext.util.ClickRepeater config object (defaults to false).
This config option is defined by Button.

scope

scope : Object
The scope of the handler
This config option is defined by Button.

tabIndex

tabIndex : Number
The DOM tabIndex for this button (defaults to undefined)
This config option is defined by Button.

template

template : Ext.Template
(Optional) An Ext.Template with which to create the Button's main element. This Template must contain numeric substitution parameter 0 if it is to display the text property. Changing the template could require code modifications if required elements (e.g. a button) aren't present.
This config option is defined by Button.

text

text : String
The button text
This config option is defined by Button.

toggleGroup

toggleGroup : String
The group this toggle button is a member of (only 1 per group can be pressed, only applies if enableToggle = true)
This config option is defined by Button.

tooltip

tooltip : String/Object
The tooltip for the button - can be a string or QuickTips config object
This config option is defined by Button.

tooltipType

tooltipType : String
The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
This config option is defined by Button.

type

type : String
The button's type, corresponding to the DOM input element type attribute. Either "submit," "reset" or "button" (default).
This config option is defined by Button.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.