在 Web 应用程序中包含 EXTJS 5 库答案

【问题标题】：Include EXTJS 5 library in web application在 Web 应用程序中包含 EXTJS 5 库
【发布时间】：2015-01-20 14:10:41
【问题描述】：

我有 extjs 5，其中包含许多文件夹（.sencha、build、cmd、examples、licences、overrides、packages、plugins、src 和 welcome）。我想在 Web 应用程序中使用图表，所以我所做的是复制/粘贴构建文件夹中的 ext-all-debug.js 文件。这给了我显示面板的可能性，但没有 css。所以我复制/粘贴了在 \ext-5.1.0\build\packages\ext-theme-neptune\build\resources 中找到的 css 文件。所以面板用 css 显示得很好。

然后我想使用图表，但是由于我不明白的原因，图表不包含在 ext-all-debug.js 文件中。所以我复制/粘贴“ext-charts-debug.js”。现在我可以显示简单的笛卡尔图表（其他图表不起作用），但它们的行为不正常（错误的轴，当它向右或向左锁定时，图例总是在底部，等等）。我为显示图表而编写的代码已在 sencha fiddle 上进行了测试，并且运行良好。

所以我的问题是：我应该在我的 Web 应用程序 lib 文件夹中包含哪些内容才能让我使用每个 sencha 组件（带有 css）。非常感谢！

PS：这是我当前的 Web 应用程序库文件夹：

【问题讨论】：

我不能真正开始强调文档可能比我开始解释的更好。 docs.sencha.com/extjs/5.1/getting_started/getting_started.html
嗨 Rob，非常感谢您的快速反馈 :) ！我一直在阅读您的链接，但它对我没有帮助。我想补充一点，我没有 extjs web 应用程序，而是一个简单的个人 web 应用程序。我根本不使用 sencha cmd ;) ！
只需在代码库的根目录下运行应用程序，下载文件中的所有内容即可。
如果您使用的是 sencha 命令，在生成的app.json 文件中有一个地方可以放置两个调试链接（用于 extjs 图表和 extjs 缩小），然后您进行应用刷新以获取它编译。 Here is a similar question i answered a few days ago

标签： extjs web include extjs5

【解决方案1】：

对于 ExtJS 5，您确实应该阅读有关 Sencha Command 的文档，这是迄今为止让您的项目运行的最简单的方法。

如果您真的想手动添加文件，请将 ExtJS 框架中的 build 文件夹复制到您的项目文件夹中，然后将其添加到您的 index.html：

<link rel="stylesheet" href="build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />
<link rel="stylesheet" href="build/packages/sencha-charts/build/crisp/resources/sencha-charts-all.css" />
<script src="build/ext-all-debug.js"></script>
<script src="build/packages/sencha-charts/build/sencha-charts.js"></script>

您的煎茶图表未正确显示，因为您忘记为您的煎茶图表主题添加 css。

PS：真的，真的阅读 Sencha Command 上的文档。

【讨论】：

是的，Sencha Cmd 是要走的路。