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

Question

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

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

用户访问页面http://example.com使用桌面浏览器。然后他看到桌面的 View 布局
用户访问页面http://example.com使用移动浏览器。然后他看到了移动设备的 View 布局(可能是完全不同的 View 文件)

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

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



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

Answer 1

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

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

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

在得到这个结构之后(生成一个新的应用程序是一个更好的实践)，你需要把“extjjs 6.0 的严格模型”放在你的脑海中。 ExtJS 允许 MVC 或 MVVM 架构。 MVC 架构基本上由一个大 Controller 控制，它可以控制应用程序的所有组件。另一方面，MVVM 架构为每个 View 都有一个 Controller ——当 View 被实例化时它被实例化，当 View 被销毁时它被销毁。在 ExtJS 中推荐使用这种架构，尤其是在 lasts 版本中。

您现在必须将在实际应用程序中完成的代码转移到新的应用程序和架构中。将所有 View 结构放在 NameApp > classic > src > view 中。为每个 View 打开一个新文件夹。此文件夹应包含 View 和此 View 的 Controller 。例如，让我们创建一个 ListView :

NameApp > 经典 > src > View > 列表 > List.js

NameApp > 经典 > src > View > 列表 > ListController.js

等等...

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

到这里为止，您在相同的代码中拥有一个分离的移动和经典应用程序。但是您可以通过扩展 app 文件夹中的泛型类来使用 ExtJS 6 的强大功能，以优化您的代码。例如，您可以为特定 View 创建一个通用 Controller ，该 Controller 将在经典和现代文件夹中进行扩展:

NameApp > 应用程序 > View > 列表 > ListControllerGeneric.js

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

NameApp > 经典 > src > View > 列表 > 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 > View > 列表 > ListController.js

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

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

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