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

按钮的事件有哪些）。"/>

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

转自：.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 userthis.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 userthis.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 scopethis.setText('I was clicked!');},mouseover: function() {// set a new config which says we moused over, if not already setif (!this.mousedOver) {this.mousedOver = true;alert('You moused over a button!\n\nI wont do this again.');}}}
});

Available since: 1.1.0