Clear Up
SharpKit Reference

Ext.button Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Button

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
            this.clickCount++;
            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.');
            }
            }
            }
            });
            
ButtonConfig
ButtonEvents
Cycle

A specialized SplitButton that contains a menu of Ext.menu.CheckItem 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);
            }
            });
            
CycleConfig
CycleEvents
Split

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 Ext.menu.Menu({
            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
            });
            
SplitConfig
SplitEvents
© Copyright 2005-2011 SharpKit. All rights reserved.