ExtJs2.0学习系列：Ext.MessageBox详解

"这篇文档是关于ExtJs的学习实例，特别是针对ExtJs 2.0版本的，主要包括Ext.MessageBox的使用，如alert、confirm、prompt方法以及show方法的介绍。" 在ExtJs中，Ext.MessageBox是一个非常实用的组件，用于显示各种消息框，包括警告、确认和提示用户输入信息。下面我们将详细探讨这些方法： 1. Ext.MessageBox.alert() 这个方法用于显示简单的警告对话框，包含一个确定按钮。它接受三个参数：`title`（对话框标题）、`msg`（显示的消息）和一个可选的`function`回调。当用户点击确定按钮后，回调函数会被执行。例如： ```javascript Ext.MessageBox.alert("标题", "消息"); Ext.MessageBox.alert("标题", "消息", function() { alert("对话框关闭后触发的函数"); }); ``` 2. Ext.MessageBox.confirm() confirm方法与alert类似，但增加了一个用户确认的选项，通常有两个按钮：是和否。同样，它接受三个参数：`title`，`msg`，和一个回调函数，该函数会接收到用户点击的按钮值（'yes'或'no'）： ```javascript Ext.MessageBox.confirm("标题", "消息", function(e) { alert(e); // 用户点击的按钮值，可能是'yes'或'no' }); ``` 3. Ext.MessageBox.prompt() prompt方法用于获取用户输入，提供一个文本输入框。它有四个参数：`title`，`msg`，一个回调函数，以及一个布尔值`multiline`，决定输入框是否为多行。回调函数接收两个参数：用户点击的按钮值（'ok'或'cancel'）和用户输入的文本： ```javascript Ext.MessageBox.prompt("标题", "消息", function(e, text) { alert(e + "-" + text); // 按钮值和输入的文本 }); Ext.MessageBox.prompt("标题", "消息", function(e, text), this, true); // 多行输入 ``` 4. Ext.MessageBox.show() show方法是最灵活的，允许自定义配置来创建消息框。它可以接受一系列配置参数，如`animEl`用于指定对话框动画的元素ID。通过配置，可以实现更多复杂的功能和自定义样式。例如： ```javascript Ext.MessageBox.show({ title: "自定义标题", msg: "自定义消息", animEl: "id1", // 动画效果 buttons: Ext.MessageBox.YESNO, // 添加是/否按钮 fn: function(buttonId, text) { console.log(buttonId, text); // 打印点击的按钮ID和输入的文本 } }); ``` 这些方法使得开发者能够轻松地与用户进行交互，提供丰富的界面反馈，而无需编写复杂的UI代码。 总结，ExtJs中的Ext.MessageBox提供了丰富的消息提示和用户交互功能，无论是简单的警告信息还是需要用户确认或输入的情况，都能很好地处理。通过熟练掌握这些方法，可以极大地提升应用的用户体验。