Ext JS 前端框架入门：环境搭建、项目生成与三大组件实战

简介：《Sencha Ext JS 7.8+入门指南》是一份面向具备JavaScript基础、希望构建企业级复杂前端应用的开发者的PDF资料，聚焦安装、模板与组件创建全流程，帮助读者从零掌握Ext JS框架的核心用法。文档从框架特点与优势切入，系统讲解许可证获取、Sencha Command安装、npm环境管理、IDE选择与项目结构配置，并配有数据网格视图、柱状图、表单捕获等可直接上手的实例，覆盖企业级应用开发中最常用的可视化与交互场景。资源共1个文件，类型为PDF，约2.65MB，目录结构清晰，内容预览显示从Introduction到Project Creation、Basic Project逐章递进，既适合边看边练，也适合作为团队内部入门培训与日常查阅的参考资料。文档还推荐官方文档、视频教程和社区支持等延伸学习渠道，帮助读者进一步扩展技能。目前已有193人学习下载，对希望快速搭建Ext JS项目、理解MVC架构与数据可视化实践的开发者具有较高参考价值。

1. 先搞懂一个概念：Ext JS 到底是干嘛的

很多前端新手第一次听说 Ext JS 时都会愣一下：我都在学 React 了，为什么还要认识这个老框架？这里有个很直观的类比：React 像给你一套毛坯房，砖头、水泥、图纸都备好，怎么砌墙、怎么走水电全看你自己；Ext JS 更像拎包入住的精装房，客厅厨房都装好了，你只需要往柜子里摆自己的东西。

具体说，Ext JS 是一个 JavaScript 前端框架，最大的招牌是自带 140 多个开箱即用的 UI 组件，比如复杂数据表格、图表、表单、树形菜单、日历。这些恰好是企业后台管理系统、数据报表平台里反复出现的界面，所以它一直被当作做企业级应用的成熟方案。

这篇指南给完全没碰过 Ext JS、只有一点 JavaScript 基础的你准备，不讲源码级原理，只讲怎么装环境、怎么创建第一个项目、怎么把表格、图表、表单三个最常用组件跑起来。

2. 为什么偏偏是它：三个让你愿意学的理由

在决定投入时间学一个框架之前，你最该问的不是“它功能多不多”，而是“它和主流框架到底差在哪、我学了之后用在哪儿”。这一章我们不劝你放弃 React，只把 Ext JS 的真实定位讲清楚。

2.1 它和 React、Vue 的差别：毛坯房和精装房

React 和 Vue 走的是“核心 + 社区生态”路线。组件库、路由、状态管理基本都是外部库，做技术选型时要自己拼：表格要配一版，图表要配一版，还得保证它们风格统一、交互一致。

Ext JS 反着来，它是一个“啥都给你装好”的完整框架，数据和界面绑定、布局管理、主题皮肤、构建工具都内置。它那一百多个组件是同源配套的，组件之间不会出现“这个表格和那个下拉框长得不像一家人”的尴尬。

这不是说谁更好，而是思路不同。如果你的场景是内部后台、管理系统、报表平台这种“要对接大量数据、表格密密麻麻、交互逻辑严谨”的应用，精装房能省掉很多配来配去的精力。我见过很多新人把第一个项目做成耀眼的动画网站，最后发现方向跑偏——企业应用最刚需的是控件好用、数据不出错、界面能维护，这三点才是 Ext JS 的主场。

2.2 140 个现成组件是最实在的省力点

我刚学的时候最惊讶的一点是：在别的前端框架里要花大工夫做的复杂表格、分组表头、列排序、单元格内编辑，在 Ext JS 是一个现成组件，几句配置就能出一个能用的版本。

数据可视化也一样。柱状图、折线图、饼图、热力图这类组件内置好，数据传进去就渲染。你不用去对比五六个图表库，也不用担心“这个库偏偏不支持我要的那种堆叠柱状图”。

文档里给了一个数字：超过 140 个组件。别小看这个数字，它意味着你在企业系统里能想到的交互，大部分都有一个现成的类，你要做的是配置和组合，而不是从零造轮子。对新手来说，这意味着“翻车”的概率低不少——你踩过的坑，早有人替你填平了一部分。

2.3 Classic 和 Modern：两个 Toolkit 该选谁

很多新手第一次打开文档会被 Toolkits 这个词绕晕。简单理解：Ext JS 同一套内核，给了两种“皮肤和渲染策略”：

• Classic Toolkit：主要用 JavaScript 渲染界面，更适合桌面浏览器上的复杂管理端。
• Modern Toolkit：主要用 CSS 渲染，针对手机、平板做了优化，移动端体验更顺滑。

注意，这两个不是“手机只能用 Modern、电脑只能用 Classic”。文档特别强调：两者其实都能跑在任何平台上，只是侧重点不同。第一次学的话，建议先抓住一个练熟，比如 Classic，因为桌面端后台管理系统的例子最多、资料也最全。

2.4 什么样的人最该学它

如果你属于下面三类之一，Ext JS 很可能是你的答案：

• 做企业内部系统的开发者，天天面对表单、列表、报表，需要快速稳定交付。
• 团队要维护一个数据量很大、逻辑很深的旧系统，想要一个成熟框架兜底。
• 前端新手想理解“MVC 模式在企业应用里怎么落地”，它可以提供一个完整的可参考样本。

反过来，如果你做的是偏营销、偏创意的对外网站，追求轻量、灵活、各种新潮特效，那 React、Vue 那套生态更顺手。工具不分好坏，只分适不适合。企业应用最看重的是一致性和成熟度，而 Ext JS 恰好在这些地方积累深厚。

2.5 企业应用最看重的三样东西它都有

企业应用和普通网站有个很大不同：界面一致性很重要，数据准确性更重要。如果每个模块由不同开发者搭不同的表格组件，几个月后维护成本会直线上升。Ext JS 把所有组件统一在同一套设计语言和交互规范下，开发体验上的“一致性”是大团队特别看重的。

另外它的成熟度也是硬通货。文档里提到，它非常适合金融、医疗这类对性能和扩展性要求高的行业——这些领域不会因为你“技术新潮”就买单，反而更看重框架十年如一日地稳定。

再补充一个例子：企业系统里经常有“用户改完表单，刷新一下又要重填”的问题。Ext JS 内置的状态管理可以把界面状态维持住，包括滚动位置、列宽、筛选条件都能记住。这个功能在传统行业里非常实用，但也容易被新手忽略。

3. 动手前准备：授权、Sencha Command 和 npm

这章是第一个动手环节。跟着做的时候别跳步骤，我第一次就是跳过了“先拿到授权再装工具”，结果后面创建项目时反复报错，浪费了一个下午。真实路径其实很清晰，分三步走。

3.1 第一步：拿到试用的许可证

和 React、Vue 不一样，Ext JS 是一个商业授权框架，动手前要先获得一个大版本的有效授权才谈得上后面的事。好在官方提供试用版，流程不复杂。

打开官网的下载页，填一下邮箱之类的信息，就能进入工具下载区。试用版对应的版本是 7.8.0，下载区里能看到好几个工具，除了我们要用的 Sencha Command，还有 Sencha Architect、Sencha Themer、Rapid Ext JS 这些。

第一次接触的人可能不知道选哪个，不用纠结——入门阶段只要 Sencha Command 就够。它负责生成项目、构建代码、跑测试，是后面所有命令的基础。注意试用版和商用版在创建项目时会有细微差别，试用版生成的项目通常带试用标识，商用版买完后需要先激活软件再下载安装，流程会更正式一些。

提示：如果你的公司后续要走商用授权，流程基本一样，只是多了软件激活这一步，后面我们会提到两者的差别。

3.2 第二步：安装 Sencha Command

Sencha Command 是命令行工具，类似 npm 之于 Node 生态。下载下来是个安装包，解压后一路下一步就行。这一步有两个容易被吓到的小状况，先给你打预防针：

• Windows 可能出现 Windows 安全中心弹出的警告信息，安心选“仍要运行”继续，这只是厂商签名环境的正常提示。
• 安装到组件选择那一步，有一个叫 Compass 的旧组件，那是老版本才需要的，7.8.0 用不上，不用勾选。

装完验证一下。打开 PowerShell（Windows 上可以直接在文件夹里按住 Shift 右键，选“Open PowerShell Window Here”），输入：

sencha --version

能正常打印出版本号，说明命令行工具已经就位。这一步输出哪怕带点乱码都不影响，重点是命令认识sencha这个词。

安装完成之后有一个很重要的细节：如果你正在用 VS Code 或者其他终端工具，最好全部关掉重开，因为新安装的命令行工具要重启终端才能被识别。

3.3 第三步：用 npm 管理环境（可选但推荐）

如果你已经安装了 Node.js，官方也支持用 npm 来管理 Ext JS 环境。比起手动下载解压，npm 能帮你管版本、方便后续升级。

入门阶段建议先把这条道走通：先按照“下载安装 Sencha Command”的常规方式把工具装好，等以后熟悉了，再对照官方文档里 ZIP 和 NPM 两种入门方式做调整。第一次学不用贪多，装好一个方式就够了。

另外说一下 IDE。文档里专门提到 Rapid Ext JS 这个编辑器扩展，它能在写视图的时候提供属性检查器，属于锦上添花的工具。零基础入门用 VS Code 配这个扩展就够了，不额外折腾 IDE。

3.4 生成第一个项目前的最后确认

收尾前再检查三件事，缺了任何一个后面都会翻车：

• 授权已拿到，且下载的是 7.8.0 对应的安装包。
• Sencha Command 能执行，sencha --version有输出。
• 想清楚项目放哪：如果只是用 Sencha 自带测试服务器，文件夹位置随意；如果将来要放到公司正式服务器，先确认部署规范再选目录。

3.5 安装后命令不生效怎么办

现象：刚装完 Sencha Command，打开新的 PowerShell 输入sencha --version，提示“不是内部或外部命令”。

原因：安装程序没有把可执行文件所在目录加入系统 PATH，或者当前终端窗口还是旧的。

解决：先确认安装目录里确实有sencha.exe；然后在系统环境变量里把该目录追加进 PATH，之后重新打开终端再试。这一步属于老手也经常遇到的环境问题，解决一次后面就顺畅了。

4. 跑通第一个项目：从生成命令到三个组件

工具装好了，接下来就是最激动人心的一步：把一个空文件夹变成一个能跑起来的前端项目。这章先把命令敲通，再读懂目录，最后用文档里的三个组件例子（数据网格、柱状图、捕获表单）感受一下 Ext JS 的“配置式”开发。

4.1 生成项目：sencha generate app 逐个参数拆解

先在你想放项目的目录下打开 PowerShell。假设我准备在 D 盘建一个 SenchaProject 文件夹，然后：

cd D:\SenchaProject sencha generate app classic -ext MyApp ./

这条命令的每个参数都值得认识：

• classic：指定使用 Classic Toolkit。如果目标是手机平板优先的移动端界面，换成modern。
• -ext：让命令使用已安装的 Ext JS SDK，而不是从网络临时拉取别的版本。
• MyApp：应用名，要符合变量命名规则，不能叫my-app这种带横杠的写法。
• ./：生成到当前目录。

执行完，你会看到控制台像跑马拉松一样打出大量日志，最后没有大红报错就说明生成成功。另一个值得说的小细节：项目名最好用大驼峰，比如MyApp，这样生成的类名、命名空间都会很规范，后面少踩很多“对不上号”的坑。

4.2 构建并预览：让项目真正跑起来

生成只是把骨架搭好，想看到页面必须构建一次。三个环境对应三种构建方式：

sencha app build development

development 模式构建最快，适合边改边看；testing 偏测试；production 则是压缩优化后的生产版本。第一次先把 development 跑通，之后每次写代码保存到 src 目录，测试服务器的热更新机制会替你处理大部分刷新。

构建完成后，启动内置测试服务器：

sencha app watch

浏览器打开它提示的地址（通常是以 localhost 开头的某个端口），你就能看到 Ext JS 默认模板页面了：左边一个导航菜单，右边一个欢迎区。

4.3 看懂项目目录：至少要知道四个关键位置

第一次打开生成的项目，文件夹很多很吓人。新手最需要先认识这几个：

入门阶段，90% 的时间只在app/下活动。其他目录先不用钻，认识个脸熟就行。

4.4 第一个组件：数据网格，两分钟出页面

在 Ext JS 里写界面不是手写 HTML，而是“声明式”地描述：我告诉框架“这里有一个表格，列有三列，数据从这个数据源来”，它负责把界面画出来。这种思路最直观的体现就是Ext.define和Ext.create。

先定义一个 Store，它负责管数据：

// app/store/ExampleStore.js Ext.define('MyApp.store.ExampleStore', { extend: 'Ext.data.Store', alias: 'store.example', fields: ['name', 'city'], data: [ { name: '张三', city: '上海' }, { name: '李四', city: '北京' } ] });

代码说明：Ext.define定义一个类，第一个参数是类的完整名字（带命名空间），这里叫MyApp.store.ExampleStore，对应的文件路径必须是app/store/ExampleStore.js。alias: 'store.example'相当于给这个类一个短别名，后面在网格里只要写type: 'example'就能引用它。

接着定义网格视图：

// app/view/ExampleGrid.js Ext.define('MyApp.view.ExampleGrid', { extend: 'Ext.grid.Panel', title: '示例数据网格', store: { type: 'example' }, columns: [ { text: '姓名', dataIndex: 'name' }, { text: '城市', dataIndex: 'city' } ] });

参数说明：extend: 'Ext.grid.Panel'表示这个类继承自网格面板；store通过type引用刚才定义的 Store；columns数组声明列，text是显示的表头文字，dataIndex对应数据源里的字段名。

把这两个文件放进app/store和app/view目录，再在模板页面的主视图里加一个菜单项指向 ExampleGrid，保存后刷新，你就能看到一个能排序、能翻页的完整表格了。这个“视图 + Store + 控制器”的组合，正是 MVC 模式在 Ext JS 里的落地形态。

4.5 第二个组件：柱状图，配置比想象中少

图表同样不复杂。启用图表功能后，创建 ExampleChart 类，核心配置是：

// app/view/ExampleChart.js Ext.define('MyApp.view.ExampleChart', { extend: 'Ext.chart.CartesianChart', store: { type: 'chartstore' }, axes: { bottom: { title: '月份' }, left: { title: '销量' } }, series: { type: 'bar', xField: 'month', yField: 'sales' } });

参数说明：series定义图表类型是柱状图，xField和yField指定哪一列做横轴、哪一列做纵轴；axes是坐标轴配置，bottom是横轴，left是纵轴。

这套写法熟悉以后，你想改成折线图，只需要把type: 'bar'换成type: 'line'，数据集自动适配，不太需要改其他配置。数据可视化在企业报表里就是这么高频，一个配置项的切换就能换来一种新图形。

4.6 第三个组件：捕获表单，把用户输入变成数据

表单是企业应用里永远的主角。文档里的捕获表单例子，思路也是声明式：视图类里定义字段，控制器里监听提交事件。

基本结构如下：

// app/view/ExampleForm.js Ext.define('MyApp.view.ExampleForm', { extend: 'Ext.form.Panel', items: [ { xtype: 'textfield', name: 'username', fieldLabel: '用户名' }, { xtype: 'textfield', name: 'email', fieldLabel: '邮箱' } ], buttons: [{ text: '提交', handler: function () { // var values = this.up('form').getValues(); // 拿到 values 之后，就可以交给控制器去处理 } }] });

这里的xtype是 Ext JS 的一个核心概念，相当于给组件起了一个“快捷别名”。写textfield就自动展开成文本框组件。记住xtype这个关键词，后面几乎天天见。fieldLabel是输入框前面的文字标签，name是提交时对应的数据字段名。

三个组件走完，你已经摸到了 Ext JS 的开发套路：定义类、配置属性、放进面板或容器。剩下的就是对着官方示例一点点扩充。

5. 避坑清单：新手最容易踩的 5 个坑

这一章把入门路上常见的翻车现场提前讲给你听。我自己第一次做的时候，五个坑踩了四个，每次都是查半天才明白原因。为了让你少走弯路，每条都按“现象—原因—解决”来写。

5.1 页面出来了，但组件一个都不显示

现象：sencha app watch能跑，浏览器也打开了，但页面只有空壳，没有表格也没有菜单。

原因：最常见是没构建就刷新。Ext JS 的代码需要经过 Sencha Command 编译，在 watch 模式下，你可能把新文件加到了app/view，却忘了看一眼终端输出有没有“新文件已载入”的提示。

解决：重新执行sencha app build development，确认无报错后再刷新浏览器。养成习惯：改了app/下的代码之后，先看终端有没有异常日志，再回页面验证。

5.2 控制台报错：sencha 不是内部或外部命令

现象：新开一个 PowerShell 窗口，输入sencha --version，直接被系统拒绝。

原因：安装目录没有写进 PATH 环境变量，或者旧终端没有重新加载环境。

解决：检查 Sencha Command 安装目录，确认sencha.exe在哪个文件夹；右键“此电脑”→属性→高级系统设置→环境变量，把该目录追加到 PATH；重新打开终端再试。这一步属于老手也会遇到的经典问题，不丢人。

5.3 类名和文件名对不上，控制台报 Loader failed

现象：新建了一个视图文件，控制台提示类似[ERR] Failed loading，应用直接崩。

原因：Ext JS 按类名找文件。我的类叫MyApp.view.ExampleGrid，那路径必须是app/view/ExampleGrid.js。文件名、包路径、类名三者必须严格一致，差一个字母都不行。

解决：先核对Ext.define('MyApp.view.ExampleGrid', ...)里的名字和文件路径，把路径调整成一致的，再重新构建。这算是新手最容易忽略的“强制约定”，建议一开始就养成“先定类名，再建文件”的顺序。

5.4 网格和图表有配置，但显示“No data to display”

现象：表格区域显示“无数据”，图表也是空荡荡。

原因：Store 没接上，或者数据源里字段名和dataIndex对不上。比如数据里是firstName，你在列配置里写name，框架找不到值，自然就是空的。

解决：先把 Store 的数据在控制台打出来，确认字段名；再检查列和坐标轴的dataIndex/xField/yField是否与数据字段一致。最容易的办法：让 Store 先返回一个最小测试数组，字段名焊死，成功后再换成真实数据。

5.5 把 Classic 和 Modern 的代码混在一个项目里

现象：用 Classic 建的项目，从网上抄了一段 Modern 的视图代码粘进来，运行报错或界面错乱。

原因：两个 Toolkit 虽然同为 Ext JS，但部分类名和组件渲染方式有差异，直接混用会触发兼容问题。

解决：项目创建时定好一个，文档也提醒初学者主要围绕 Classic、以桌面端后台为场景。要抄例子时先确认来源是基于哪个 Toolkit，不确定就先在官方文档里搜类名确认。

6. 下一步怎么学：从改一个例子到搭自己的页面

最后一个小建议，给接下来的学习路径指个方向。

6.1 建议的学习顺序

学完这份指南，你可以按这个顺序进阶：

6.2 第一个小目标

给自己定一个小目标：把默认模板页改成“一个展示员工名单的表格”，数据先写死在 Store 里，列可以自己增删。这个目标看着小，但它能把你读过的所有概念串起来。

从第一次装工具到跑通第一个网格，我整整花了一个周末，其中有一半时间在处理环境变量和构建日志。后来我养成了一个习惯：每次新建项目，都强制自己先把sencha app build development走一遍，确认终端零报错才写业务代码，这个习惯帮我少踩了很多隐性坑。

希望帮到你，也希望你能在第一个网格跑起来的那一刻，体会到这种框架带来的踏实感——那感觉真的很值得。

本文还有配套的精品资源，点击获取