Ext.button.Buttonxtype: button
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:
这个组件创建一个简单的按纽。可定制按纽的图标对齐方式,下拉菜单,工具提示和大小等选项。当用户点击按纽时将执行由处理程序(handler)指定的可执行代码,或使用监听器来捕获其它的事件,如鼠标悬停(mouseover)事例。用法示例:
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:
处理程序的配置也可以使用setHandler方法动态更新的。用法示例:
Ext.create('Ext.Button', {
text : 'Dynamic Handler Button',
renderTo: Ext.getBody(),
handler : function() {
// 此按钮每次你点击它会弹出不同的数字。
// 所以首先我们必须检查这个数字是否已经设置:
if (this.clickCount) {
// 如果这个属性已设置,所以我们给这个数字加1,并提醒用户
this.clickCount++;
alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
} else {
// 如果这个 clickCount 属性示未设置, 我们将设置它并提醒用户
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:
一个有用的选项是Button的规模大小配置。这种配置有三个不同的选项:
- '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:
按钮也可以切换。您将enableToggle属性设置为true,可以非常简单的实现这样的效果。用法示例:
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:
你可以使用menu选项给按纽指定一个菜单。标准配置是从下面两者之间任选一个引用到菜单对象,一个菜单ID或一个菜单配置项.当指定一个菜单到对象,按纽自动增加一个箭头.您可以使用arrowAlign配置更改按钮上的箭头对齐方式。用法示例:
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:
使用监听器,您可以使用监听器配置或使用addListener方法,轻松监听任何组件的事件。按钮具有各种不同的监听器:
- 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, 因为我们是在局部范围内
this.setText('I was clicked!');
},
mouseover: function() {
// 如果先前未设置,设置一个新的配置并提醒
if (!this.mousedOver) {
this.mousedOver = true;
alert('You moused over a button!\n\nI wont do this again.');
}
}
}
});