### Ext原理知识点详解
#### 一、Ext简介与原理
**Ext** 是一款基于 JavaScript 的开源框架，主要用于 Web 应用程序的开发。它提供了一系列丰富的用户界面组件和功能，帮助开发者快速构建交互性强、用户体验良好的 Web 应用。Ext 具有高度可定制性，支持多种主题样式，并且内置了大量的 UI 组件，如表格、树形结构、窗口等，极大地简化了前端开发工作。
#### 二、Ext MessageBox 组件介绍
**Ext.MessageBox** 是 Ext 框架中的一个重要组成部分，主要用于弹出对话框，显示消息或请求用户输入信息。它支持三种类型的对话框：警告（alert）、确认（confirm）和提示（prompt）。下面将详细介绍这三个方法的具体用法和示例代码。
##### 1. Ext.MessageBox.alert()
`Ext.MessageBox.alert()` 方法用于显示一个简单的警告对话框，其中包含一条消息和一个“确定”按钮。该方法接受三个参数：
- `title`：对话框的标题。
- `msg`：显示在对话框中的消息文本。
- `fn`：可选的回调函数，在用户点击“确定”按钮后执行。
示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>ArrayGridExample</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../src/locale/ext-base.js"></script>
</head>
<body>
<h1>消息提示</h1>
<p>--------------------</p>
<p>确认提示</p>
<p><button id="messageBox1">点击我</button></p>
</body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('messageBox1').on('click', function(){
Ext.MessageBox.alert('状态', '成功');
});
});
</script>
</html>
```
##### 2. Ext.MessageBox.confirm()
`Ext.MessageBox.confirm()` 方法用于创建一个带有确认和取消按钮的对话框。用户可以选择其中一个按钮进行操作。该方法同样接受三个参数：
- `title`：对话框的标题。
- `msg`：显示在对话框中的消息文本。
- `fn`：回调函数，在用户做出选择后执行，该函数接收一个参数表示用户的选择结果（`'ok'` 或 `'cancel'`）。
示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>ArrayGridExample</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../src/locale/ext-base.js"></script>
</head>
<body>
<h1>消息提示</h1>
<p align="center">--------------------</p>
<p align="center">确认/取消提示</p>
<p align="center"><button id="messageBox2">点击我</button></p>
</body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('messageBox2').on('click', function(){
Ext.MessageBox.confirm('确认', '是否要执行此操作？', function(e){
alert(e);
});
});
});
</script>
</html>
```
##### 3. Ext.MessageBox.prompt()
`Ext.MessageBox.prompt()` 方法用于创建一个对话框，其中包含一个输入框供用户输入信息。与前面两个方法类似，它也接受三个参数：
- `title`：对话框的标题。
- `msg`：显示在对话框中的消息文本。
- `fn`：回调函数，在用户点击“确定”按钮后执行，该函数接收两个参数：第一个参数表示用户的选择结果（`'ok'` 或 `'cancel'`），第二个参数是用户输入的内容。
示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>ArrayGridExample</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../src/locale/ext-base.js"></script>
</head>
<body>
<h1>消息提示</h1>
<p>--------------------</p>
<p>提示框</p>
<p><button id="messageBox3">点击我</button></p>
</body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('messageBox3').on('click', function(){
Ext.MessageBox.prompt('标题', '请输入内容', function(e, text){
alert(e + "-" + text);
});
});
});
</script>
</html>
```
#### 三、总结
通过上面的介绍和示例代码，我们可以看到 **Ext.MessageBox** 提供了非常灵活的对话框管理功能，可以方便地集成到基于 Ext 的应用程序中。无论是简单的消息提示还是复杂的用户输入验证，都可以轻松实现。这对于提高用户交互体验和简化开发流程都有着重要的意义。此外，Ext 还提供了大量的其他组件和功能，值得开发者深入学习和探索。
