企业官网建设流程全解析

简介：《Sencha Ext JS 7.8+入门指南》面向具备JavaScript基础、希望构建复杂企业级前端应用的前端开发者，围绕Ext JS 7.8+的安装、项目创建、基础配置以及视图与组件使用展开，兼顾MVC架构理解与数据可视化组件实践。压缩包共1个PDF文件，约2.65MB，便于集中阅读和按章节查阅。文档从试用/商业许可证、Sencha Command安装、npm环境管理、IDE选择与项目结构讲起，并给出可用模板及构建流程，帮助读者厘清从环境搭建到项目落地的关键环节。价值在于通过数据网格、柱状图、表单捕获等示例，把组件创建、导航编辑和核心配置落到可参照的代码步骤中，同时提示官方文档、视频教程与社区支持等延伸学习路径。已有196人学习，适合需要快速上手并系统理解Ext JS企业级开发方式的读者对照实践。

1. 先说清楚：Sencha Ext JS 到底是个什么东西

第一次听到 Sencha Ext JS 7.8 这个名字，十有八九的反应是：又是一个前端框架？我已经被各种框架绕晕了。先别急着关页面，换个说法你就明白了。大多数前端框架给你的是「一箱零件」——路由、状态、请求封装，剩下全靠你自己拼；而 Ext JS 给你的是一整套已经装好的家具：一百四十多个开箱即用的界面组件，数据网格、图表、表单、树形菜单，连数据层和主题都配齐了。它是一门用 JavaScript 写企业级后台系统的框架，特别适合那种「表格要能排序筛选分页、图表要能联动、表单有几十个字段」的复杂管理界面。如果你要做的正是这类东西，那来对地方了；如果你只想做个官网首页，它确实有点重。下面就从零开始，把装、跑、做出来这三件事一次走完。

2. 为什么值得学：一百四十个组件和「整套家具」的差别

2.1 一个类比：别人卖零件，它卖整套家具

理解 Ext JS 最快的方式，是把它和常见的前端框架放在一起比。常见框架的定位是「核心 + 生态」：核心给你组件化、响应式这些地基，剩下的表格用哪个库、图表用哪个库、表单校验用哪个库、主题怎么做，全是你自己选。每个选择背后都是一次技术选型，你要评估文档质量、维护活跃度、版本兼容性，等项目做大了再想换，代价高得让人想哭。

Ext JS 走的是另一条路：组件、数据层、布局系统、主题、构建工具，全在一个包里，接口风格统一。好处很直接——新手不用做选型决策，装上就能写界面，不用先花两周研究「到底该用哪个表格库」。坏处也要说清楚：你学的是它自己的一套写法，不是通用生态里的公共知识，离开这个框架，部分经验不能直接搬走。所以值不值得学，取决于你要做什么。

判断标准其实很简单：如果你的目标是用最短路径做出一个数据密集、表格表单为主、需要在企业内网长期跑的后台系统，那这套「一体化」是省事的；如果你做的是面向公众的营销页面、需要极致的首屏加载速度，那它的体量反而会成为负担。先想清楚这一层，再决定要不要往下学，比闷头装环境更划算。

2.2 那一百四十多个组件，具体指的是什么

数字听着抽象，落到具体东西上就清楚了。数据网格是它的招牌：一列列数据摆出来，排序、筛选、分组、锁定列、行内编辑、分页，全是配置项，不用自己从头写。图表覆盖柱状、折线、饼图等常见形态，还能和网格共用同一份数据源做联动。表单这块有各种字段类型、校验规则、布局容器。此外还有树形结构、选项卡面板、弹出窗口、数据视图。

这些组件真正值钱的地方不在数量，而在于它们彼此对齐。同样的配置项命名习惯，同样的事件模型，同样的布局容器写法——你学会一个数据网格，再用树形结构，很多配置闭着眼睛也能猜个八九不离十。这种一致性对零基础的人特别友好，因为你只需要建立一套心智模型，而不是为每个第三方库重学一遍它的脾气。

换个角度说，Ext JS 的「企业级」标签不是营销词。表格特别多、字段特别杂、权限和状态层层嵌套，这些正是普通项目里最枯燥、最容易翻车的部分。框架把这些能力做成配置项，你写的是「我要什么」，而不是「怎么一步步实现」。这就是它和轻量框架最本质的分工差异。

2.3 两个工具箱：Classic 与 Modern，新手该选哪个

Ext JS 里有个概念必须先搞懂，叫 toolkit，中文一般叫工具箱。它有两个：Classic 和 Modern。两者共享同一套核心，也就是数据层、类系统、事件机制这些地基是一样的，差别在视图的渲染方式和优化方向。

Classic 主要用 JavaScript 来渲染界面，优化目标是桌面浏览器上的复杂应用，控件密度高、交互重。Modern 主要用 CSS 渲染，优化目标是平板和手机这类触屏设备，动画和手势更顺。这里有个新手最容易误解的点：这两个工具箱并不是互斥的，Classic 不是只能跑在电脑上，Modern 也不是只能跑在手机上，任何平台都能用，选哪个取决于你的应用形态。

那入门该选哪个？建议先从 Classic 开始。原因很实际：桌面端的调试直观，浏览器开发者工具里看得清清楚楚；界面元素密度高，同样的屏幕能塞下更多信息，学组件的时候一眼就能看出配置改了什么效果；而且大量既有的示例和讲解都是围绕桌面场景展开的，你照着做不容易卡住。等你把组件写法、数据绑定、MVC 结构摸熟了，再切到 Modern，会发现大部分差异只是类名和少量配置，逻辑是通的。

3. 第一步怎么迈：装好命令行工具，一条命令生成项目

3.1 先解决许可证：试用版足够跑通入门

Ext JS 不是下载个压缩包就能随便用的东西，它需要一份有效的许可证。分两种：试用版和商业版。入门阶段用试用版完全够，因为它能让你拿到命令行工具，还能顺带接触到几个配套工具：可视化低代码编辑器、主题定制工具、编辑器插件、以及把组件嵌进其他技术栈的桥接方案。

拿到试用版的路径不复杂：到官方站点找到试用下载入口，填一下基本信息，就能进入下载区。下载区里工具不止一个，你第一步只需要其中那个命令行工具，其他几个等你有需要了再回来拿。这里不用纠结「试用期到了怎么办」，入门阶段的目标是把项目跑起来、把组件写出来，等你确认这套东西适合你的项目，再谈授权的事。

提示：注册信息按真实情况填就行，这一步只是发下载权限，不影响你后面练习。

3.2 安装命令行工具：五步走完

拿到安装包之后，按顺序做这几件事。

1. 把下载到的压缩包解压到一个你能记住的目录。
2. 运行里面的安装程序，跟着向导点下一步。
3. 如果系统弹出安全提醒，选择仍然运行，这是未签名安装包的常规提示。
4. 到「选择组件」那一屏时，看到有个叫 Compass 的扩展，不用勾。它是很早的版本里用来处理样式的东西，7.8 已经不需要了，勾上反而多一堆没用的依赖。
5. 装完后关掉所有已经打开的命令行窗口，重新开一个新的。

为什么强调重开窗口？因为安装程序改的是系统环境变量，已经开着的终端读的是旧值，你在旧窗口里敲命令会直接提示找不到命令，然后你会以为是装失败了，白白折腾半小时。这就是典型的「玄学问题」，其实一点不玄。

验证方式很简单：新开一个终端，输入sencha然后回车。如果屏幕上刷出一堆用法说明，说明装好了；如果提示「不是内部或外部命令」这类信息，说明环境变量没生效，重启一次系统基本就解决了。

注意：安装路径里尽量不要有空格和中文，某些构建环节对路径很敏感，出事的时候排查起来非常费劲。

3.3 一条命令生成项目：参数逐个拆开讲

真正的第一步是生成项目骨架。先在你喜欢的位置建一个空文件夹，然后在终端里进到这个文件夹，执行下面这一条命令。

# 生成一个名为 MyApp 的 Classic 工具箱项目，输出到当前目录 sencha generate app classic -ext MyApp ./

这条命令短，但四个部分各管一件事，拆开看就明白了。

generate app是动作，告诉工具「我要创建一个应用」，后面所有参数都是它的修饰。第一个位置参数classic是工具箱选择，写modern就会生成面向触屏优化的骨架，两者的目录结构和类名会有差别。-ext MyApp指定应用名，这个名字要遵守变量命名规则：字母开头，不能有空格、不能有中文、不能数字打头，因为它会变成代码里的命名空间前缀。最后的./是输出位置，点加斜杠表示当前目录。

想换个位置生成也简单，把最后的路径改掉就行：

# 在指定目录下生成，路径按你自己的实际情况改 sencha generate app classic -ext MyApp ./projects/MyApp

命令跑起来会刷一屏日志，等它停下来，目录里就会多出一整套文件。第一次看到这么多文件夹可能会头皮发麻，别急，下一章就带你把它们一个个对上号。

3.4 构建与启动：development 环境到底在做什么

项目生成完，还不能直接双击 html 文件打开，得先构建一次。构建命令长这样：

# 构建 development 环境，产物用于日常开发调试 sencha app build development

app build是构建动作，后面的development是环境名，一共三个可选值，用途完全不同。development面向日常开发，产物不做压缩，代码可读，报错信息能直接定位到源码行号，调试全靠它。testing面向测试阶段，做一些中间程度的处理。production面向部署上线，会压缩合并、去掉调试代码，体积最小但基本没法读。

新手阶段就把development记住，其他两个等你真要上线了再说。构建过程第一次会比较慢，因为要处理依赖关系、生成引导文件、拷贝资源。构建完成后，项目目录里会多出构建产物目录，用任意本地静态服务器指向它，浏览器里就能看到默认首页了。如果页面打开是白屏，先别怀疑代码，八成是直接双击了文件、或者服务器指错了目录，这是最常见的两个原因。

4. 看懂骨架再动手：目录结构、MVC 与第一个数据网格

4.1 生成出来的目录，每个文件夹管什么

把项目跑通之后，最该做的事不是马上写代码，而是花十分钟把目录看一遍。搞不清哪个文件管什么，后面改任何东西都是盲猜。

有个坑要提前说：build/目录里的东西千万别直接改。它是构建生成的，你改完跑一次构建就全被冲掉，白忙一场。要改样式去resources/或主题目录，要改代码去app/，这条规矩记住能省下不少后悔药。

4.2 MVC 在 Ext JS 里到底怎么对应

MVC 这三个字母到处都在提，落到 Ext JS 里其实很具体。Model 是数据的形状：这条记录有哪些字段、字段什么类型、要不要校验。View 是用户看到的东西：一块面板、一个表格、一张表单。Controller 是中间那层：用户点了什么、该查什么数据、该更新哪个视图。

除此之外还有一层 Store，名字不在 MVC 缩写里，但实际天天要用。你可以把它理解成「装着多条 Model 的容器」，界面不直接读 Model，而是读 Store，Store 负责去拿数据、缓存数据、并在数据变化时通知界面刷新。所以真实的链路是：Controller 触发 → Store 取数据 → View 渲染。理解这条链路，你后面看到任何示例代码都能快速定位它在干嘛。

对新手来说，一开始不必强求「严格按 MVC 分层」。先把东西做出来，再回头看哪一层该放什么，反而更清楚。Abdul 那种一上来就要把每行代码归位的做法，容易让人卡在结构上动不了手。

4.3 Ext.define 与 Ext.create：定义和实例化

这两个方法会贯穿你写 Ext JS 的每一天，第一天就搞懂，能少走很多弯路。

// Ext.define 相当于画图纸：只是登记了一个类，并没有真的创建对象 Ext.define('MyApp.view.HelloPanel', { extend: 'Ext.panel.Panel', // 继承自面板，白拿一堆现成能力 xtype: 'hellopanel', // 起个别名，以后可以像标签一样用它 title: '你好', html: '这是我第一个 Ext JS 组件' }); // Ext.create 才是照着图纸造一个真家伙出来，并挂到页面上 Ext.create('MyApp.view.HelloPanel', { renderTo: Ext.getBody() // 挂到页面 body 上，不写这句你看不到任何东西 });

Ext.define的三个参数值得说清楚：第一个是完整类名，要带命名空间，路径最好和文件位置对得上；extend指定父类，继承之后父类的所有配置项你都能直接用；xtype是这个类的短别名，有了它，你在别的视图里写一行配置就能引用这个组件，不用写全类名。Ext.create的第一个参数是类名，第二个是覆盖配置，可以临时改掉定义时的任何属性。

最常见的翻车点是：只写了define就跑去刷新页面，然后发现什么都没有。图纸画好了不等于房子盖好了，必须create或者被别的视图引用，才会有实际对象。这个区分搞明白，后面看示例代码时你就知道哪些是「定义」哪些是「使用」。

4.4 第一个能跑的网格：Store + Grid + 菜单项

现在把前面的东西串起来，做一个能看见数据的数据网格。分三步，顺序别乱。

第一步，定义数据仓库。在app/store/下建一个文件：

// app/store/ExampleStore.js Ext.define('MyApp.store.ExampleStore', { extend: 'Ext.data.Store', alias: 'store.examplestore', // 别名，视图里用 type 引用它 fields: ['name', 'email', 'phone'], // 三个字段，先不指定类型也能用 data: [ // 入门阶段先用写死的数据，跑通再换成接口 { name: 'A同学', email: 'a@example.com', phone: '1000001' }, { name: 'B同学', email: 'b@example.com', phone: '1000002' }, { name: 'C同学', email: 'c@example.com', phone: '1000003' } ] });

fields声明字段名，data是内联数据，方便你立刻看到效果。真实项目里这个位置会换成配置好的数据源地址，但入门第一步先别碰网络请求，否则一旦跨域报错，你会分不清是自己代码写错还是环境问题。

第二步，写网格视图。在app/view/下建文件：

// app/view/GridView.js Ext.define('MyApp.view.GridView', { extend: 'Ext.grid.Panel', xtype: 'examplegrid', title: '我的第一个数据网格', store: { type: 'examplestore' }, // 按别名拿到上面定义的仓库 columns: [ // flex 表示按比例分配剩余宽度，width 表示固定宽度 { text: '姓名', dataIndex: 'name', flex: 1 }, { text: '邮箱', dataIndex: 'email', flex: 1 }, { text: '电话', dataIndex: 'phone', width: 150 } ] });

columns里每一项对应一列：text是表头文字，dataIndex对应仓库里的字段名，两个必须完全一致，大小写错了这一列就是空的。flex和width是两种宽度策略，前者按比例分，后者写死，混着用也没问题。

第三步，把它挂到导航菜单上。打开app/view/main/下负责导航的那个视图文件，找到菜单项列表，照着已有条目的样子加一条：

// 加到主菜单的 items 里，缩进和相邻条目对齐 { text: '数据网格', iconCls: 'x-fa fa-table', // 点击后把内容区切换成上面定义的网格 handler: function () { this.up('panel').setActiveItem({ xtype: 'examplegrid' }); } }

加完保存，重新构建一次，刷新浏览器，左侧菜单里就会多出一项，点开就是一张带数据的表格，表头能点着排序、列宽能拖着调。这些交互你一行都没写，全是网格组件自带的。这就是前面说的「配置项即功能」——第一次体验到的时候，感觉还挺奇妙的。

5. 新手避坑：这 5 个地方我第一次全踩了

5.1 敲 sencha 提示找不到命令

现象很直接：装完了，信心满满打开终端，输入sencha，回车之后屏幕上写着「不是内部或外部命令，也不是可运行的程序」。你回去翻安装目录，文件明明在，人就开始怀疑人生了。

原因是环境变量没刷新。安装程序把工具路径写进了系统变量，但已经打开的终端窗口读的还是启动时的旧快照，你在这个窗口里敲什么都没用。解决方式就一句话：把当前所有终端窗口全部关掉，重新开一个。如果还不行，重启一次系统，基本百分百生效。这个问题看着像技术故障，本质是操作顺序问题，知道原因之后一秒就过去了。

5.2 改了代码，刷新页面完全没反应

现象是：你明明改了视图里的标题文字，保存，F5 刷新，页面纹丝不动，改回去再刷新，还是没变。反复几次，人开始怀疑是不是改错了文件。

原因是构建产物没更新。浏览器加载的是build/里那份产物，而你改的是app/里的源码，中间缺了「重新构建」这一步。解决方式是每次改完源码都重新跑一遍sencha app build development，再刷新。另外要知道浏览器本身也会缓存脚本文件，如果构建完还是旧的，用无痕窗口打开，或者强制刷新一次，缓存这层干扰就排除了。

5.3 网格出来了，但一行数据都没有

现象：表头正常显示，列也对，就是表格主体一片空白，连行线都看不见。你检查了视图代码，看起来没有任何问题。

原因八成在dataIndex和fields没对上。字段声明写的是name，列里写成了Name，JavaScript 区分大小写，这一步不一致，那一列就取不到值。另一种情况是store的引用没生效，比如type写的别名和alias定义的不一致，网格找不到数据源，就渲染成空表。解决方式是先把dataIndex和fields逐个对一遍，确认完全一致；再检查store: { type: 'xxx' }里的字符串和alias: 'store.xxx'后半段是否相同。这个排查过程我已经走过好几遍，现在养成习惯，写完先扫一眼这两处。

5.4 加图表时报错，说找不到某个类

现象：网格写得好好的，想着再加个柱状图，照着示例把代码贴进去，一运行控制台就红了一片，提示某某类不存在。

原因是图表功能在 Ext JS 里不是默认加载的，它属于额外的能力包，需要先在项目配置里把相关的包声明进来，构建系统才会把它打进产物里。没声明就直接用，运行时自然找不到对应的类。解决方式是打开项目的总配置文件，在依赖声明的位置把图表相关的包加进去，保存后重新构建一次。具体写哪个键、哪个值，就照你手上这份指南里「激活图表功能」那一节照着抄，那部分给了完整的配置片段，比自己试要快得多。

5.5 Classic 和 Modern 的类名混着用

现象：从网上找了一段示例代码，贴进来就报错，提示某个类未定义，可那段代码看起来完全正常。

原因是两个工具箱的类名并不完全一样，某些组件在 Classic 里叫这个名字，在 Modern 里叫另一个。你项目是用 Classic 生成的，却贴了 Modern 的示例，对不上是必然的。解决方式有两条：一是确认你项目的工具箱类型，从今往后只找同类型的示例；二是遇到类名对不上时，先去查一下这个类在你当前工具箱下叫什么，多数情况下只是换了个名字，逻辑是一样的。入门阶段建议就锁定 Classic 一条道走到黑，别两边来回横跳。

6. 下一步学什么：从网格到图表、表单的三级路线

网格跑通之后，你的下一步不该是「把文档从头读到尾」，而是沿着三个视图往下推。我建议的节奏是这样：

第一级的关键是理解数据仓库的连接方式。你只要把data换成一个数据源配置，剩下的排序、筛选、分页网格会自己处理，这一点和手写前端完全不是一个体验。

第二级最容易卡在「图表要先激活」上，前面避坑那一节已经说过。另外柱状图的数据结构比网格讲究一点，它通常要求每个分类对应一个数值字段，字段名写错的表现不是报错，而是图画出来但是空的——这时候先看数据，别看配置。

第三级是表单，它的价值和网格不相上下。加字段、加校验规则、加分组布局，都是一行行配置。我建议你在表单上多花点时间，因为真实项目里表单的字段数量经常是几十个起，手动拼 HTML 的做法在这个量级下会非常痛苦。

最后分享一个我自己踩出来的习惯：每加一个新组件，先让它在页面上「露个脸」，什么都不配，能看到就行；确认渲染没问题了，再往上面加列、加数据、加交互。我早期喜欢一次把配置写全再运行，结果一报错就是十几个问题叠在一起，根本找不到是哪一行出的错。从那以后我每次加组件都强制走一遍「先让它出现，再让它工作」的流程，出问题的范围永远只有一步。希望这个习惯也能帮到你。

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