extjs的Ext.button.Button介绍（按钮的事件有哪些）。

转自：http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.button.Button

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

Code Editor

Live Preview

Select Code

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:

Code Editor

Live Preview

Select Code

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:

Code Editor

Live Preview

Select Code

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:

Code Editor

Live Preview

Select Code

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:

Code Editor

Live Preview

Select Code

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 amenu 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 thearrowAlign configuration on button. Example usage:

Code Editor

Live Preview

Select Code

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:

Code Editor

Live Preview

Select Code

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.');
            }
        }
    }
});

Available since: 1.1.0