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

到目前为止，我们一直在使用默认的

classic

构建描述符为桌面构建动态网页

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

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

我们在文档中找到了此页面，但没有提供太多帮助：

实际上，当切换到Chrome模拟器（例如，设置Apple iPad模拟器）时，桌面上的一个页面目前运行完全正常。我们在控制台中得到以下错误：

---

我们需要一些必要的步骤来正确设置它。

问题非常广泛，我看不出您做了什么，也看不出它失败的原因。链接后面的touch支持是为经典工具包命名的，而不是为现代工具包命名的，因此如果您想使用现代工具包，请忘记该链接

与大多数框架更改一样，您最好创建一个新的应用程序环境（

sencha generate app

），然后移植（复制）源代码。生成新的应用程序环境时，不要提供工具箱配置，因此会创建一个通用应用程序

然后不要把所有的代码放在一个目录中。您必须将现有代码文件分为两部分：“用于两个工具包”和“仅用于经典”。视图通常只是经典的，而一些模型和商店可能是通用的。这两个部分分为两个不同的目录：

src

通用部分和

classic/src

经典部分

---

只有编写modern toolkit的视图（将它们放入

modern/src

），一切都应该可以正常编译。

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

然后，创建以下结构：

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

在获得这种结构之后（生成一个新的应用程序是更好的做法），您需要考虑“extjjs 6.0的rigth模型”。ExtJS允许MVC或MVVM架构。MVC架构基本上由一个可以控制应用程序所有组件的grand控制器控制。另一方面，MVVM架构对每个视图都有一个控制器——当视图被实例化时，它被实例化，当视图被销毁时，它被销毁。在ExtJS中建议使用此架构，尤其是在lasts版本中

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

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

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
});

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

等等

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

在这里之前，你有一个单独的移动和经典应用在同一代码。但是，为了优化代码，您可以使用ExtJS6的强大功能，从app folder扩展泛型类。例如，可以为特定视图创建通用控制器，该控制器将在经典和现代文件夹中扩展：

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
});

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

NameApp>modern>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
});

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

避免崩溃的一个重要方法是将所有视图从classic文件夹创建到modern文件夹中，即使您在移动设备上没有实际使用它们。此外，当同时使用台式机和移动设备时，您需要sencha app watch modern来测试经典版和现代版，但您需要sencha app build来构建两者（或sencha app build来构建特定版本）

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

---

谢谢

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

sencha app watch

尝试在应用程序文件夹中查找我的所有文件，即使我使用“？modern”或使用chrome devs作为移动用户代理

使用：

sencha app watch modern 

解决了这个问题。此命令将检查用户代理或“modern”和“classic”标记，并请求正确的文件

---

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

我们不是在创建新的应用程序。相反，我们正试图增强现有的应用程序，使其也能在不同布局的移动设备中工作。我们相信，这可以通过启用现代工具包来实现。我们可能完全错了。。。我们正在研究如何正确设置。你能帮忙吗？@GeorgePligor这两种情况你都完全错了。您不能仅仅“启用”现代工具包，您必须从头开始编写视图，因为它们不完全兼容（我猜它们永远不会完全兼容，尽管它们会努力尝试ExtJS7）。要设置这样一个通用应用程序，最简单的方法是生成一个“新”应用程序，然后将所有现有代码放入适当的目录中，因为安装文件（app.json、bootstrap.json等）没有很好的文档记录。我想指出升级Sencha Touch->ExtJS6和ExtJS4->ExtJS6的最佳策略也是生成一个新的应用程序并复制JS代码。只是澄清一下：我们已经在使用ExtJS6进行构建了。不需要从ExtJS4或ExtJS5迁移Alexander是正确的；b