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

"EXTJS学习资料，包括Ext.MessageBox的使用教程" EXTJS是一个强大的JavaScript库，专用于构建富客户端Web应用程序。其提供了丰富的组件和布局管理，使得开发复杂的前端界面变得简单。在EXTJS中，`Ext.MessageBox`是一个非常实用的模块，它允许开发者创建弹出对话框来与用户进行交互，如警告、确认或获取用户输入。 1. **Ext.MessageBox.alert()** `Ext.MessageBox.alert()`方法用于显示一个简单的警告对话框，通常包含一个确定按钮。该方法接受三个参数： - `title`: 对话框的标题。 - `msg`: 显示的消息内容。 - `function()`: 可选的回调函数，当用户点击确定按钮关闭对话框后执行。 示例： ```javascript Ext.MessageBox.alert("警告", "这是一个警告消息"); Ext.MessageBox.alert("提示", "操作成功", function() { alert("对话框关闭后执行的操作"); }); ``` 2. **Ext.MessageBox.confirm()** 类似于`alert()`，`confirm()`方法用于创建一个确认对话框，包含“是”和“否”两个按钮。回调函数的参数`e`表示用户的选择，可以是'yes'或'no'。 示例： ```javascript Ext.MessageBox.confirm("确认", "你确定要删除吗?", function(e) { if (e === 'yes') { // 用户点击了“是” } else { // 用户点击了“否” } }); ``` 3. **Ext.MessageBox.prompt()** `prompt()`方法用于获取用户的输入，对话框内包含一个输入框。它有四个参数，后两个是可选的： - `function(e, text)`: 回调函数，`e`是用户点击的按钮（'ok'或'cancel'），`text`是输入框的文本。 - `this`: 指定回调函数的执行上下文。 - `multiline`: 是否启用多行输入。 示例： ```javascript Ext.MessageBox.prompt("请输入名字", "请输入你的名字", function(e, name) { if (e === 'ok') { alert('你的名字是：' + name); } }, null, true); // 多行输入 ``` 4. **Ext.MessageBox.show()** 最灵活的方法，允许自定义配置。`show()`方法可以创建任何类型的对话框，并通过配置对象控制其行为和外观。常用配置项包括： - `animEl`: 设置动画效果的元素ID。 - `buttons`: 定义对话框上的按钮，可以是预定义的按钮集，也可以是自定义按钮。 - `fn`: 相当于其他方法中的回调函数。 - `msg`: 显示的消息。 - `modal`: 是否创建模态对话框。 - `width`, `height`: 对话框的尺寸。 示例： ```javascript Ext.MessageBox.show({ title: "自定义对话框", msg: "这是自定义的消息", buttons: Ext.MessageBox.YESNO, fn: function(buttonId) { if (buttonId === 'yes') { console.log('用户点击了“是”'); } else { console.log('用户点击了“否”'); } }, animEl: 'id1', modal: true }); ``` EXTJS的`Ext.MessageBox`类为开发者提供了与用户交互的强大工具，可以根据需要轻松创建各种对话框，提升用户体验。在实际项目中，这些方法可以结合服务器端的逻辑，实现更为复杂的业务流程。