ExtJs2.0初学者教程：Ext.MessageBox详解

"ExtJs新手入门实例" ExtJs是一款强大的JavaScript前端框架，用于构建富客户端应用程序。它提供了丰富的组件库和高度可定制的界面元素，帮助开发者创建出具有桌面应用般用户体验的网页应用。本篇文章将从新手的角度出发，详细介绍ExtJs入门实例中的几个关键功能，包括`Ext.MessageBox`的基本用法。 1. **Ext.MessageBox.alert()方法** `Ext.MessageBox.alert()`是用于显示警告对话框的方法。它有三个主要参数：`title`、`msg`和一个可选的回调函数`function`。`title`是对话框的标题，`msg`是显示的消息内容。回调函数会在用户点击确定按钮关闭对话框后执行。例如： ```javascript Ext.MessageBox.alert("提示", "这是一个警告消息"); ``` 如果添加回调函数，可以在对话框关闭后执行特定操作： ```javascript Ext.MessageBox.alert("提示", "这是一个警告消息", function() { alert("对话框已关闭！"); }); ``` 2. **Ext.MessageBox.confirm()方法** 类似于`alert()`，`confirm()`方法用于显示确认对话框。它同样接受三个参数，但用户可以选择确认或取消。回调函数的参数`e`会返回用户的选择（'yes'或'no'）。例如： ```javascript Ext.MessageBox.confirm("确认", "你确定要继续吗？", function(e) { if (e == 'yes') { alert("用户选择了确认"); } else { alert("用户选择了取消"); } }); ``` 3. **Ext.MessageBox.prompt()方法** `prompt()`方法用于获取用户输入。它有四个参数：`title`、`msg`、回调函数和一个可选的多行标志。回调函数接收两个参数：`e`（用户点击的按钮）和`text`（用户输入的文本）。例如，请求用户输入姓名并给出反馈： ```javascript Ext.MessageBox.prompt("请输入姓名", function(e, text) { if (e == 'ok') { alert("你输入的名字是：" + text); } }); ``` 若要启用多行输入，可以设置最后一个参数为`true`： ```javascript Ext.MessageBox.prompt("请输入内容", function(e, text) { // ... }, this, true); ``` 4. **Ext.MessageBox.show()方法** 最灵活的是`show()`方法，它允许通过配置对象定义对话框的样式和行为。配置项包括但不限于`msg`、`buttons`、`width`、`height`等。例如，自定义一个带有“是”和“否”的确认对话框： ```javascript Ext.MessageBox.show({ title: "自定义确认", msg: "这是一个自定义的确认消息", buttons: Ext.MessageBox.YESNO, fn: function(buttonId) { if (buttonId === 'yes') { alert("用户点击了'是'"); } else { alert("用户点击了'否'"); } } }); ``` 这些基本的`Ext.MessageBox`使用示例为新手提供了一个很好的起点，理解如何在ExtJs应用中创建和使用对话框。通过熟练掌握这些方法，开发者可以更方便地与用户交互，提升应用的用户体验。在实际项目中，可以根据需求进行更复杂的定制，如添加图标、改变按钮顺序或调整对话框样式。随着对ExtJs的深入学习，你会发现它的组件系统非常强大，能够构建出功能丰富、界面精美的Web应用。