ExtJs2.0入门实例是一系列针对初学者设计的文章,旨在帮助新接触该框架的人快速理解和上手。ExtJs是一个流行的JavaScript库,特别适用于开发富客户端应用程序,以其优雅的用户界面和强大的组件库而著称。在这个系列的第一篇文章中,我们重点关注了`Ext.MessageBox`类,这是一个内置在ExtJS 2.0中的对话框组件,用于显示不同类型的消息或提示。
1. `Ext.MessageBox.alert()` 方法是基本的警告对话框,它接受三个参数:标题、消息文本和一个可选的回调函数。当用户点击确认按钮时,对话框会关闭,并执行回调函数。例如:
```javascript
Ext.MessageBox.alert("警告", "这是一条消息", function() {
alert("对话框关闭后执行的代码");
});
```
2. `Ext.MessageBox.confirm()` 方法与`alert()`类似,用于呈现需要用户确认或选择操作的对话框。不同之处在于,它还接收一个事件参数`e`,代表用户点击的按钮值,可以是"yes"、"no"或"cancel"。例如:
```javascript
Ext.MessageBox.confirm("确认", "这是一个确认对话框", function(e) {
if (e === 'yes') {
alert('用户选择了确认');
}
});
```
3. `Ext.MessageBox.prompt()` 方法则允许用户输入数据,除了标题、消息和回调函数外,还包含一个预期的返回值以及是否支持多行输入的选项。用户输入后,回调函数会接收到事件和输入的文本。例如:
```javascript
Ext.MessageBox.prompt("提示", "请输入一些文字", function(e, text) {
alert('用户输入: ' + (e ? e + '-' : '') + text);
});
```
通过设置`true`作为第四个参数,可以开启多行输入模式:
```javascript
Ext.MessageBox.prompt("提示", "输入多行文本", function(e, text) {
// 用户可以在多行文本框中输入
}, this, true);
```
4. 最后,`Ext.MessageBox.show()` 方法提供了更灵活的配置方式,可以创建自定义对话框,如窗口大小、图标、按钮类型等。该方法通常配合配置对象使用,允许开发者根据需要定制复杂的对话框行为。
通过学习这些基础的`MessageBox`方法,新用户可以开始构建简单的对话框交互,随着对ExtJS熟悉度的提升,可以探索更多高级特性,如组件布局、数据绑定和异步操作等。在实践中不断练习和应用,将有助于加深对ExtJS的理解和掌握。