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