module Ext_button_Button:Create simple buttons with this component. Customi ...sig
..end
Create simple buttons with this component. Customisations include aligned icons, 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.');
}
}
}
});
class type t =object
..end
class type configs =object
..end
class type events =object
..end
class type statics =object
..end
val of_configs : configs Js.t -> t Js.t
of_configs c
casts a config object c
to an instance of class t
val to_configs : t Js.t -> configs Js.t
to_configs o
casts instance o
of class t
to a config object