ExtJs入门教程： MessageBox 使用详解

"本文是关于ExtJs入门的实例教程，特别关注ExtJs 2.0中的Ext.MessageBox组件的使用，包括alert、confirm、prompt和show方法的详细介绍及示例演示。" 在ExtJs框架中，Ext.MessageBox是一个非常实用的组件，它提供了一种方便的方式来显示警告、确认和输入对话框。在本文中，我们将深入探讨如何使用这些方法来增强用户界面的交互性。 首先，我们来看`Ext.MessageBox.alert()`方法。此方法用于显示一个简单的警告对话框，包含一个标题、消息和一个可选的回调函数。例如： ```javascript Ext.MessageBox.alert("标题", "消息"); ``` 当用户点击对话框上的“确定”按钮时，对话框会自动关闭。如果提供了回调函数，该函数将在用户关闭对话框后执行： ```javascript Ext.MessageBox.alert("标题", "消息", function() { alert("关闭对话框后弹出！"); }); ``` 接下来是`Ext.MessageBox.confirm()`方法，它与`alert()`类似，但添加了一个确认功能，允许用户选择“是”或“否”。回调函数接收一个参数，表示用户点击的按钮值： ```javascript Ext.MessageBox.confirm("标题", "消息", function(e) { alert(e); // e可能是'yes'或'no' }); ``` `Ext.MessageBox.prompt()`方法则用于获取用户的输入。它允许设置标题、消息以及一个回调函数，该函数处理用户输入的文本和用户选择的按钮值。例如： ```javascript Ext.MessageBox.prompt("标题", "请输入内容", function(e, text) { alert(e + "-" + text); // e可能是'ok'或'cancel' }); ``` 此外，还可以通过配置参数开启多行输入： ```javascript Ext.MessageBox.prompt("标题", "请输入内容", function(e, text) { alert(e + "-" + text); }, this, true); // true表示多行输入 ``` 最后，`Ext.MessageBox.show()`方法是最灵活的一个，它允许自定义配置来创建对话框。通过配置对象，可以定制对话框的按钮、样式、图标等。例如： ```javascript Ext.MessageBox.show({ title: "自定义标题", msg: "自定义消息", buttons: Ext.MessageBox.YESNO, fn: function(buttonId) { alert(buttonId); } }); ``` 以上就是对ExtJs 2.0中Ext.MessageBox组件的基本介绍和使用示例。掌握这些方法，可以帮助开发者快速创建具有丰富交互性的前端应用。通过实践和调整配置，可以进一步提升用户体验。