简介这份资源面向使用 ExtJS 构建富客户端 Web 应用的前端开发者提供 ext-7.0.0-gpl.zip 源码包并附带 Sencha CMD 各版本下载地址帮助解决框架获取与配套命令行工具版本匹配的问题。压缩包共约 2000 个文件整体约 229.87MB以 png、gif 等主题图片资源和 js、scss、css 等框架源码与样式文件为主另含 ttf、eot、woff 等字体文件及 json、xml、md 等配置与说明文档覆盖现代与经典两套主题的完整资源。ExtJS 7.0.0 提供表格、面板、表单等可定制组件支持响应式布局、双向数据绑定、MVC 架构与多种图表Sencha CMD 则负责生成项目结构、编译 SASS、压缩合并 JS 及构建打包。目前已有 307 人学习下载适合需要研究框架源码、搭建本地开发环境或按项目需求选择 CMD 版本的前端工程师参考使用。1. 拿到 ext-7.0.0-gpl.zip 和 Sencha Cmd 各版本先搞清楚这套组合到底能干什么如果你正在维护一套跑了七八年的企业后台前端还是 ExtJS 那套经典桌面风格那你大概率遇到过这个场景想升级到 7.x结果发现官方下载入口改来改去GPL 版和商业版混在一起Sencha Cmd 的版本又和框架版本对不上构建直接报错。ext-7.0.0-gpl.zip就是 ExtJS 7.0.0 的 GPL 授权完整包配合 Sencha Cmd 使用能做经典的 MVC/MVVM 应用开发、主题编译和生产构建。它适合两类人一是维护存量 ExtJS 项目的工程师二是想研究这套老牌企业级框架架构的人。GPL 版功能完整但授权条款要自己看清楚商用闭源场景需要走商业授权这点先心里有数。2. ExtJS 7.0.0 GPL 包的结构与 Sencha Cmd 版本匹配逻辑拿到压缩包别急着解压到项目里先搞清楚里面有什么、Cmd 该用哪个版本否则后面构建报错会浪费你半天时间。2.1 解压后先看目录哪些是框架核心哪些是工具链ext-7.0.0-gpl.zip解压后是一个标准的 ExtJS SDK 目录常见结构如下目录/文件作用是否必须保留ext-7.0.0/框架根目录是classic/经典桌面端组件与主题做桌面端必须modern/现代移动端组件与主题做移动端必须packages/官方扩展包如 charts、ux按需build/预构建的压缩版生产环境可用cmd/Sencha Cmd 相关配置模板是examples/示例代码可删docs/文档可删licenses/授权文件保留备查我一般会把整个 SDK 放到项目外的独立目录比如D:\sdk\ext-7.0.0然后在项目里通过sencha.cfg或app.json指向它。这样多个项目可以共用一份 SDK省磁盘也省得每个项目都复制一遍。提示examples/和docs/加起来能占几百 MB如果只是做项目开发删掉不影响构建但建议先备份。2.2 Sencha Cmd 版本怎么选不是越新越好Sencha Cmd 和 ExtJS 框架之间有明确的兼容矩阵。7.0.0 这个版本官方推荐搭配 Cmd 7.0.x 系列。用 Cmd 6.5 去构建 7.0.0 项目大概率会在主题编译阶段报Sass compilation failed用 Cmd 7.5 去构建又可能因为配置项变更导致app.json解析异常。常见做法是框架版本号的前两位决定 Cmd 的大版本。7.0.0 对应 Cmd 7.0.x7.1.0 对应 Cmd 7.1.x以此类推。如果你手头有多个不同版本的 ExtJS 项目建议把对应版本的 Cmd 分别安装到不同目录通过环境变量切换而不是全局只装一个。安装 Cmd 时Windows 下直接跑安装程序Linux/macOS 下解压后把sencha可执行文件加入PATH。验证安装sencha which这条命令会输出当前 Cmd 的安装路径和版本号。如果提示找不到命令检查PATH是否包含 Cmd 的bin目录。2.3 用 Cmd 生成第一个 7.0.0 项目骨架确认 Cmd 版本正确后用以下命令生成一个标准项目sencha -sdk /path/to/ext-7.0.0 generate app MyApp /path/to/MyApp参数说明-sdk指向解压后的 ExtJS 7.0.0 SDK 根目录不是压缩包本身。generate app生成应用骨架。MyApp应用名称会作为命名空间使用。最后一个参数项目输出目录必须为空或不存在。执行成功后目录里会出现app/、classic/、modern/、resources/、app.json、build.xml等。app.json是核心配置文件里面记录了框架路径、主题、构建配置。打开它确认framework: ext和toolkit: classic或modern是否符合你的目标平台。注意如果生成时报Failed to determine framework name多半是-sdk路径写错了或者 SDK 目录下缺少cmd/子目录。3. 构建、主题编译与生产打包的实操步骤项目骨架有了接下来是让它能跑起来、能打包。ExtJS 的构建体系基于 Sencha Cmd 和 Ant理解几个关键命令就能覆盖大部分场景。3.1 开发模式启动与实时预览在项目根目录执行sencha app watch这个命令会启动一个内置的 Web 服务器默认端口 1841并监听文件变化自动重新构建。浏览器打开http://localhost:1841就能看到应用。app watch适合开发阶段但它不会做代码压缩和混淆加载的是未压缩的源码方便调试。如果端口被占用可以在app.json里改development: { server: { port: 8080 } }或者用sencha app watch --port 8080临时指定。3.2 生产构建sencha app build的参数与输出生产构建用sencha app build production构建完成后输出在build/production/MyApp/目录下。这个目录里的文件是经过压缩、合并、混淆的可以直接部署到 Web 服务器。关键参数production构建环境对应app.json里的builds: { production: { ... } }配置。--destination自定义输出目录比如sencha app build production --destination /var/www/html。--clean构建前清理旧输出避免残留文件干扰。构建过程中如果报Sass compilation failed先检查app.json里sass: { namespace: MyApp }是否和项目命名空间一致。不一致会导致主题变量找不到。3.3 主题编译从 SCSS 到 CSS 的链路ExtJS 7.x 的主题基于 SCSS编译由 Cmd 调用 Ruby Sass 或 Dart Sass 完成。自定义主题的常见做法是在packages/local/下创建主题包或直接修改classic/theme-xxx/sass/下的变量文件。在app.json的theme字段指定主题名称。执行sencha app build或sencha app watch触发编译。一个典型的主题变量覆盖示例// 文件classic/sass/var/Component.scss $base-color: #2c3e50; $font-family: Microsoft YaHei, sans-serif;改完后重新构建生成的 CSS 会包含新的颜色和字体。如果改了没生效检查app.json里sass: { save: sass/var }是否指向了正确的变量目录。提示Cmd 7.0.x 默认使用 Ruby Sass如果本机没装 Ruby 或版本不对会报sass: command not found。可以改用 Dart Sass在sencha.cfg里设置sass.compilerdart-sass。4. 避坑与排查版本、路径、授权三个高频翻车点这套工具链的坑主要集中在版本匹配、路径配置和授权理解上下面几条是我和同行踩过的血泪经验。4.1 现象sencha app build报Framework not found原因app.json里的framework: ext对应的路径没有正确指向 SDK或者 SDK 目录被移动过。解决检查app.json同级目录下是否有.sencha/文件夹里面的sencha.cfg记录了framework.path。如果路径失效删掉.sencha/重新执行sencha app upgrade /path/to/ext-7.0.0让它重新生成。4.2 现象主题编译后样式错乱部分组件没样式原因SCSS 变量覆盖顺序不对或者自定义主题包没有正确继承基础主题。解决确保自定义主题的sass/var/下变量文件在sass/src/之前被引入。常见做法是在主题包的sass/var/Component.scss里只放变量在sass/src/Component.scss里放具体样式规则。另外检查app.json的theme字段是否指向了正确的主题包名。4.3 现象Cmd 版本切换后旧项目构建失败原因不同 Cmd 版本对app.json的 schema 要求不同新版本可能不兼容旧配置。解决每个项目锁定一个 Cmd 版本在项目根目录放一个.sencha-version文件记录版本号团队协作时统一。切换 Cmd 后如果报配置错误先跑sencha app upgrade让 Cmd 自动迁移配置再手动检查app.json里被改动的字段。4.4 现象GPL 版用于商业项目收到授权提醒原因GPL 授权要求衍生作品也开源闭源商用不符合条款。解决商用闭源场景必须购买商业授权。GPL 版适合开源项目、内部学习、非商业用途。如果只是内部工具且不对外分发也要仔细阅读 GPL 条款中关于“分发”的定义必要时咨询法务。4.5 现象sencha app watch启动后浏览器白屏控制台报 404原因app.json里indexHtmlPath指向的 HTML 文件路径不对或者output目录配置和实际服务器根目录不一致。解决检查app.json的indexHtmlPath: index.html是否与实际文件位置匹配。如果用了自定义output目录确保app watch的服务器根目录指向正确。临时办法是删掉build/和.sencha/重新生成。5. 多版本共存与离线部署的进阶技巧实际工作中经常要同时维护 6.x 和 7.x 两个项目或者在内网环境离线部署。下面两个技巧能省不少事。5.1 用环境变量切换 Cmd 版本假设你装了 Cmd 6.5 和 Cmd 7.0 两个版本分别放在D:\tools\cmd65和D:\tools\cmd70。可以写两个批处理脚本:: cmd65.bat echo off set PATHD:\tools\cmd65;%PATH% echo Sencha Cmd 6.5 activated:: cmd70.bat echo off set PATHD:\tools\cmd70;%PATH% echo Sencha Cmd 7.0 activated需要构建哪个项目就先跑对应的脚本再执行sencha app build。Linux/macOS 下用alias或export PATH同理。这样比反复卸载重装干净得多。5.2 离线环境部署把 SDK 和 Cmd 一起打包内网机器没法访问外网时需要提前准备好ext-7.0.0-gpl.zip解压后的完整 SDK。Sencha Cmd 安装包Windows 是.exeLinux 是.run或.zip。Ruby 或 Dart Sass 的离线安装包如果主题编译需要。项目依赖的第三方包如果有。部署步骤在内网机器上安装 Cmd配置PATH。解压 SDK 到固定目录比如/opt/ext-7.0.0。把项目代码复制过去修改app.json里的framework.path指向/opt/ext-7.0.0。执行sencha app build production如果报缺少 Sass 编译器安装离线包后重试。注意离线环境下sencha app upgrade可能因为无法访问远程仓库而失败建议在联网环境先升级好配置再整体拷贝到内网。5.3 验证构建产物是否可用的三个检查点构建完成后别急着部署先做三个检查打开build/production/MyApp/index.html看控制台有无报错。检查build/production/MyApp/resources/下是否有编译后的 CSS 和图片。用sencha app build testing生成测试版对比生产版和测试版的差异确认压缩没有破坏功能。从那以后我每次拿到新的 ExtJS 版本包都先跑一遍sencha which确认 Cmd 版本再解压 SDK 到独立目录最后才生成项目。这套流程走顺了后面基本不会在环境上翻车。希望帮到你。本文还有配套的精品资源点击获取