### Extjs学习教程知识点概述
#### 一、ExtJS简介
- **定义**: ExtJS是一个高级的JavaScript库，专门用于构建交互式Web应用程序。它利用AJAX技术来增强用户界面的功能性和美观度，使得Web应用能够像桌面应用一样运行流畅且功能强大。
- **特点**:
- 与后端技术无关：ExtJS可以与任何后端技术无缝集成，如.NET、Java或PHP等。
- 强大的表格功能：提供了丰富的表格操作功能，例如单选、多选行、行高亮显示、列拖拽调整宽度、按列排序等。
- 高度定制化：允许用户自定义表格单元格的显示样式，支持本地及远程分页等功能。
- Excel导出支持：从ExtJS 3开始，提供了Excel导出功能。
#### 二、ExtJS最新版本特性
- **版本**: 讲述的是5.1.0版本。
- **新特性**:
- 新增了网格选项模式（电子表格模型）。
- 添加了许多新组件，并增强了现有组件的功能，例如3D柱状图、改进的绘图包、颜色选择器和评分组件等。
#### 三、搭建ExtJS环境
- **步骤**:
- 从官方网站www.extjs.com下载开发包（版本ext-5.1.0-gpl.zip）。
- 使用`sencha cmd`命令行工具建立开发环境：
```shell
sencha sdk add d:\aspx\extjs5.1
sencha generate app myapp d:\aspx\test
```
- `d:\aspx\extjs5.1`: SDK的根目录。
- `myapp d:\aspx\test`: 在指定目录创建名为`myapp`的应用程序。
- **文件加载流程**:
- 打开`index.html`文件可以看到仅引入了一个`bootstrap.js`文件。
- `bootstrap.js`文件根据`bootstrap.json`配置文件来设置ExtJS类的调用路径、引入CSS，并最终加载`app.js`。
#### 四、ExtJS组件体系
- **概念**: ExtJS的核心是其丰富的组件库，这些组件构成了ExtJS的UI控件基础。
- **组件分类**:
- **基本组件**：包括Panel、Button等。
- **工具栏组件**：Toolbar、ButtonGroup等。
- **表单及元素组件**：TextField、DateField等。
- **创建组件**:
- 通过`Ext.create()`方法创建组件，例如创建一个窗口使用`Ext.create('Ext.window.Window', {})`。
- 组件构造函数通常接受一个包含配置属性的对象作为参数。
#### 五、示例代码
- **创建一个简单的窗口**:
```javascript
Ext.onReady(function(){
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
closable: true,
html: 'Hello World!'
}).show();
});
```
#### 六、ExtJS布局(Layout)
- **定义**: 布局管理器用于控制组件的尺寸和位置，使界面能够适应不同的屏幕尺寸。
- **常见布局类型**:
- **Card Layout**：用于切换不同面板的内容。
- **Border Layout**：将容器划分为上、下、左、右、中心五个区域。
- **Fit Layout**：使子项填充整个容器。
#### 七、ExtJS消息提示框
- **功能**: 提供了多种对话框，用于向用户显示消息或请求输入。
- **示例**:
- **Alert Dialog**：用于显示警告或信息消息。
- **Confirm Dialog**：用于请求用户的确认。
- **Prompt Dialog**：用于获取用户输入。
#### 八、ExtJS数据模型
- **定义**: 数据模型用于存储和管理应用程序的数据。
- **关键概念**:
- **Model**：定义数据字段和业务逻辑。
- **Store**：负责加载和保存数据到服务器。
- **Proxy**：定义数据加载和保存的策略。
#### 九、ExtJS事件绑定
- **作用**: 用于处理用户交互事件。
- **常见事件**:
- **Click Event**：点击事件。
- **Select Event**：选择事件。
- **Resize Event**：大小改变事件。
#### 十、Ajax及工具方法
- **功能**: 提供了便捷的方法来执行异步请求和其他辅助功能。
- **示例**:
- **Ajax Request**：发送异步HTTP请求。
- **DOM Manipulation**：操作DOM元素。
#### 十一、ExtJS开发实践
- **示例**:
- **Grid Panel**：展示表格数据。
- **Form Panel**：收集用户输入。
- **Tab Panel**：实现标签页导航功能。
以上是对ExtJS基础知识的概述，通过学习这些知识点，开发者可以更好地理解和掌握ExtJS框架的核心技术和应用场景。
