Clear Up
SharpKit Reference

Ext.button Namespace

Download SDK:


Name Description

Create simple buttons with this component. Customisations include alignedicons, dropdown menus, tooltips and sizing options. Specify a handler to run code when a user clicks the button, or use listeners for other events such as mouseover. Example usage:

    Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function() {
            alert('You clicked the button!');

The handler configuration can also be updated dynamically using the setHandler method. Example usage:

    Ext.create('Ext.Button', {
            text    : 'Dynamic Handler Button',
            renderTo: Ext.getBody(),
            handler : function() {
            // this button will spit out a different number every time you click it.
            // so firstly we must check if that number is already set:
            if (this.clickCount) {
            // looks like the property is already set, so lets just add 1 to that number and alert the user
            alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
            } else {
            // if the clickCount property is not set, we will set it and alert the user
            this.clickCount = 1;
            alert('You just clicked the button for the first time!\n\nTry pressing it again..');

A button within a container:

    Ext.create('Ext.Container', {
            renderTo: Ext.getBody(),
            items   : [
            xtype: 'button',
            text : 'My Button'

A useful option of Button is the scale configuration. This configuration has three different options:

  • 'small'
  • 'medium'
  • 'large'

Example usage:

    Ext.create('Ext.Button', {
            renderTo: document.body,
            text    : 'Click me',
            scale   : 'large'

Buttons can also be toggled. To enable this, you simple set the enableToggle property to true. Example usage:

    Ext.create('Ext.Button', {
            renderTo: Ext.getBody(),
            text: 'Click Me',
            enableToggle: true

You can assign a menu to a button by using the menu configuration. This standard configuration can either be a reference to a menu object, a menu id or a menu config blob. When assigning a menu to a button, an arrow is automatically added to the button. You can change the alignment of the arrow using the arrowAlign configuration on button. Example usage:

    Ext.create('Ext.Button', {
            text      : 'Menu button',
            renderTo  : Ext.getBody(),
            arrowAlign: 'bottom',
            menu      : [
            {text: 'Item 1'},
            {text: 'Item 2'},
            {text: 'Item 3'},
            {text: 'Item 4'}

Using listeners, you can easily listen to events fired by any component, using the listeners configuration or using the addListener method. Button has a variety of different listeners:

  • click
  • toggle
  • mouseover
  • mouseout
  • mouseshow
  • menuhide
  • menutriggerover
  • menutriggerout

Example usage:

    Ext.create('Ext.Button', {
            text     : 'Button',
            renderTo : Ext.getBody(),
            listeners: {
            click: function() {
            // this == the button, as we are in the local scope
            this.setText('I was clicked!');
            mouseover: function() {
            // set a new config which says we moused over, if not already set
            if (!this.mousedOver) {
            this.mousedOver = true;
            alert('You moused over a button!\n\nI wont do this again.');

A specialized SplitButton that contains a menu of elements. The button automatically cycles through each menu item on click, raising the button's change event (or calling the button's changeHandler function, if supplied) for the active menu item. Clicking on the arrow section of the button displays the dropdown menu just like a normal SplitButton. Example usage:

    Ext.create('Ext.button.Cycle', {
            showText: true,
            prependText: 'View as ',
            renderTo: Ext.getBody(),
            menu: {
            id: 'view-type-menu',
            items: [{
            text: 'text only',
            iconCls: 'view-text',
            checked: true
            text: 'HTML',
            iconCls: 'view-html'
            changeHandler: function(cycleBtn, activeItem) {
            Ext.Msg.alert('Change View', activeItem.text);

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:
            Ext.create('Ext.button.Split', {
            renderTo: Ext.getBody(),
            text: 'Options',
            // handle a click on the button itself
            handler: function() {
            alert("The button was clicked");
            menu: new{
            items: [
            // these will render as dropdown menu items when the arrow is clicked:
            {text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
            {text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}

Instead of showing a menu, you can provide any type of custom functionality you want when the dropdown arrow is clicked:

    Ext.create('Ext.button.Split', {
            renderTo: 'button-ct',
            text: 'Options',
            handler: optionsHandler,
            arrowHandler: myCustomHandler
© Copyright 2005-2011 SharpKit. All rights reserved.