ExtJs2.0学习教程：从 MessageBox 开始

“ExtJs学习实例，提供EXT学习的实用工具，帮助初学者更轻松地掌握ExtJs技术，特别强调布局的灵活性。” 在深入探讨ExtJs这个强大的JavaScript框架之前，我们首先要明白它主要用于构建富客户端应用，提供丰富的用户界面组件和灵活的布局管理。ExtJs以其直观的API和强大的功能吸引了许多开发者。 本实例主要关注Ext.MessageBox，这是一个内置的对话框组件，用于显示警告、确认和提示信息。以下是对`Ext.MessageBox`中几个关键方法的详细解释： 1. Ext.MessageBox.alert() 这个方法用于展示一个简单的警告对话框，包含一个确定按钮。它接受三个参数：`title`（对话框标题），`msg`（显示的消息）和一个可选的回调函数`function()`，该函数会在用户点击确定按钮后执行。例如： ```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' ? "确认操作" : "取消操作"); }); ``` 3. Ext.MessageBox.prompt() `prompt()`方法允许用户输入文本。它有四个参数，除了`title`和`msg`之外，还包括一个回调函数和一个布尔值，表示是否开启多行输入。回调函数接收两个参数：用户点击的按钮值（`'ok'`或`'cancel'`）和用户输入的文本： ```javascript Ext.MessageBox.prompt("请输入", "请输入你的名字", function(e, text) { if (e === 'ok') { alert("你输入的是：" + text); } }); ``` 多行输入可通过设置最后一个参数为`true`实现。 4. Ext.MessageBox.show() 最具灵活性的方法，允许自定义配置来创建对话框。它接受一个配置对象，包括`animEl`（用于动画效果的元素ID）等众多选项。例如： ```javascript Ext.MessageBox.show({ title: "自定义对话框", msg: "这是一个示例", buttons: Ext.MessageBox.OKCANCEL, fn: function(buttonId, text) { console.log("点击的按钮：" + buttonId, "输入的文本：" + text); }, animEl: "id1", width: 400, height: 200 }); ``` 通过`show()`方法，你可以自定义对话框的外观和行为，使其完全符合应用的需求。 Ext.MessageBox是ExtJs框架中的一个重要组成部分，提供了多种与用户交互的方式，是开发Web应用时不可或缺的工具。通过熟练掌握这些方法，你可以创建出更富交互性和用户体验良好的应用。