### 学习EXT 十日谈 —— 第一天：EXT简介
#### 一、EXT简介与背景
**EXT** 是一款流行的JavaScript库，主要用于构建Web应用程序的用户界面（UI）。这款库以其强大的功能、易用性和对不同浏览器的良好兼容性而著称。EXT的核心优势在于其简化了开发人员在构建动态Web应用时面临的复杂性，尤其是处理DOM（文档对象模型）的操作。本文旨在为初学者提供一个快速入门指南，并介绍EXT的基本概念。
#### 二、下载与安装
需要从官方站点（http://extjs.com/downloads）下载最新的EXT库。根据个人需求选择合适的版本进行下载。通常，选择最新稳定版是一个不错的选择。下载完成后，解压文件，其中的`examples`文件夹是一个很好的学习起点，可以借此深入了解EXT的各种功能。
#### 三、快速入门
为了快速上手EXT，可以通过一个简单的示例项目开始。示例文件包含`ExtStart.html`、`ExtStart.js` 和 `ExtStart.css` 这三个文件。将这些文件复制到EXT的安装目录下，例如：“C:\code\Ext\v1.0\tutorial”。双击`ExtStart.html` 文件打开浏览器查看效果。如果一切正常，应该能看到一条消息提示配置成功。
#### 四、深入理解EXT的核心——Element对象
**Element对象** 是EXT库的核心组件之一，用于处理DOM元素。通过使用Element对象，可以轻松执行各种DOM操作，如获取元素、修改样式、添加事件监听器等。Element对象提供了统一的接口，使得开发者能够在不同浏览器之间编写一致的代码，避免了因浏览器兼容性问题带来的困扰。
##### 1. 获取Element
在JavaScript中，通常使用 `document.getElementById()` 方法来获取DOM元素。然而，这种方式仅能根据元素的ID获取单一元素，且返回的是原始的DOM节点。相比之下，EXT提供的 `Ext.get()` 方法更加灵活高效：
```javascript
Ext.onReady(function(){
var myDiv = Ext.get('myDiv'); // 通过ID获取Element
});
```
##### 2. Element对象的功能特点
- **统一的DOM接口**：Element对象封装了常用的DOM方法和属性，提供了统一的、跨浏览器的接口。
- **缓存机制**：`Ext.get()` 方法内置了缓存机制，当多次获取同一个DOM元素时，可以显著提高性能。
- **丰富的DOM操作**：Element对象支持多种DOM操作，如添加/移除CSS类、添加/移除事件监听器、定位、尺寸调整、动画效果、拖拽等功能。
##### 3. 示例代码
下面是一段简单的示例代码，展示了如何使用Element对象进行DOM操作：
```javascript
Ext.onReady(function(){
var myDiv = Ext.get('myDiv');
myDiv.highlight(); // 高亮显示然后渐退
myDiv.addClass('red'); // 添加自定义CSS类
myDiv.center(); // 在视图中居中
myDiv.setOpacity(0.25); // 设置透明度
});
```
#### 五、总结
通过上述介绍，我们可以看到EXT不仅简化了DOM操作，还提高了代码的可维护性和可扩展性。对于想要快速构建动态Web应用的开发者来说，EXT无疑是一个值得学习的强大工具。随着对EXT进一步的学习和实践，你会发现更多实用的功能和技巧，从而能够构建出更加丰富和交互性强的应用程序。
