ExtJS 6 - 没有 CMD 的枢轴答案

【问题标题】：ExtJS 6 - pivot without CMDExtJS 6 - 没有 CMD 的枢轴
【发布时间】：2016-03-02 08:04:20
【问题描述】：

我想使用没有 cmd 的简单测试 html 来评估枢轴网格的功能。
我已经阅读了这些链接中的信息，但我仍然无法安装工作环境
https://docs.sencha.com/extjs/6.0/co...ivot_grid.html
https://www.sencha.com/forum/showthr...out-Sencha-Cmd http://se.sencha.com/setup-guide/

我已经下载了核心框架（'ext-6.0.1-trial.zip'）
和来自sencha网站的枢轴插件（'ext-addons-6.0.1-trial.zip'）
并在我的测试网络服务器上解压它们：

www.mydummy.server.org/lib/extjs/ext-6.0.0/

并测试它调用厨房水槽示例中的枢轴：
www.mydummy.server.org/lib/extjs/ext-6.0.0/examples/kitchensink/index.html
在这样的设置中，它们开始时不会出错。

插件的目标位置对我来说有点奇怪，我确定我应该将插件解压到框架的包目录中
www.mydummy.server.org/lib/extjs/ext-6.0.0/package/
但是厨房水槽的例子不起作用
（kitchensink 使用 ../../../package/pivot 调用 pivot ）

现在我想知道如何在自己的 html 示例中包含框架和插件，
我尝试过类似的方法：

<link href="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/ext-all.js"></script>
<link href="www.mydummy.server.org/lib/extjs/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="www.mydummy.server.org/lib/extjs/packages/pivot/build/pivot.js"'></script>
<script src="www.mydummy.server.org/lib/extjs/packages/exporter/build/exporter.js"'></script>

链接正常（没有 http 错误），但未呈现简单的枢轴并且框架无法加载更多类：
[Ext.Loader] 部分请求的文件加载失败。

没有cmd的extjs和pivot的正确设置是什么？

谢谢你，安妮

【问题讨论】：

标签： cmd pivot extjs6

【解决方案1】：

在这里做一些事情。

对于 KitchenSink，如果您在浏览器中打开 www.mydummy.server.org/lib/extjs/ext-6.0.0/，您将看到一个 index.html。将有一个绿色按钮显示指向www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/index.html 的示例（注意那里的build 目录）。然后，如果您单击 KitchenSink，它将从www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/kitchensink/ 加载（再次注意build 目录）。这是因为 KitchenSink 是一个 Cmd 应用程序，它将构建到 build 目录。 build 目录之外的 examples 目录是应用程序的开发版本，这就是为什么我们仍然为源提供它的原因。

接下来，关于如何在 Cmd 包之外使用枢轴网格的 Cmd 包。我们构建了 Cmd 包，因此如果您查看包的 build 目录，您应该会看到一个构建的 JavaScript 和 CSS 文件，您可以通过 HTML 中的 <script> 和 <link> 加载该文件。

<html>
    <head>
        <title>Pivot Grid Test</title>

        <link href="http://releases/ext/6.0.1.250/build/classic/theme-neptune/resources/theme-neptune-all.css">
        <script src="http://releases/ext/6.0.1.250/build/ext-all.js"></script>

        <link href="http://localhost/ext-addons-6.0.1/packages/pivot/build/neptune/resources/pivot-all.css">
        <script src="http://localhost/ext-addons-6.0.1/packages/exporter/build/exporter.js"></script>
        <script src="http://localhost/ext-addons-6.0.1/packages/pivot/build/pivot.js"></script>
    </head>
    <body></body>
</html>

注意我在pivot.js 之前加载了exporter.js，这主要是有效的，除了我确实看到了一些我称之为错误的东西。在pivot.js 中，我们定义了Ext.ux.ajax.PivotSimlet，它扩展了Ext.ux.ajax.JsonSimlet（在框架的ux 包中）。像这样扩展很好，但只有当你想在你的应用程序中拥有模拟数据时才需要PivotSimlet（除非在开发中，大多数情况下都不需要）。有两种方法可以解决此问题，从 pivot.js 中删除该类或包含 ux 的 JavaScript/CSS（但是该包包含许多您可能不需要的代码）。

【讨论】：

是的，我在我们的错误跟踪器中创建了一个错误，以便将PivotSimlet 退出构建。

【解决方案2】：

非常感谢您的解释。我添加了这些类以获得一个工作示例：

<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/Simlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/DataSimlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/JsonSimlet.js"</script>

【讨论】：