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

classic到目前为止,我们一直在使用默认构建描述符来构建桌面的动态网页.

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

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

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

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

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

1> Albanir Neve..：

---

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

然后,创建以下结构:单击此处查看结构

我不知道您的代码是如何创建的,但是为了在桌面和移动设备上工作,它需要处于由sencha cmd生成的这种结构中.

在获得这个结构之后(生成一个新的应用程序是一个更好的实践),你需要把"extjjs 6.0的rigth模型"放在你的脑海里.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文件夹中创建分离的移动视图和控制器,遵循classic中的相同模型,但您必须使用移动工具包中的组件.

在此之前,您在同一代码中拥有独立的移动应用和经典应用.但是,您可以通过扩展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> 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 modern only
});

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

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

---

感谢您的广泛回复.我们设法找出发生了什么.我们刚刚使用了`modern`工具包,我们没有**创建我们自己的一个作为你提到的`mobile`.避免崩溃的一个重要方面是将经典文件夹中的所有视图创建到现代文件夹中,即使您实际上并未在移动设备上使用它们.此外,当同时使用桌面和移动时,你需要`sencha app watch modern`来测试经典和现代**但**你需要`sencha app build`来构建两者(或者`sencha app build `来构建特定的).所以,如果你可以编辑你的答案..