学习ExtJS（二） Button常用方法

学习ExtJS（二）Button常用方法攻略

1. Button常用方法概述

在ExtJS中，Button是常用的UI组件之一，用于触发特定的操作或事件。本攻略将详细介绍Button的常用方法，包括创建Button、设置文本、禁用/启用Button、添加点击事件等。

2. 创建Button

要创建一个Button，可以使用Ext.button.Button类的构造函数。以下是创建Button的示例代码：

// 创建一个Button
var button = Ext.create('Ext.button.Button', {
    text: 'Click me',
    renderTo: Ext.getBody()
});

在上述示例中，我们使用Ext.create方法创建了一个Button实例，并通过text属性设置了Button的文本内容为\"Click me\"。renderTo属性指定了Button要渲染到的目标元素。

3. 设置文本

Button的文本内容可以通过setText方法进行设置。以下是设置Button文本的示例代码：

// 创建一个Button
var button = Ext.create('Ext.button.Button', {
    renderTo: Ext.getBody()
});

// 设置Button文本
button.setText('New Text');

在上述示例中，我们首先创建了一个Button实例，并将其渲染到页面中。然后，使用setText方法将Button的文本内容设置为\"New Text\"。

4. 禁用/启用Button

Button可以通过setDisabled方法进行禁用或启用。以下是禁用和启用Button的示例代码：

// 创建一个Button
var button = Ext.create('Ext.button.Button', {
    text: 'Click me',
    renderTo: Ext.getBody()
});

// 禁用Button
button.setDisabled(true);

// 启用Button
button.setDisabled(false);

在上述示例中，我们首先创建了一个Button实例，并将其渲染到页面中。然后，使用setDisabled方法将Button禁用或启用。通过传递true参数，可以禁用Button；通过传递false参数，可以启用Button。

5. 添加点击事件

要为Button添加点击事件，可以使用on方法。以下是添加点击事件的示例代码：

// 创建一个Button
var button = Ext.create('Ext.button.Button', {
    text: 'Click me',
    renderTo: Ext.getBody()
});

// 添加点击事件
button.on('click', function() {
    alert('Button clicked!');
});

在上述示例中，我们首先创建了一个Button实例，并将其渲染到页面中。然后，使用on方法为Button添加了一个点击事件。当Button被点击时，会弹出一个提示框显示\"Button clicked!\"。

以上就是学习ExtJS中Button常用方法的完整攻略。通过本攻略，你可以了解如何创建Button、设置文本、禁用/启用Button以及添加点击事件。希望对你有帮助！