如何设置当前为桌面构建的Sencha ExtJS项目也适用于移动设备？
乔治·普利哥洛普洛斯
classic到目前为止，我们一直在使用默认的构建描述符进行开发，以构建用于桌面的动态网页。
现在，我们需要在同一个应用程序上使用移动设备，但在桌面或移动设备负载上不必具有相同的主页。
用户使用桌面浏览器访问http://example.com页面。然后，他将看到桌面的视图布局
。用户使用移动浏览器访问http://example.com页面。然后，他会看到移动设备的视图布局（可能是一个完全不同的视图文件）
我们在文档内部发现此页面没有太多帮助：https : //docs.sencha.com/extjs/6.0/core_concepts/tablet_support.html
实际上，当切换到Chrome模拟器（例如设置Apple iPad模拟器）时，当前在桌面上完全可以正常运行的页面在控制台中出现以下错误：
我们需要一些正确设置它所必需的步骤。
阿尔巴尼尔·内维斯
在ExtJS 6中创建全新的应用程序时，需要访问sencha cmd并调用：“ sencha生成应用程序NameApp ../folderApp”
然后，创建以下结构：单击此处查看结构
我不知道您的代码创建的结构，但是为了在台式机和移动设备上工作，它必须处于由sencha cmd生成的结构中。
在获得这种结构（生成一个新的应用程序是一种更好的做法）之后，您需要牢记“ extjjs 6.0的严格模型”。ExtJS允许MVC或MVVM架构。MVC体系结构基本上由一个大型控制器控制，该控制器可以控制应用程序的所有组件。另一方面，MVVM体系结构为每个视图都具有一个控制器-在实例化视图时实例化，在销毁视图时销毁。在ExtJS中，尤其是在最新版本中，建议使用此体系结构。
现在，您必须将实际应用中完成的代码转移到新的应用程序和体系结构中。将所有视图结构放入NameApp> classic> src> view。为每个视图打开一个新文件夹。该文件夹应包含该视图以及该视图的控制器。例如，让我们创建一个列表视图：
NameApp>经典> src>视图>列表> List.js
NameApp>经典> src>视图>列表> ListController.js
等等...
现在，您可以按照mobile经典>相同的模型，在mobile> src> view文件夹上创建移动视图和分开的控制器，但是您当然必须使用移动工具包中的组件。
直到这里，您都使用相同的代码将移动应用程序和经典应用程序分开。但是您可以通过扩展app文件夹中的泛型类来使用ExtJS 6的功能，以优化代码。例如，您可以为特定视图创建通用控制器，它将在经典和现代文件夹中扩展：
NameApp>应用程序>视图>列表> 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>视图>列表> 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来构建特定版本）。
我希望这个解释对您有用。谢谢
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
锚链接适用于桌面但不适用于移动设备
- 2
单击时的 jQuery 类适用于桌面，但不适用于移动设备
- 3
z-index 在移动设备上适用于标题 cta 文本，但适用于桌面？
- 4
如何创建适用于移动设备和桌面设备的粘性页脚？
- 5
如何在zurb Foundation中设置仅适用于移动设备的样式
- 6
如何使用仅适用于移动设备的Bootstrap隐藏部分文本
- 7
如何制作适用于移动设备和平板电脑的自适应Android应用程序？
- 8
如何制作适用于Web和移动设备的SVG响应式进度栏？
- 9
如何使用仅适用于移动设备的Bootstrap隐藏部分文本
- 10
如何使Gaia的更改适用于设备
- 11
响应式网页设计适用于桌面，但不适用于移动设备，它不会加载 CSS 和 JavaScript
- 12
桌面上的 bootstrap 文本大小非常小，适用于较小的屏幕尺寸和移动设备
- 13
jQuery移动滑动不适用于桌面
- 14
远程桌面，例如VNC，但仅适用于输入设备，不适用于输出设备
- 15
如何找到适用于Android设备的正确来源？
- 16
适用于Android项目集（包括库）的Gradle构建
- 17
仅适用于移动设备的轮播
- 18
LocalStorage 不适用于移动设备？
- 19
Ajax 不适用于移动设备
- 20
适用于Visual Studio设置项目VS 2010的Dotfuscator后期构建
- 21
适用于Visual Studio设置项目VS 2010的Dotfuscator后期构建
- 22
网格项目点击事件不适用于像移动设备这样的小屏幕
- 23
响应式引导程序不适用于 Rails 项目中的移动设备
- 24
适用于Ubuntu Touch设备的远程桌面/远程显示查看器？
- 25
使用 Gradle 多项目构建应用插件适用于主项目
- 26
如何滚动到仅适用于桌面视图的ID，并在移动视图上默认使用它？
- 27
Android代理设置是否适用于设备上的所有应用？
- 28
如何使用适用于 iOS 的 BLE 识别通过蓝牙找到的设备
- 29
eclipse中的Tomcat服务器不适用于Gradle构建项目
我来说两句