### EXT 中文手册-开发必备
#### EXT简介与入门指南
**EXT** 是一款基于 JavaScript 的开源框架，专为 Web 应用程序提供丰富的用户界面组件。它最初由 Jack Slocum 开发，并逐渐成为 Web 开发领域内的一款重要工具。本手册旨在帮助初学者快速上手 Ext，通过详细讲解其各个组成部分及其应用方式，让开发者能够迅速掌握 Ext 的基本操作。
#### 下载Ext
你需要从官方网站 [http://extjs.com/downloads](http://extjs.com/downloads) 下载最新的 Ext 版本。根据你的需求选择合适的版本进行下载。通常情况下，推荐下载稳定版本，因为它们经过了充分的测试，更加可靠。下载完成后，解压文件，你会看到一个名为 `examples` 的文件夹，这是开始学习 Ext 的好地方。
#### Element：Ext的核心
**Element** 是 Ext 的核心概念之一，它代表了 DOM 节点的封装，使得开发者可以更轻松地操作网页上的元素。通过 Element，你可以轻松地获取、修改和查询 DOM 元素。例如，你可以使用 `Ext.get('someElementId')` 来获取 ID 为 `someElementId` 的元素，并对其进行各种操作。
#### 获取多个DOM的节点
在实际开发中，我们经常需要获取多个 DOM 节点。Ext 提供了多种方法来实现这一目标：
- **`Ext.get()` 方法**：可以接受多个参数，返回一个包含这些参数对应的 DOM 节点的数组。
- **`Ext.select()` 方法**：更强大的方法，支持 CSS 选择器语法，可以更加灵活地选取 DOM 节点。
例如，以下代码展示了如何使用 `Ext.select()` 方法选取页面上的所有 `<div>` 元素：
```javascript
var divs = Ext.select('div');
```
#### 响应事件
Ext 也提供了丰富的事件处理机制。你可以轻松地为元素绑定事件监听器，并定义相应的回调函数来响应这些事件。这极大地简化了事件处理过程，并提高了代码的可维护性。
例如，要为一个按钮添加点击事件，可以这样做：
```javascript
var btn = Ext.get('myButton');
btn.on('click', function() {
// 在这里编写响应点击事件的代码
});
```
#### 使用Widgets
Ext 提供了大量的 Widgets（小部件），如 MessageBox、Grid 等，可以帮助开发者快速构建复杂的用户界面。
- **MessageBox**：用于显示模态对话框，可以通过 `Ext.MessageBox` 类来创建。
- **Grid**：用于展示表格数据，可以通过 `Ext.grid.GridPanel` 创建一个 Grid 小部件，并配置其数据源和列模型。
##### MessageBox 示例
```javascript
Ext.MessageBox.show({
title: '提示',
msg: '这是一个消息框示例。',
buttons: Ext.MessageBox.OK
});
```
##### Grid 示例
```javascript
var store = new Ext.data.JsonStore({
url: 'data.json',
root: 'rows',
id: 'id',
fields: ['name', 'email']
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Name", dataIndex: 'name'},
{header: "Email", dataIndex: 'email'}
],
renderTo: 'grid-container'
});
```
#### 使用Ajax
Ext 内置了强大的 Ajax 支持，可以轻松地与服务器进行异步通信。无论是 PHP、ASP.NET 还是 ColdFusion，Ext 都能提供良好的支持。
- **PHP**：通过 `Ext.Ajax.request` 方法发送请求到 PHP 后端。
- **ASP.NET**：同样使用 `Ext.Ajax.request` 方法，但可能需要额外处理 ASP.NET 的输出格式。
- **ColdFusion**：与 PHP 和 ASP.NET 类似，使用 `Ext.Ajax.request` 方法。
#### TabPanel基础
TabPanel 是一个非常实用的组件，可以用来组织多个面板或页面。下面是一个创建 TabPanel 的基本步骤：
1. **创建 HTML 骨架**：设置基本的 HTML 结构。
2. **构建 Ext 结构**：使用 ExtJS 代码来定义 TabPanel。
3. **创建 Tab 控制逻辑**：定义 Tab 之间的切换逻辑。
通过以上步骤，你可以创建出功能完善的 TabPanel。
#### 总结
通过本手册的学习，你已经了解了 Ext 的基本概念，掌握了如何下载和安装 Ext，以及如何使用 Element、响应事件、使用 Widgets 和 Ajax 等核心功能。希望这些知识能够帮助你在 Web 开发的道路上更进一步。
