Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Button
        SplitButton

Class Ext.SplitButton

Package:Ext
Defined In:SplitButton.js
Class:SplitButton
Subclasses:CycleButton
Extends:Button
A split button that provides a built-in dropdown arrow that can fire an event separately from the default click event of the button. Typically this would be used to display a dropdown menu that provides additional options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage:
// display a dropdown menu:
new Ext.SplitButton({
	renderTo: 'button-ct', // the container id
   	text: 'Options',
   	handler: optionsHandler, // handle a click on the button itself
   	menu: new Ext.menu.Menu({
        items: [
        	// these items will render as dropdown menu items when the arrow is clicked:
	        {text: 'Item 1', handler: item1Handler},
	        {text: 'Item 2', handler: item2Handler}
        ]
   	})
});

// Instead of showing a menu, you provide any type of custom
// functionality you want when the dropdown arrow is clicked:
new Ext.SplitButton({
	renderTo: 'button-ct',
   	text: 'Options',
   	handler: optionsHandler,
   	arrowHandler: myCustomHandler
});

Config Options

Config OptionsDefined By
 allowDepress : Boolean
False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when enableToggle is true.
Button
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 arrowHandler : Function
A function called when the arrow button is clicked (can be used instead of click event)
SplitButton
 arrowTooltip : String
The title attribute of the arrow
SplitButton
 cls : String
A CSS class string to apply to the button's main element.
Button
 data : Mixed
The initial set of data to apply to the tpl to update the content area of the Component.
Component
 disabled : Boolean
True to start disabled (defaults to false)
Button
 disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
 enableToggle : Boolean
True to enable pressed/not pressed toggling (defaults to false)
Button
 handleMouseEvents : Boolean
False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
Button
 hidden : Boolean
True to start hidden (defaults to false)
Button
 iconCls : String
A css class which sets a background image to be used as the icon for this button
Button
 menuAlign : String
The position to align the menu to (see Ext.Element.alignTo for more details, defaults to 'tl-bl?').
Button
 minWidth : Number
The minimum width for this button (used to give a set of buttons a common width). See also Ext.Panel.minButtonWidth.
Button
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 pressed : Boolean
True to start pressed (only if enableToggle = true)
Button
 scope : Object
The scope (this reference) in which the handler and toggleHandler is executed. Defaults to this Button.
Button
 tabIndex : Number
Set a DOM tabIndex for this button (defaults to undefined)
Button
 text : String
The button text to be used as innerHTML (html tags are accepted)
Button
 toggleGroup : String
The group this toggle button is a member of (only 1 per group can be pressed)
Button
 tooltipType : String
The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
Button
 type : String
submit, reset or button - defaults to 'button'
Button
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 disabled : Boolean
Read-only. True if this button is disabled
Button
 hidden : Boolean
Read-only. True if this button is hidden
Button
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 menu : Menu The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
Button
 pressed : Boolean
Read-only. True if this button is pressed (only if enableToggle = true)
Button
 rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

MethodDefined By

Public Events

EventDefined By