Extjs自学教程从哪开始学？

99ANYc3cd6 自学报考 2026-04-14 1

第一部分：Ext JS 自学路线图

学习 Ext JS 就像学习一门新的编程语言，需要循序渐进，建议按照以下四个阶段进行：

基础准备与环境搭建

这个阶段的目标是理解 Ext JS 的核心概念，并成功运行你的第一个应用。

理解核心概念：
- 组件：这是 Ext JS 的基石，按钮、窗口、面板、表格等都是组件，你需要理解所有东西都是组件。
- 容器：用于存放其他组件的特殊组件，如 Panel, Viewport, Container，它负责管理其子组件的布局。
- 配置：在创建组件时，通过 config 对象来设置其属性，如 title, width, height 等。
- 事件：组件的行为，如点击按钮 (click)、窗口关闭 (close)，你需要学会如何监听和处理这些事件。
- 布局：决定容器内子组件如何排列和显示的方式，这是 Ext JS UI 的精髓，需要重点学习 Border Layout (边框布局), Fit Layout (自适应布局), HBox/VBox (水平/垂直盒子布局)。
搭建开发环境：
- 安装 Node.js 和 npm：Ext JS 的开发工具（如 Sencha Cmd）依赖于 Node.js。
- 安装 Sencha Cmd：这是 Ext JS 的官方命令行工具，用于创建、构建和管理项目。这是必装工具。
```
npm install -g sencha
```
- 获取 Ext JS SDK：你需要一个 Ext JS 的软件开发包，你可以从 Sencha 官网下载试用版或购买商业版。
- 创建第一个项目：
```
# 1. 创建一个项目目录
mkdir my-first-extjs-app
cd my-first-extjs-app
# 2. 使用 Sencha Cmd 创建应用程序
# 注意：将 /path/to/ext-6.7.0 替换为你的 Ext JS SDK 路径
sencha -sdk /path/to/ext-6.7.0 generate app MyApp .
```
- 运行项目：
```
sencha app watch
```
  然后浏览器访问 http://localhost:1841，你应该能看到一个欢迎页面。

核心组件与布局实战

这个阶段的目标是掌握常用组件和布局,能够独立搭建出应用的主体框架。

数据层：
- Ext.data.Model：定义数据模型，类似于数据库表结构，定义字段类型和验证规则。
- Ext.data.Store：数据的集合，负责管理和操作数据（如增删改查、排序、过滤），它是连接 UI 组件和数据模型的桥梁。
- Ext.data.proxy：数据的代理，决定数据从哪里来（内存、Ajax、LocalStorage）和到哪里去。
常用 UI 组件：
- 表单相关：FormPanel, FieldSet, TextField, NumberField, DateField, ComboBox (下拉框), Checkbox，重点学习 FormPanel 的提交和数据加载。
- 数据展示：GridPanel (数据表格，功能极其强大)，TreePanel (树形结构)，这是 Ext JS 的王牌组件，需要深入学习其列模型、分页、排序、行选择等功能。
- 布局容器：Viewport (整个浏览器窗口容器，通常用 Border Layout), Panel (最常用的容器), TabPanel (选项卡面板), FieldSet (表单分组)。
- 其他常用组件：Button, Toolbar, Menu, Window (弹出窗口)。
实践项目：
- 构建一个后台主界面
  - 使用 Viewport + Border Layout。
  - west 区域：一个 TreePanel 作为菜单。
  - center 区域：一个 TabPanel，点击菜单项动态添加新的标签页。
  - north 区域：一个 Toolbar 显示一些操作按钮和用户信息。
- 构建一个用户管理页面
  - 在 TabPanel 中添加一个“用户管理”标签页。
  - 页面主体是一个 GridPanel。
  - 为 Grid 配置列（姓名、邮箱、电话等）。
  - 创建一个 Store，并使用模拟数据 (Ext.data.ArrayProxy) 填充 Grid。
  - 为 Grid 添加顶部工具栏，包含“新增”、“编辑”、“删除”按钮。

高级特性与最佳实践

这个阶段的目标是让你的应用更健壮、更专业。

MVC / MVVM 架构：
- Ext JS 推荐使用 MVC (Model-View-Controller) 或 MVVM (Model-View-ViewModel) 模式来组织代码，尤其是在大型应用中，你需要理解：
  - View：UI 组件定义（通常是 XType）。
  - Controller：处理业务逻辑、事件响应、数据加载。
  - Model/Store：数据层。
  - ViewModel (MVVM)：View 和 Model 之间的数据桥梁，实现数据绑定。
数据绑定：
- 学习使用 Ext.data.ViewModel 和 bind 配置，实现数据和 UI 的双向同步，减少手动操作 DOM 的代码。
图表：
- Ext JS 内置了强大的图表组件 (Ext.chart.*)，可以轻松创建各种类型的图表（柱状图、折线图、饼图等）。
主题与样式：

学习如何使用 Sencha Cmd 切换和自定义主题，让应用拥有不同的外观。
打包与部署：
- 学习使用 sencha app build 命令来压缩和合并你的代码，生成用于生产环境的最终文件。

进阶与生态

性能优化：学习如何优化大数据量 Grid 的性能，使用虚拟滚动等。
与后端交互：学习如何使用 Ext.Ajax 或 Store 的代理与后端 API (如 RESTful API) 进行数据交互。
插件开发：了解如何创建自定义组件和插件，扩展 Ext JS 的功能。

第二部分：推荐学习资源

官方文档 (最重要！)

Sencha Docs：这是你最权威、最全面的参考手册，遇到任何组件或 API 的问题，第一反应应该是查文档，文档中包含详细的 API 文档、示例代码和指南。

视频教程

Sencha Official YouTube Channel：官方会发布一些新版本的介绍教程和最佳实践视频。
YouTube 上的免费教程：搜索 "Ext JS Tutorial"，可以找到很多个人开发者分享的免费视频课程，质量参差不齐，但可以作为入门的补充。

书籍

《Learning Ext JS》：虽然版本可能稍旧，但书中的核心思想和架构讲解非常经典，适合系统学习。
《Ext JS in Action》：也是非常经典的书籍，案例丰富。

社区与问答

Sencha Forums：官方论坛，遇到问题时可以在这里提问，有官方人员和热心社区成员解答。
Stack Overflow：搜索 extjs 标签，你会发现很多已经解决的问题，提问时记得提供一个最小可复现的示例。

实战项目

Sencha Fiddle：这是一个在线的 Ext JS 代码编辑器和沙箱，你可以用它来快速测试代码片段、分享代码或学习别人的示例。强烈推荐！
- Sencha Fiddle

第三部分：学习建议与避坑指南

从官方示例开始：不要一开始就自己写复杂的东西，多去 Sencha Fiddle 和官方文档里看示例，模仿和修改是学习最快的方式。
不要畏惧配置：Ext JS 被诟病最多的就是“配置地狱”，但正是这些详细的配置，才赋予了它强大的能力和可预测性，你需要习惯这种声明式的编程风格。
先理解概念，再写代码：不要上来就敲代码，花时间理解 组件、容器、布局、Store 这些核心概念，你的学习会事半功倍。
善用 Sencha Cmd：从一开始就养成使用 Sencha Cmd 创建和管理项目的习惯，它能帮你处理很多繁琐的配置。
拥抱 Sencha Cmd 的生成器：使用 sencha generate controller, sencha generate view 等命令来生成代码，这能帮你保持 MVC/MVVM 结构的清晰。
注意版本差异：Ext JS 6 之后引入了 Modern Toolkit (支持移动端) 和 Classic Toolkit (传统桌面端)，新手建议先专注于 Classic Toolkit，因为它更传统，资料也更丰富，确保你查找的教程和文档与你使用的版本和 Toolkit 一致。