-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
-</head>
-<body onload="prettyPrint();">
- <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-<div id="cls-Ext.Button"></div>/**
- * @class Ext.Button
- * @extends Ext.BoxComponent
- * Simple Button class
- * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
- * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
- * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
- * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
- * The handler is passed the following parameters:<div class="mdetail-params"><ul>
- * <li><code>b</code> : Button<div class="sub-desc">This Button.</div></li>
- * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>
- * </ul></div>
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
- * See also {@link Ext.Panel}.<tt>{@link Ext.Panel#minButtonWidth minButtonWidth}</tt>.
- * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
- * @cfg {Boolean} hidden True to start hidden (defaults to false)
- * @cfg {Boolean} disabled True to start disabled (defaults to false)
- * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
- * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
- * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
- * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-button.Button-method-constructor'><span id='Ext-button.Button'>/**
+</span></span> * @class Ext.button.Button
+ * @extends Ext.Component
+
+Create simple buttons with this component. Customisations include {@link #config-iconAlign aligned}
+{@link #config-iconCls icons}, {@link #config-menu dropdown menus}, {@link #config-tooltip tooltips}
+and {@link #config-scale sizing options}. Specify a {@link #config-handler handler} to run code when
+a user clicks the button, or use {@link #config-listeners listeners} for other events such as
+{@link #events-mouseover mouseover}.
+
+{@img Ext.button.Button/Ext.button.Button1.png Ext.button.Button component}
+Example usage:
+
+ Ext.create('Ext.Button', {
+ text: 'Click me',
+ renderTo: Ext.getBody(),
+ handler: function() {
+ alert('You clicked the button!')
+ }
+ });
+
+The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler} method.
+Example usage:
+
+ Ext.create('Ext.Button', {
+ text : 'Dyanmic 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 {@link #scale} configuration. This configuration has three different options:
+* `'small'`
+* `'medium'`
+* `'large'`
+
+{@img Ext.button.Button/Ext.button.Button2.png Ext.button.Button component}
+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 {@link #enableToggle} property to `true`.
+{@img Ext.button.Button/Ext.button.Button3.png Ext.button.Button component}
+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 {@link #menu} configuration. This standard configuration can either be a reference to a {@link Ext.menu.Menu menu}
+object, a {@link Ext.menu.Menu menu} id or a {@link Ext.menu.Menu 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 {@link #arrowAlign} configuration on button.
+{@img Ext.button.Button/Ext.button.Button4.png Ext.button.Button component}
+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 {@link #listeners} configuration or using the {@link #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.');
+ }
+ }
+ }
+ });
+