ExtJS 快速入门——如何运行答案

【问题标题】：ExtJS quick start - how to runExtJS 快速入门——如何运行
【发布时间】：2018-07-04 03:14:47
【问题描述】：

刚开始学习Ext JS，马上就迷上了their quick start的第一步。

我应该把那个 hello world 代码放在哪里才能在我的网页中看到结果，而不是他们的交互式演示？

我已经启动并运行了本地 Web 服务器，所以问题在于应用程序的文件布局。

【问题讨论】：

对于一个项目，如果可能的话，你应该使用 Sencha Cmd 创建一个应用程序。您将在提供给 Sencha Cmd 命令行实用程序的应用程序工作目录中找到所需的一切，包括带有商店、视图等的示例应用程序

标签： extjs extjs6

【解决方案1】：

您在项目的根目录中创建一个app.js 文件，然后将代码放在那里。您还应该在包含库脚本之后将此文件包含在 index.html 文件中，如下所示：

<script type="text/javascript" src="app.js"></script>

基本上，您首先加载 ExtJS 库文件，然后加载使用 ExtJS 执行某些操作的文件。

或者您可能不需要任何其他文件，只需将代码包含在index.html 中（也在加载库之后）以内联javascript的形式：

<script type="text/javascript">
   Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.Viewport.add({
            xtype: 'panel',
            title: 'New Panel',
            html: 'My new panel!'
        });
    }
});
</script>

【讨论】：

当我在 index.html 文件中包含 app.js 时，我得到了 TypeError: Ext.Viewport.add is not a function。
如果我包含ext-modern-all-debug.js 而不是ext-all-debug.js 我得到TypeError: Ext.Viewport is undefined。
如果我遵循 ExtJS 文档 (docs.sencha.com/extjs/6.2.0/modern/Ext.Viewport.html) 中的示例，我会得到 TypeError: Ext.setup is not a function。真是一团糟。
啊。最后他们在文档的最终版本（docs.sencha.com/extjs/6.5.1/modern/Ext.Viewport.html）中做对了。它适用于 ExtJS 6.2.0 GPL，即使该文档是为 ExtJS 6.5.1 编写的。