Extjs4 API文档阅读--Ext.button.Button

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.');            }        }    }});