如何设置当前为桌面构建的 Sencha ExtJS 项目也适用于移动设备？

Question

到目前为止，我们一直在使用默认 classic 构建描述符进行开发，以构建桌面动态网页。

现在我们需要在同一个应用程序上使用移动设备，但在桌面或移动负载上不一定有相同的主页。

用户使用桌面浏览器访问页面 http://example.com。然后他看到桌面的视图布局
用户使用移动浏览器访问页面 http://example.com。然后他看到手机的视图布局（可能是完全不同的视图文件）

我们在没有太多帮助的情况下在文档中找到了这个页面：https://docs.sencha.com/extjs/6.0/core_concepts/tablet_support.html

实际上，当切换到 Chrome 模拟器（例如设置 Apple iPad 模拟器）时，当前在桌面上完全正常工作的页面在控制台中出现以下错误：

我们需要几个必要的步骤来正确设置它。

Answer 1

问题很笼统，我看不出你做了什么，为什么失败了。 link 后面的触摸支持是针对经典工具包的，而不是现代工具包，所以如果你想使用现代工具包，请忘记 link。

与大多数这些框架更改一样，您最好创建一个新的应用程序环境 (sencha generate app)，然后移植（复制）您的源代码。生成新的应用环境时，不提供工具包配置，创建通用应用。

然后不要将所有代码都放在一个目录中。您必须将现有代码文件分解为两部分："Used for both toolkits" 和 "Used for classic only"。视图通常只是经典的，而某些模型和商店可能是通用的。这两个部分进入两个不同的目录：src 用于通用部分，classic/src 用于经典部分。

然后才编写现代工具包的视图（将它们放入 modern/src），一切都应该可以正常编译。

Answer 2

当您在 ExtJS 6 中创建一个全新的应用程序时，您访问 sencha cmd 并调用："sencha generate app NameApp ../folderApp"

然后，创建以下结构：Click here to see the structure

我不知道你的代码创建的结构，但为了在桌面和移动设备上工作，它需要在 sencha cmd 生成的结构中。

获得此结构（生成一个新的应用程序是更好的做法）后，您需要记住 "rigth model of extjjs 6.0"。 ExtJS 允许 MVC 或 MVVM 架构。 MVC 架构基本上由一个可以控制应用程序所有组件的大控制器控制。另一方面，MVVM 架构为每个视图都有一个控制器——当视图被实例化时它被实例化，当视图被销毁时它被销毁。这种架构在 ExtJS 中被推荐，特别是在最新的版本中。

您现在必须将在实际应用程序中完成的代码转移到新的应用程序和体系结构中。将所有视图结构放在 NameApp > classic > src > view 中。为每个视图打开一个新文件夹。此文件夹应包含视图和此视图的控制器。例如，让我们创建一个列表视图：

NameApp > classic > src > view > list > List.js

NameApp > classic > src > view > list > ListController.js

等等...

现在您可以在 mobile > src > view 文件夹中创建分开的移动视图和控制器，遵循经典中遵循的相同模型，但您当然必须使用移动工具包中的组件。

到这里为止，您在同一代码中有一个单独的移动应用程序和经典应用程序。但是您可以通过从 app 文件夹扩展泛型类来使用 ExtJS 6 的强大功能，以优化您的代码。例如，您可以为特定视图创建一个通用控制器，它将在经典和现代文件夹中扩展：

NameApp > app > view > list > ListControllerGeneric.js

Ext.define('NameApp.app.view.list.ListControllerGeneric', {
    extend: 'Ext.app.ViewController',
    //here you put code using in modern and classic both
});

NameApp > classic > src > view > list > ListController.js

Ext.define('NameApp.app.view.list.ListController', {
    extend: 'NameApp.app.view.list.ListControllerGeneric',
    //here you put code using in classic only
});

NameApp > 现代 > src > 视图 > 列表 > ListController.js

Ext.define('NameApp.app.view.list.ListController', {
    extend: 'NameApp.app.view.list.ListControllerGeneric',
    //here you put code using in modern only
});

避免崩溃的一件重要事情是将经典文件夹中的所有视图创建到现代文件夹中，即使您实际上并不在移动设备上使用它们。此外，当同时使用桌面和移动设备时，您需要 sencha app watch modern 来测试经典和现代，但您需要 sencha app build 来构建两者（或 sencha app build 来构建特定的）。

我希望这个解释对你有用。谢谢

Answer 3

我对煎茶很陌生，但我想指出使用：

sencha app watch

试图在应用程序文件夹中找到我的所有文件，即使我使用“?modern”或使用 chrome 开发人员作为移动用户代理。

使用：

sencha app watch modern

问题已解决。此命令将检查用户代理或“?modern”和“?classic”标签并请求正确的文件。

这个答案最初是在@Albanir Neves 的回复中，我只是在这里说得更清楚了。

如何设置当前为桌面构建的 Sencha ExtJS 项目也适用于移动设备？

How to setup a Sencha ExtJS project currently built for desktop also work for mobile?

build-process

extjs