ExtJS入门教程：Ext.MessageBox详解

"这篇文档是关于Extjs的入门实例和学习指南，主要涵盖了Extjs的Ext.MessageBox组件的使用，包括alert、confirm、prompt和show方法。文档适用于初学者，旨在帮助理解Extjs的布局优势和基本交互操作。" 在Extjs框架中，Ext.MessageBox是一个非常实用的组件，它提供了一种在用户界面上显示警告、确认和输入对话框的方式。以下是对这些方法的详细说明： 1. Ext.MessageBox.alert()方法 这个方法用于显示一个简单的警告对话框，包含一个“确定”按钮。它接受三个参数：`title`（对话框标题）、`msg`（显示的消息）和一个可选的回调函数`function()`。当用户点击“确定”按钮后，回调函数会被执行。例如： ```javascript Ext.MessageBox.alert("标题", "消息内容"); ``` 如果添加回调函数，可以在对话框关闭后执行特定操作，如： ```javascript Ext.MessageBox.alert("标题", "消息内容", function() { alert("对话框已关闭！"); }); ``` 2. Ext.MessageBox.confirm()方法 confirm方法与alert类似，但提供了“是”和“否”两个按钮供用户选择。同样，它有一个回调函数，返回值是用户点击的按钮值，可以是'yes'或'no'。示例： ```javascript Ext.MessageBox.confirm("标题", "确认消息", function(e) { alert(e); }); ``` 3. Ext.MessageBox.prompt()方法 prompt方法允许用户输入文本。它有六个参数，除了`title`、`msg`和回调函数外，还包括一个返回值`e`（用户点击的按钮值）、用户输入的文本`text`以及一个布尔值`multiline`，用于决定是否开启多行输入。如： ```javascript Ext.MessageBox.prompt("标题", "请输入内容", function(e, text) { alert(e + "-" + text); }); ``` 多行输入可以通过设置`multiline`为`true`实现，同时可以指定作用域`this`。 4. Ext.MessageBox.show()方法 show方法是最灵活的一个，它允许自定义配置来显示对话框。通过一个配置对象，你可以定制对话框的各个方面，如按钮、图标、宽度等。例如： ```javascript var config = { title: "自定义对话框", msg: "这是一个自定义的消息", buttons: Ext.MessageBox.OKCANCEL, icon: Ext.MessageBox.INFO }; Ext.MessageBox.show(config); ``` 通过这些方法，开发者可以在应用程序中轻松地创建交互式的提示和确认对话框，提升用户体验。Extjs的布局机制使得构建复杂的前端应用变得更加容易，而且其丰富的组件库使得开发者能够快速地开发出功能完备的界面。在学习和使用Extjs时，结合这些实例将有助于加深对框架的理解。