"本文介绍了ExtJs2.0的学习实例,特别是Ext.MessageBox的使用,包括alert、confirm、prompt和show方法,帮助开发者创建富客户端应用时提供交互反馈。"
在ExtJs框架中,Ext.MessageBox是一个非常实用的组件,它提供了多种对话框功能,用于与用户进行交互。以下是关于Ext.MessageBox的详细介绍:
1. Ext.MessageBox.alert()
`Ext.MessageBox.alert()`方法用于显示一个简单的警告对话框,通常包含一个确定按钮。它接受三个参数:`title`(对话框标题),`msg`(显示的消息)和一个可选的回调函数`function`。当用户点击确定按钮后,回调函数会被执行。例如:
```javascript
Ext.MessageBox.alert("title", "msg");
Ext.MessageBox.alert("title", "msg", function() {
alert("关闭对话框后弹出!");
});
```
2. Ext.MessageBox.confirm()
`Ext.MessageBox.confirm()`方法类似于`alert()`,但提供了一个确认对话框,包含"是"和"否"两个按钮。回调函数的参数`e`会返回用户点击的按钮值,可能是"yes"或"no"。例如:
```javascript
Ext.MessageBox.confirm("title", "msg", function(e) {
alert(e); // "yes" 或 "no"
});
```
3. Ext.MessageBox.prompt()
`Ext.MessageBox.prompt()`方法用于获取用户的输入,它有四个参数:`title`,`msg`,回调函数和一个布尔值`multiline`。回调函数有两个参数,`e`(按钮值,可能是"ok"或"cancel")和`text`(用户输入的文本)。例如:
```javascript
Ext.MessageBox.prompt("title", "msg", function(e, text) {
alert(e + "-" + text);
});
// 多行输入示例
Ext.MessageBox.prompt("title", "msg", function(e, text) {
alert(e + "-" + text);
}, this, true);
```
4. Ext.MessageBox.show()
`Ext.MessageBox.show()`是最灵活的方法,可以通过配置对象自定义对话框的样式和行为。它支持多个配置参数,如`animEl`用于指定对话框出现和消失的动画效果。例如:
```javascript
Ext.MessageBox.show({
title: "title",
msg: "msg",
animEl: "id1", // 动画效果从id1开始
buttons: Ext.MessageBox.YESNO, // 自定义按钮
fn: function(buttonId, text) {
// 根据buttonId处理用户响应
}
});
```
通过这些方法,开发者可以在ExtJs应用中创建各种交互式对话框,提升用户体验,使得B/S应用更加生动和富有交互性。学习和熟练掌握Ext.MessageBox的使用对于开发富客户端应用至关重要。