### ExtJs快速入门指南知识点概览
#### 一、ExtJS框架简介
- **定义**：ExtJS是一款基于JavaScript的框架，专为构建丰富的Web应用程序而设计。它提供了一套全面的用户界面组件，能够帮助开发者高效地创建复杂的前端交互功能。
- **特点**：ExtJS采用GPL开源协议，使得其不仅免费而且可以被广泛地应用于各种类型的Web项目之中，包括.NET、Java和PHP等后端技术。
- **发展历程**：ExtJS最初是由Jack Slocum开发的，受到了Java Swing等桌面应用程序设计模式的影响。它借鉴了这些成熟技术的优势，并将其转化为一种强大的Web应用程序开发工具。
#### 二、如何使用ExtJS
- **安装与配置**：首先需要从官方网站下载ExtJS SDK，并将其部署到Web应用程序目录中。之后可以通过HTML `<script>` 标签将ExtJS的库文件引入到网页中，从而实现对ExtJS库的使用。
- **示例代码**：
- 引入CSS样式文件：`<link rel="stylesheet" type="text/css" href="path/to/ext-all.css"/>`
- 引入JavaScript库文件：`<script type="text/javascript" src="path/to/ext-base.js"></script>`
- 引入主JavaScript库文件：`<script type="text/javascript" src="path/to/ext-all.js"></script>`
- 初始化环境：设置空白图像URL，初始化快速提示功能。
- 应用加载完成事件：使用`Ext.onReady()`函数，在文档加载完成后执行特定脚本。
#### 三、Ext组件
- **组件简介**：ExtJS中的组件是构成用户界面的基本单元，每个组件都有自己的特性和行为。
- **XType**：XType是一种简短的字符串形式，用于标识组件类型。这使得在创建组件时更加方便快捷。
- **组件应用**：通过构造函数创建组件实例，并指定必要的配置选项。
- **组件配置选项**：这些选项定义了组件的行为、外观以及与其他组件的交互方式。
- **组件属性**：组件的属性可以用来获取或设置组件的状态。
- **组件方法**：提供了操作组件的各种方法，如显示、隐藏、刷新等。
#### 四、事件及事件响应
- **事件绑定**：可以使用`addListener()`方法为组件添加事件监听器。
- **事件触发**：当某个事件发生时，绑定的监听器会被触发并执行相应的回调函数。
- **常用事件**：如点击事件（`click`）、双击事件（`dblclick`）等。
#### 五、Component及Container简介
- **Ext.Component**：基本的组件类，所有其他组件都是它的子类。
- **Ext.Container**：容器组件，可以包含其他组件。它负责管理内部子组件的布局和显示。
#### 六、面板Ext.Panel
- **简介**：面板是ExtJS中最常用的容器之一，可以用来组织和展示内容。
- **内容**：面板通常包含标题、工具栏、主体内容等部分。
- **与DOM节点关系**：面板在DOM中通常表现为一个`<div>`元素，可以通过配置选项控制其样式和行为。
#### 七、ViewPort
- **定义**：ViewPort是特殊类型的面板，代表了浏览器视窗的整个区域。
- **用途**：用于填充整个浏览器窗口，常用于单页应用程序的布局设计。
#### 八、窗口Window
- **概述**：窗口组件可以在应用中创建弹出窗口，适用于显示对话框或临时内容。
- **特性**：可以配置标题、大小、位置等属性。
#### 九、对话框
- **功能**：用于收集用户输入或显示警告消息。
- **类型**：如警告对话框、确认对话框等。
#### 十、TabPanel
- **描述**：TabPanel是一个支持标签页切换的容器组件。
- **应用场景**：适合组织多部分内容或功能模块。
#### 十一、布局
- **布局管理器**：ExtJS提供了多种布局管理器，如BorderLayout、FitLayout等，用于控制容器内子组件的排列方式。
- **布局选项**：通过配置布局管理器的选项来实现灵活的界面布局。
#### 十二、表格Grid
- **表格组件**：Grid是一个用于展示表格数据的组件，支持分页、排序、筛选等功能。
- **列配置**：可以自定义表格的列，包括列头、宽度、是否可排序等。
#### 十三、TreePanel
- **树状结构**：TreePanel用于展示层级关系的数据，如文件系统目录结构。
- **节点操作**：支持展开、折叠、拖拽等操作。
#### 十四、表单Form
- **表单组件**：用于创建Web表单，支持验证、提交等功能。
- **字段类型**：包括文本框、下拉列表、复选框等多种字段类型。
#### 十五、理解HtmlDOM、ExtElement及Component
- **DOM基础**：理解DOM模型及其在Web开发中的作用。
- **ExtElement**：ExtJS提供的扩展DOM元素，增加了更多功能和方法。
- **Component与DOM的关系**：ExtJS组件与DOM元素之间的映射关系。
#### 十六、Ext类中的get方法简介
- **get方法**：许多ExtJS组件和类提供了get方法，用于获取组件的某些属性或状态。
#### 十七、如何学习及掌握Ext
- **资源推荐**：官网文档、社区论坛、在线教程等。
- **实践建议**：从简单示例开始，逐步尝试更复杂的项目。
- **最佳实践**：遵循ExtJS的最佳实践和编码规范，提高代码质量和可维护性。
通过以上内容的学习和实践，开发者可以快速掌握ExtJS的基本使用方法，并逐步深入到高级主题和技术细节中。
