[Ext JS]多类型终端-电脑、移动端（手机、平板）| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]多类型终端-电脑、移动端（手机、平板）

## Ext JS 多类型终端-电脑、移动端（手机、平板）
### 多种设备通用的框架
Ext JS 很容易做到在多种设备运行。在Ext JS 6之前的版本，Sencha官方针对移动端的开发单独提供了一个框架Touch。从Ext JS 6开始，Sencha将Ext JS和Touch合并到通用的应用程序工具包。
核心资源和逻辑功能的应用成为通用的应用程序。 包括模型层、数据层、控制层以及共用的功能类。
不同的工具包是指包含Ext JS和 Touch 的视图层。这两个工具包分别是classic 和 modern。
Ext JS 和Touch合并的方式是将两个框架的核心部分， 像data、controllers、models等被调整到一个共同的平台，这样就可以共享数据和逻辑。对于视图层再区别提供不同的工具包。这两个工具包可以再同一个应用中并存
### classic与modern开发工具包
classic ，经典工具包，Classic工具 包支持传统的 Ext JS 5 的应用程序， 包括桌面浏览器、平板和触摸屏的笔记本电脑。
modern ,现代工具包，Modern工具包支持 HTML5应用程序， 包括桌面和手机的所有现代浏览器 (IE11及以上)都支持。
### 应用程序工具包的选择
选择应用程序的工具包， 只需要修改由 Cmd 产生的应用程序的 app.json 文件的如下内容：
"toolkit": "classic",

app.json是由cmd产生的，包含了一些可以调整的属性。
如果是就项目的升级， 旧的app.json可能有点属性没有， 升级之后，在.sencha/app/app.defaults.json文件就可以看到默认值的配置了， 复制到对对应的app.json。
### 构建配置
对app.json文件的builds属性的不同配置可以创建不同类型的应用程序。习惯上，构建不同主题和本地化的应用。
通过设置classic或者modern（也可以是同时设置）， Cmd 会找到每一个配置来进行构建。设置的示例如下图：
![](/upload/picture/2022-10-10/upload_0cb73e6040d19a9acb2b19fa9a04495b.png)
构建的名字习惯使用classic和modern，这个名字也可以自取，比如：
```json
"builds": { 
	"mymodern": {
	"toolkit": "modern",     
	"theme": "theme-cupertino",  
	"requires": [     
	"charts",        
	"ux"      
	]    
	}, 
	"myclassic": { 
	"toolkit": "classic",     
	"theme": "theme-neptune",     
	"slicer": null,     
	"requires": [        
	"charts"      
	]  
}}

```
mymodern, 构建使用 modern 工具包，除了基本的框架包之外，还需要使用ux和 chart 的包，样式主题是：cupertino 。
### Cmd 构建
使用Cmd，可以对app.json文件中配置的builds的构建目标进行构建，以上面为例，
构建现代的应用程序
sencha app build mymodern

构建经典的应用程序
sencha app build myclassic

构建所有的
sencha app build

注意：构建的名字是可以随便给的， 文件和命令对应上就可以了。
通用应用程序目录及创建
通用应用程序使用 Cmd 产生跨两个工具包的多个应用程序。 应用程序的构建结果可以运行在桌面端或是移动设备。需要注意的是同一个个应用程序不能在同一个类路径包含 modern和　classic两个框架。一般状况， 应用程序会在一个传统的应用程目录包含全局逻辑， 也就是目录：app。理想状况下， 应用程序的通用部分包括数据、模型、视图模型等， 共享控制器。逻辑部分跨工具包需要好好考虑一下。
举例来说， 一个经典的应用程序有一个grid, 一个现代的应用程序有一个list, 两个组件共享store和model。如果需要这两个组件针对用户的操作做出反应，　就需要在这个grid和list找到相同的事件。因为两个组件都可以触发select事件，理想的方案可能是利用它。但是，如果逻辑有包含itemtap， 而这个在经典模式是不认识的， 这样在Cmd构建经典的时候就可能会有问题。
考虑共用逻辑和资源之后， 在不同的工具包的 src目录下创建不同工具包特定的代码。
注意： 如果是构建单个工具包的应用，则目录结构看起来和之前的很类似。
创建一个通用的应用
使用 cmd 命令：
sencha -sdk /path/to/ExtSDK generate app MyApp ./MyAppLocation

这个命令会创建一个功能齐全的通用应用， 会产生classic和modern的应用， 共用的部分在 app目录下。工具包特定的定义在各自的目录中（modern 、classic） 。
在开发的时候， 可以针对不同的工具包进行启动：
现代：
sencha app watch modern

经典：
sencha app watch classic

如果不输入查看的目标的话， 默认使用builds配置里的第一个。
对应用构建之后， 就可以在各自的浏览器进行查看。在手机查看modern风格的， 在桌面查看classic版本的。
运行时配置
除此还可以通过运行时配置， 包括应用配置、响应配置和平台配置 来使用户对于不同的媒介有着相同的无缝的体验。
###　App Profiles - 应用配置
Ext.app.Profile可以基于mainView(或者 Viewport)切换应用的视图。也就是说， 可以通过在某些条件下激活一个profile创建一整套不同的视图。举例来说， 根据应用在不同的设备上（移动或者桌面浏览器）指定特定的视图。
创建两个应用配置的例子：
```javascript
Ext.define('App.Application', {   
	extend: 'Ext.app.Application',    
	profiles: [   
	'Desktop',       
	'Mobile'   
]});
```

通过Profile的isActive方法返回生效的配置， 以侦测到的操作系统为例：
```javascript
Ext.define('App.profile.Desktop', { 
	extend: 'Ext.app.Profile',
	mainView: 'App.view.desktop.Main',
	isActive: function () {   
	return Ext.os.is.Desktop; 
	},   
	launch: function () {   
	console.log('Launch Desktop'); 
}});
```

配置不会使用到mainView配置，可以使用配置的launch方法进一步客制， 仅生效的配置的launch会被执行
### Platform Configs - 平台配置
platformConfig属性使用在类的定义中， 用于基于平台或设备的类型的配置， 类似：
```javascript
Ext.define('App.view.summary.Manufacturing', {    
	extend: 'Ext.panel.Panel',    
	title: 'Mfg Summary',  
	platformConfig: {     
	desktop: {       
	title: 'Manufacturing Summary'  
	}   
}});
```

等效于：
```javascript
Ext.define('App.view.summary.Manufacturing', {   
	extend: 'Ext.panel.Panel',  
	title: testForDesktop ? 'Manufacturing Summary'      : 'Mfg Summary'
});
```

第一种方式将platformConfig?看成是类定义的一部分， 如果将视图看成数据的话， 第二种方式是标准的 JSON格式。
也可以如下方式使用：
```javascript
Ext.define('App.view.summary.Manufacturing', {  
	extend: 'Ext.panel.Panel',    
	items: [{   
	xtype: 'panel',  
	platformConfig: {     
	desktop: {         
	title: 'Manufacturing Summary' 
	},       
	'!desktop': {     
	title: 'Mfg Summary' 
	}      
	}  
}]});
```

platformConfig的配置由initConfig?方法进行合并处理，也就是说， 只有在构造函数调用initConfig方法的类platformConfig才能生效。这些类包括：Ext.Widget,Ext.Component， 大部分的数据类AbstractStore， 和使用Observable的类。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]多类型终端-电脑、移动端（手机、平板）

网站导航