Previous  Up  Next

Class type Ext_button_Button.configs


class type configs = object .. end
Inherits 
method allowDepress : bool Js.t Js.prop

False to not allow a pressed Button to be depressed. Only valid when enableToggle is true.

Defaults to: true

method arrowAlign : Js.js_string Js.t Js.prop

The side of the Button box to render the arrow if the button has an associated menu. Two values are allowed:

Defaults to: 'right'

method arrowCls : Js.js_string Js.t Js.prop

The className used for the inner arrow element if the button has a menu.

Defaults to: 'arrow'

method baseCls : Js.js_string Js.t Js.prop

The base CSS class to add to all buttons.

Defaults to: 'x-btn'

method baseParams : 'a. 'a Js.t Js.prop

An object literal of parameters to pass to the url when the href property is specified.


method clickEvent : Js.js_string Js.t Js.prop

The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).

Defaults to: 'click'

method cls : Js.js_string Js.t Js.prop

A CSS class string to apply to the button's main element.


method componentLayout : 'b. 'b Js.t Js.prop

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

Defaults to: 'button'

method destroyMenu : bool Js.t Js.prop

Whether or not to destroy any associated menu when this button is destroyed. The menu will be destroyed unless this is explicitly set to false.


method disabled : bool Js.t Js.prop

True to start disabled.

Defaults to: false

method enableToggle : bool Js.t Js.prop

True to enable pressed/not pressed toggling. If a toggleGroup is specified, this option will be set to true.

Defaults to: false

method focusCls : Js.js_string Js.t Js.prop

The CSS class to add to a button when it is in the focussed state.

Defaults to: 'focus'

method frame : bool Js.t Js.prop

Specify as true to have the Component inject framing elements within the Component at render time to provide a graphical rounded frame around the Component content.

This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet Explorer prior to version 9 which do not support rounded corners natively.

The extra space taken up by this framing is available from the read only property frameSize.

Defaults to: true

method glyph : 'c. 'c Js.t Js.prop

A numeric unicode character code to use as the icon for this button. The default font-family for glyphs can be set globally using Ext.setGlyphFontFamily(). Alternatively, this config option accepts a string with the charCode and font-family separated by the @ symbol. For example '65@My Font Family'.


method handleMouseEvents : bool Js.t Js.prop

False to disable visual cues on mouseover, mouseout and mousedown.

Defaults to: true

method handler : 'd. 'd Js.callback Js.prop

A function called when the button is clicked (can be used instead of click event).


method hidden : bool Js.t Js.prop

True to start hidden.

Defaults to: false

method href : Js.js_string Js.t Js.prop

The URL to open when the button is clicked. Specifying this config causes the Button to be rendered with the specified URL as the href attribute of its <a> Element.

This is better than specifying a click handler of

function() { window.location = "http://www.sencha.com" }

because the UI will provide meaningful hints to the user as to what to expect upon clicking the button, and will also allow the user to open in a new tab or window, bookmark or drag the URL, or directly save the URL stream to disk.

See also the hrefTarget config.


method hrefTarget : Js.js_string Js.t Js.prop

The target attribute to use for the underlying anchor. Only used if the href property is specified.

Defaults to: "_blank"

method icon : Js.js_string Js.t Js.prop

The path to an image to display in the button.


method iconAlign : Js.js_string Js.t Js.prop

The side of the Button box to render the icon. Four values are allowed:

Defaults to: 'left'

method iconCls : Js.js_string Js.t Js.prop

A css class which sets a background image to be used as the icon for this button.


method menu : 'e. 'e Js.t Js.prop

Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob.


method menuActiveCls : Js.js_string Js.t Js.prop

The CSS class to add to a button when it's menu is active.

Defaults to: 'menu-active'

method menuAlign : Js.js_string Js.t Js.prop

The position to align the menu to (see Ext.util.Positionable.alignTo for more details).

Defaults to: 'tl-bl?'

method minWidth : Js.number Js.t Js.prop

The minimum width for this button (used to give a set of buttons a common width). See also Ext.panel.Panel.minButtonWidth.


method overCls : Js.js_string Js.t Js.prop

The CSS class to add to a button when it is in the over (hovered) state.

Defaults to: 'over'

method overflowText : Js.js_string Js.t Js.prop

If used in a Toolbar, the text to be used if this item is shown in the overflow menu. See also Ext.toolbar.Item.overflowText.


method params : 'f. 'f Js.t Js.prop

An object literal of parameters to pass to the url when the href property is specified. Any params override baseParams. New params can be set using the setParams method.


method pressed : bool Js.t Js.prop

True to start pressed (only if enableToggle = true)

Defaults to: false

method pressedCls : Js.js_string Js.t Js.prop

The CSS class to add to a button when it is in the pressed state.

Defaults to: 'pressed'

method preventDefault : bool Js.t Js.prop

True to prevent the default action when the clickEvent is processed.

Defaults to: true

method renderTpl : 'g. 'g Js.t Js.prop

We have to keep "unselectable" attribute on all elements because it's not inheritable. Without it, clicking anywhere on a button disrupts current selection and cursor position in HtmlEditor.

An XTemplate used to create the internal structure inside this Component's encapsulating Element.

You do not normally need to specify this. For the base classes Ext.Component and Ext.container.Container, this defaults to null which means that they will be initially rendered with no internal structure; they render their Element empty. The more specialized Ext JS and Sencha Touch classes which use a more complex DOM structure, provide their own template definitions.

This is intended to allow the developer to create application-specific utility Components with customized internal structure.

Upon rendering, any created child elements may be automatically imported into object properties using the renderSelectors and childEls options.

Defaults to: '<span id=''{id}-btnWrap'' class=''{baseCls}-wrap', '<tpl if=''splitCls''> {splitCls}</tpl>', '{childElCls}'' unselectable=''on''>', '<span id=''{id}-btnEl'' class=''{baseCls}-button''>', '<span id=''{id}-btnInnerEl'' class=''{baseCls}-inner {innerCls}', '{childElCls}'' unselectable=''on''>', '{text}', '</span>', '<span role=''img'' id=''{id}-btnIconEl'' class=''{baseCls}-icon-el {iconCls}', '{childElCls} {glyphCls}'' unselectable=''on'' style=''', '<tpl if=''iconUrl''>background-image:url({iconUrl});</tpl>', '<tpl if=''glyph && glyphFontFamily''>font-family:{glyphFontFamily};</tpl>''>', '<tpl if=''glyph''>&#{glyph};</tpl><tpl if=''iconCls || iconUrl''>&#160;</tpl>', '</span>', '</span>', '</span>', '<tpl if=''closable''>', '<span id=''{id}-closeEl'' class=''{baseCls}-close-btn'' title=''{closeText}'' tabIndex=''0''></span>', '</tpl>'

method repeat : 'h. 'h Js.t Js.prop

True to repeat fire the click event while the mouse is down. This can also be a ClickRepeater config object.

Defaults to: false

method scale : 'i. 'i Js.t Js.prop

The size of the Button. Three values are allowed:

Defaults to: 'small'

method scope : 'j. 'j Js.t Js.prop

The scope (this reference) in which the handler and toggleHandler is executed. Defaults to this Button.


method showEmptyMenu : bool Js.t Js.prop

True to force an attached menu with no items to be shown when clicking this button. By default, the menu will not show if it is empty.

Defaults to: false

method shrinkWrap : 'k. 'k Js.t Js.prop

If this property is a number, it is interpreted as follows:

In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed to a block-level element. Some container layouts always shrink-wrap their children, effectively ignoring this property (e.g., Ext.layout.container.HBox, Ext.layout.container.VBox, Ext.layout.component.Dock).

Defaults to: 3

method tabIndex : Js.number Js.t Js.prop

Set a DOM tabIndex for this button.

Defaults to: 0

method text : Js.js_string Js.t Js.prop

The button text to be used as innerHTML (html tags are accepted).


method textAlign : Js.js_string Js.t Js.prop

The text alignment for this button (center, left, right).

Defaults to: 'center'

method toggleGroup : Js.js_string Js.t Js.prop

The group this toggle button is a member of (only 1 per group can be pressed). If a toggleGroup is specified, the enableToggle configuration will automatically be set to true.


method toggleHandler : 'l. 'l Js.callback Js.prop

Function called when a Button with enableToggle set to true is clicked.


method tooltip : 'm. 'm Js.t Js.prop

The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object.


method tooltipType : Js.js_string Js.t Js.prop

The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.

Defaults to: 'qtip'

method initComponent : ((< afterComponentLayout : 'p 'q.
                                    ('o Js.t,
                                     Js.number Js.t ->
                                     Js.number Js.t -> 'p Js.t -> 'q Js.t -> unit)
                                    Js.meth_callback Js.writeonly_prop;
           afterHide : 'r 's.
                         ('o Js.t,
                          'r Js.callback Js.optdef -> 's Js.t Js.optdef -> unit)
                         Js.meth_callback Js.writeonly_prop;
           afterRender : ('o Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           afterSetPosition : ('o Js.t, Js.number Js.t -> Js.number Js.t -> unit)
                              Js.meth_callback Js.writeonly_prop;
           afterShow : 't 'u 'v.
                         ('o Js.t,
                          't Js.t Js.optdef ->
                          'u Js.callback Js.optdef -> 'v Js.t Js.optdef -> unit)
                         Js.meth_callback Js.writeonly_prop;
           allowDepress : bool Js.t Js.prop; arrowAlign : Js.js_string Js.t Js.prop;
           arrowCls : Js.js_string Js.t Js.prop; autoEl : 'w. 'w Js.t Js.prop;
           autoRender : 'x. 'x Js.t Js.prop; autoScroll : bool Js.t Js.prop;
           autoShow : bool Js.t Js.prop; baseCls : Js.js_string Js.t Js.prop;
           baseParams : 'a. 'a Js.t Js.prop;
           beforeComponentLayout : ('o Js.t,
                                    Js.number Js.t -> Js.number Js.t -> unit)
                                   Js.meth_callback Js.writeonly_prop;
           beforeDestroy : ('o Js.t, unit -> unit) Js.meth_callback
                           Js.writeonly_prop;
           beforeLayout : ('o Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           beforeShow : ('o Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           border : 'y. 'y Js.t Js.prop;
           childEls : 'z. 'z Js.t Js.js_array Js.t Js.prop;
           clickEvent : Js.js_string Js.t Js.prop; cls : Js.js_string Js.t Js.prop;
           columnWidth : 'a1. 'a1 Js.t Js.prop;
           componentCls : Js.js_string Js.t Js.prop;
           componentLayout : 'b. 'b Js.t Js.prop; constrain : bool Js.t Js.prop;
           constrainTo : 'b1. 'b1 Js.t Js.prop;
           constraintInsets : 'c1. 'c1 Js.t Js.prop;
           contentEl : Js.js_string Js.t Js.prop; data : 'd1. 'd1 Js.t Js.prop;
           defaultAlign : Js.js_string Js.t Js.prop;
           destroyMenu : bool Js.t Js.prop; disabled : bool Js.t Js.prop;
           disabledCls : Js.js_string Js.t Js.prop; draggable : bool Js.t Js.prop;
           draggable_obj : 'e1. 'e1 Js.t Js.prop; enableToggle : bool Js.t Js.prop;
           fixed : bool Js.t Js.prop; floating : bool Js.t Js.prop;
           focusCls : Js.js_string Js.t Js.prop; focusOnToFront : bool Js.t Js.prop;
           formBind : bool Js.t Js.prop; frame : bool Js.t Js.prop;
           glyph : 'c. 'c Js.t Js.prop; handleMouseEvents : bool Js.t Js.prop;
           handler : 'd. 'd Js.callback Js.prop; height : Js.number Js.t Js.prop;
           hidden : bool Js.t Js.prop; hideMode : Js.js_string Js.t Js.prop;
           href : Js.js_string Js.t Js.prop; hrefTarget : Js.js_string Js.t Js.prop;
           html : 'f1. 'f1 Js.t Js.prop; icon : Js.js_string Js.t Js.prop;
           iconAlign : Js.js_string Js.t Js.prop;
           iconCls : Js.js_string Js.t Js.prop; id : Js.js_string Js.t Js.prop;
           initComponent : 'n; itemId : Js.js_string Js.t Js.prop;
           listeners : 'g1. 'g1 Js.t Js.prop; loader : 'h1. 'h1 Js.t Js.prop;
           margin : 'i1. 'i1 Js.t Js.prop; maxHeight : Js.number Js.t Js.prop;
           maxWidth : Js.number Js.t Js.prop; menu : 'e. 'e Js.t Js.prop;
           menuActiveCls : Js.js_string Js.t Js.prop;
           menuAlign : Js.js_string Js.t Js.prop;
           minHeight : Js.number Js.t Js.prop; minWidth : Js.number Js.t Js.prop;
           onAdded : 'j1.
                       ('o Js.t, 'j1 Js.t -> Js.number Js.t -> unit)
                       Js.meth_callback Js.writeonly_prop;
           onDestroy : ('o Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           onDisable : ('o Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           onEnable : ('o Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           onHide : 'k1 'l1 'm1.
                      ('o Js.t,
                       'k1 Js.t Js.optdef ->
                       'l1 Js.callback Js.optdef -> 'm1 Js.t Js.optdef -> unit)
                      Js.meth_callback Js.writeonly_prop;
           onPosition : ('o Js.t, Js.number Js.t -> Js.number Js.t -> unit)
                        Js.meth_callback Js.writeonly_prop;
           onRemoved : ('o Js.t, bool Js.t -> unit) Js.meth_callback
                       Js.writeonly_prop;
           onRender : ('o Js.t, Ext_dom_Element.t Js.t -> Js.number Js.t -> unit)
                      Js.meth_callback Js.writeonly_prop;
           onResize : 'n1 'o1 'p1 'q1.
                        ('o Js.t,
                         'n1 Js.t -> 'o1 Js.t -> 'p1 Js.t -> 'q1 Js.t -> unit)
                        Js.meth_callback Js.writeonly_prop;
           onShow : 'r1 's1 't1.
                      ('o Js.t,
                       'r1 Js.t Js.optdef ->
                       's1 Js.callback Js.optdef -> 't1 Js.t Js.optdef -> unit)
                      Js.meth_callback Js.writeonly_prop;
           onShowComplete : 'u1 'v1.
                              ('o Js.t,
                               'u1 Js.callback Js.optdef ->
                               'v1 Js.t Js.optdef -> unit)
                              Js.meth_callback Js.writeonly_prop;
           overCls : Js.js_string Js.t Js.prop;
           overflowText : Js.js_string Js.t Js.prop;
           overflowX : Js.js_string Js.t Js.prop;
           overflowY : Js.js_string Js.t Js.prop; padding : 'w1. 'w1 Js.t Js.prop;
           params : 'f. 'f Js.t Js.prop; plugins : 'x1. 'x1 Js.t Js.prop;
           pressed : bool Js.t Js.prop; pressedCls : Js.js_string Js.t Js.prop;
           preventDefault : bool Js.t Js.prop; region : 'y1. 'y1 Js.t Js.prop;
           renderData : 'z1. 'z1 Js.t Js.prop;
           renderSelectors : 'a2. 'a2 Js.t Js.prop;
           renderTo : 'b2. 'b2 Js.t Js.prop; renderTpl : 'g. 'g Js.t Js.prop;
           repeat : 'h. 'h Js.t Js.prop; resizable : 'c2. 'c2 Js.t Js.prop;
           resizeHandles : Js.js_string Js.t Js.prop; rtl : bool Js.t Js.prop;
           saveDelay : Js.number Js.t Js.prop; scale : 'i. 'i Js.t Js.prop;
           scope : 'j. 'j Js.t Js.prop; shadow : 'd2. 'd2 Js.t Js.prop;
           shadowOffset : Js.number Js.t Js.prop; showEmptyMenu : bool Js.t Js.prop;
           shrinkWrap : 'k. 'k Js.t Js.prop;
           stateEvents : Js.js_string Js.t Js.js_array Js.t Js.prop;
           stateId : Js.js_string Js.t Js.prop; stateful : bool Js.t Js.prop;
           style : 'e2. 'e2 Js.t Js.prop; tabIndex : Js.number Js.t Js.prop;
           text : Js.js_string Js.t Js.prop; textAlign : Js.js_string Js.t Js.prop;
           toFrontOnShow : bool Js.t Js.prop;
           toggleGroup : Js.js_string Js.t Js.prop;
           toggleHandler : 'l. 'l Js.callback Js.prop;
           tooltip : 'm. 'm Js.t Js.prop; tooltipType : Js.js_string Js.t Js.prop;
           tpl : 'f2. 'f2 Js.t Js.prop; tplWriteMode : Js.js_string Js.t Js.prop;
           ui : Js.js_string Js.t Js.prop; width : Js.number Js.t Js.prop;
           xtype : Js.js_string Js.t Js.prop; .. >
         as 'o)
        Js.t, unit -> unit)
       Js.meth_callback Js.writeonly_prop as 'n
See method t.initComponent
method onDisable : ('o Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop
See method t.onDisable