### Ext的中文简单使用手册
#### Ext简介
Ext是一个基于JavaScript的开源框架，它提供了丰富的用户界面组件，帮助开发者快速构建高性能的Web应用程序。对于初次接触Ext的朋友来说，本手册旨在提供一个简单易懂的入门指南，通过实例帮助大家快速上手。
#### 目录
1. **下载Ext**
2. **开始！**
3. **Element：Ext的核心**
4. **获取多个DOM的节点**
5. **响应事件**
6. **使用Widgets**
- **MessageBox**
- **Grid**
- **更多组件**
7. **使用Ajax**
- **PHP**
- **ASP.Net**
- **ColdFusion**
#### 下载Ext
你需要从官方网站（http://extjs.com/downloads）下载最新版本的Ext。根据你的需求选择合适的版本，通常情况下，建议下载最稳定的版本。解压下载的文件后，你会看到一个名为`examples`的文件夹，这是一个非常好的起点，可以让你快速了解Ext的功能。
#### 开始！
为了演示如何使用Ext，我们创建了一个简单的项目，包含三个文件：`ExtStart.html`、`ExtStart.js`和`ExtStart.css`。将这些文件解压到Ext的安装目录下（例如，在`C:\code\Ext\v1.0`中创建一个名为`tutorial`的文件夹，并将这些文件放入其中）。然后，双击打开`ExtStart.html`文件，如果你的设置正确，应该会看到一条消息提示你配置已完成。如果遇到JavaScript错误，根据页面上的提示进行操作即可。
#### Element：Ext的核心
`Ext.onReady`是你接触的第一个方法。它确保整个DOM加载完毕后再执行指定的回调函数，这样可以确保页面内的所有元素都可以被脚本引用。这是Ext的一个关键特性，因为它使得脚本能够安全地访问DOM元素而不会因为元素还未加载完成而导致错误。
#### 获取多个DOM的节点
在JavaScript中，可以通过多种方式获取DOM节点，但在Ext中，推荐使用`Ext.get`方法。例如，要获取一个id为`myDiv`的元素，可以使用如下代码：
```javascript
var div = Ext.get('myDiv');
```
如果需要获取多个节点，可以使用`Ext.query`方法。例如，要获取所有class为`myClass`的元素，可以使用：
```javascript
var elements = Ext.query('.myClass');
```
#### 响应事件
在Ext中，事件处理是通过`addListener`方法实现的。例如，要为按钮添加点击事件，可以这样做：
```javascript
var button = Ext.get('myButton');
button.addListener('click', function() {
alert('Button clicked!');
});
```
#### 使用Widgets
Ext提供了大量的Widgets（小部件），如消息框（MessageBox）、网格（Grid）等。
##### MessageBox
消息框是一个弹出窗口，用于显示提示信息或确认对话框。例如：
```javascript
Ext.MessageBox.alert('Title', 'This is a message box.');
```
##### Grid
网格组件用于展示表格数据。要创建一个简单的网格，需要定义数据模型和列模型。以下是一个简单的示例：
```javascript
var store = new Ext.data.ArrayStore({
fields: ['name', 'email'],
data : [['Ed Spencer', '[email protected]'], ['Abe Elias', '[email protected]']]
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Name", dataIndex: 'name'},
{header: "Email", dataIndex: 'email'}
],
renderTo: 'grid-example'
});
```
##### 更多组件
除了以上提到的组件外，Ext还提供了许多其他组件，如表格、树形控件、标签页等，这些组件可以满足不同场景的需求。
#### 使用Ajax
Ext也支持与服务器端交互，可以轻松地发送Ajax请求。以下是一些示例：
##### PHP
在PHP环境中，你可以使用Ext.Ajax.request方法来发送请求：
```javascript
Ext.Ajax.request({
url: 'your_php_script.php',
params: {id: 1},
success: function(response) {
var result = Ext.decode(response.responseText);
console.log(result);
},
failure: function(response) {
console.log('Failed to load data.');
}
});
```
##### ASP.Net
在ASP.NET环境下，使用Ajax的方式与PHP类似：
```javascript
Ext.Ajax.request({
url: 'your_aspnet_script.aspx',
params: {id: 1},
success: function(response) {
var result = Ext.decode(response.responseText);
console.log(result);
},
failure: function(response) {
console.log('Failed to load data.');
}
});
```
##### ColdFusion
在ColdFusion中，使用Ajax的方式也是类似的：
```javascript
Ext.Ajax.request({
url: 'your_coldfusion_script.cfc',
params: {id: 1},
success: function(response) {
var result = Ext.decode(response.responseText);
console.log(result);
},
failure: function(response) {
console.log('Failed to load data.');
}
});
```
#### 总结
本手册为初学者提供了关于Ext的基本概念和用法介绍。通过上述示例，你可以了解到如何下载和安装Ext、如何使用基本的API以及如何创建简单的用户界面。希望这份手册能够帮助你快速入门Ext，为开发高效且美观的Web应用程序打下坚实的基础。
