ExtJS学习： MessageBox详解与示例

"这是一份关于ExtJs的学习实例文档，主要涵盖了ExtJs 2.0中的Ext.MessageBox组件的使用，包括alert、confirm、prompt和show等方法，旨在帮助初学者快速掌握ExtJs的基本操作和应用。" ExtJs是一种基于JavaScript的前端框架，用于构建富客户端Web应用程序。它提供了一系列丰富的UI组件，如表格、面板、菜单、对话框等，使得开发者可以创建具有桌面应用程序般用户体验的Web应用。ExtJs的布局管理机制强大，能够适应各种复杂的界面布局需求。 文档中重点介绍了Ext.MessageBox，这是一个用于显示消息对话框的组件，可以实现警告、确认和用户输入等功能。 1. `Ext.MessageBox.alert()` 方法：主要用于显示警告或信息提示，包含三个参数，分别是对话框标题、显示的消息文本和一个可选的回调函数。当用户点击确定按钮关闭对话框后，回调函数会被执行。例如： ```javascript Ext.MessageBox.alert("标题", "消息内容"); Ext.MessageBox.alert("标题", "消息内容", function() { alert("对话框关闭后执行"); }); ``` 2. `Ext.MessageBox.confirm()` 方法：与`alert()`类似，但提供了确认操作，用户可以选择是或否。回调函数的参数`e`代表用户选择的按钮值，可能的值为"yes"或"no"。 ```javascript Ext.MessageBox.confirm("标题", "确认消息", function(e) { alert(e); // 输出 "yes" 或 "no" }); ``` 3. `Ext.MessageBox.prompt()` 方法：用于获取用户输入，有四个参数，包括标题、消息、回调函数以及一个布尔值，表示是否开启多行输入。回调函数的两个参数`e`和`text`分别代表按钮值（"ok"或"cancel"）和用户输入的文本。 ```javascript Ext.MessageBox.prompt("标题", "请输入内容", function(e, text) { alert(e + "-" + text); // 按钮值和输入文本 }); ``` 多行输入示例： ```javascript Ext.MessageBox.prompt("标题", "请输入内容", function(e, text) { alert(e + "-" + text); }, this, true); // 开启多行输入 ``` 4. `Ext.MessageBox.show()` 方法：这是个高度可定制的方法，允许开发者自定义对话框的配置，包括动画效果、大小、按钮等。例如，可以设置动画元素、对话框的位置等： ```javascript Ext.MessageBox.show({ title: "标题", msg: "消息", animEl: "id1", // 动画效果从id1元素处开始 buttons: Ext.MessageBox.OKCANCEL, // 默认按钮，OK和Cancel fn: function(buttonId, text) { // buttonId是用户点击的按钮ID，text是用户输入 } }); ``` 通过这些基本方法，开发者可以轻松地在应用程序中添加交互式消息提示和用户输入功能。ExtJs提供的这种强大的对话框组件，大大简化了前端开发工作，提高了开发效率。学习和掌握这些基础知识，对于理解和运用ExtJs进行Web应用开发至关重要。