【ExtJS入门案例】ExtJS 是一个用于构建企业级 Web 应用程序的 JavaScript 框架，它提供了丰富的 UI 组件和强大的数据处理能力。对于初学者来说，掌握 ExtJS 的基本结构和使用方法是学习的第一步。以下是一个简单的 ExtJS 入门案例，帮助开发者快速上手。
一、概述
ExtJS 的核心思想是通过组件化的方式构建用户界面，所有元素（如按钮、表格、表单等）都可以作为组件来创建和管理。通过配置对象，可以灵活地定义组件的属性和行为。
本案例将展示如何创建一个包含按钮和面板的基本 ExtJS 页面，并实现点击按钮后弹出提示信息的功能。
二、代码结构说明
| 文件名 | 功能说明 |
| `index.html` | 主页面文件，引入 ExtJS 库并初始化应用 |
| `app.js` | 定义 ExtJS 应用的主类和组件 |
三、完整示例代码
1. `index.html`
```html
<script src="https://cdn.jsdelivr.net/npm/extjs@6.2.0/build/ext-all.js"></script>
<script src="app.js"></script>
```
2. `app.js`
```javascript
Ext.onReady(function () {
// 创建一个面板组件
var panel = Ext.create('Ext.panel.Panel', {
title: '欢迎使用 ExtJS',
width: 300,
height: 200,
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: '点击我',
handler: function () {
Ext.Msg.alert('提示', '你点击了按钮！');
}
}
});
});
```
四、运行效果
当浏览器加载 `index.html` 页面时，会显示一个带有“点击我”按钮的面板。点击按钮后，会弹出一个提示框，内容为“你点击了按钮！”。
五、总结
| 关键点 | 内容 |
| ExtJS 的作用 | 构建企业级 Web 应用 |
| 核心概念 | 组件、配置对象、事件处理 |
| 快速上手方式 | 引入库文件，使用 `Ext.onReady` 初始化 |
| 示例功能 | 显示面板 + 按钮 + 弹窗提示 |
| 学习建议 | 熟悉组件类型和事件机制，逐步扩展复杂功能 |
通过这个简单案例，你可以了解 ExtJS 的基本结构和开发流程。随着对框架的深入理解，可以尝试更多高级功能，如数据绑定、表单验证、网格控件等。
