-<!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.');
- }
- }
- }
- });
-
- * @constructor
- * Create a new button
- * @param {Object} config The config object
- * @xtype button
- * @markdown
- * @docauthor Robert Dougan <rob@sencha.com>
+<!DOCTYPE html>
+<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>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-button-Button'>/**
+</span> * @docauthor Robert Dougan <rob@sencha.com>
+ *
+ * Create simple buttons with this component. Customisations include {@link #iconAlign aligned}
+ * {@link #iconCls icons}, {@link #menu dropdown menus}, {@link #tooltip tooltips}
+ * and {@link #scale sizing options}. Specify a {@link #handler handler} to run code when
+ * a user clicks the button, or use {@link #listeners listeners} for other events such as
+ * {@link #mouseover mouseover}. Example usage:
+ *
+ * @example
+ * 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:
+ *
+ * @example
+ * 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:
+ *
+ * @example
+ * 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'`
+ *
+ * Example usage:
+ *
+ * @example
+ * 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`.
+ * Example usage:
+ *
+ * @example
+ * 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. Example usage:
+ *
+ * @example
+ * 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:
+ *
+ * @example
+ * 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.');
+ * }
+ * }
+ * }
+ * });