[Ext JS6]多类型设备开发| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS6]多类型设备开发

## [Ext JS6]多类型设备开发
ExtJS 6可以很容易做到在多种设备运行的前端应用。
### 通用的应用程序和工具包
Ext JS６将 Ext JS 和 Touch合并到包含不同工具包的同一个框架中。 classic 和 modern 。这些工具包包含 ExtJS 和 Touch 的视图层。共享核心资源和逻辑功能的应用就成为通用的应用程序。
选择应用程序的工具包， 只需要修改由 Cmd 产生的应用程序的 app.json 文件的如下内容：
“toolkit”: “classic”,
两个框架的核心部分， 像data、controllers、models等被调整到一个共同的平台，这样就可以共享数据和逻辑。
app.json是由cmd产生的，包含了一些可以调整的属性。
如果是就项目的升级， 旧的app.json可能有点属性没有， 升级之后，在.sencha/app/app.defaults.json文件就可以看到默认值的配置了， 复制到对对应的app.json。
Classic - 经典
Classic工具 包支持传统的 Ext JS 5 的应用程序， 包括桌面浏览器、平板和触摸屏的笔记本电脑。
Modern - 现代
Modern工具包支持 HTML5应用程序， 包括桌面和手机的所有现代浏览器 (IE11及以上)都支持。
### 构建配置
对app.json文件的builds属性的不同配置可以创建不同类型的应用程序。习惯上，构建不同主题和本地化的应用。
通过设置classic?或者modern?（也可以是同时设置）， Cmd 会找到每一个配置来进行构建。
在每个工具包中， 业务逻辑是共用的。
看一个实例：
```javascript
"builds": {   
	"mymodern": {
	"toolkit" : "modern",
	"theme"   : "theme-cupertino",
	"requires": [
		"charts",
		"ux"       
	]   
	},
	"myclassic": {
	"toolkit" : "classic",
	"theme"   : "theme-neptune",
	"slicer"  : null,
	"requires": [
		"charts"       
	]   
}}
```

### Cmd 构建
以上面为例，
构建现代的应用程序
```
sencha app build mymodern
```

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

构建所有的
```
sencha app build
```

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

### 创建通用的应用
使用 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的类。
#### 响应配置 - Responsive Configs
Ext JS 5开始引入responsiveConfig?，Responsive Mixin?和插件启用它。responsiveConfig配置的规则和属性不仅仅是在创建实例的时候， 而且会根据设备的方向和大小的变化来适应。相比platformConfig， responsiveConfig?的花销会大一些。
以下，根据设备的宽来显示标题：
```javascript
 Ext.define('App.view.summary.Manufacturing', {
	 extend: 'Ext.panel.Panel',
	 mixins: ['Ext.mixin.Responsive'],
	 responsiveConfig: {
	 'width >= 600': {
	 title: 'Manufacturing Summary'
	 },
	 'width < 600': {
	 title: 'Mfg Summary'
	 }    
 }});
```

以上是应用在类上面， 如果是应用在实例上，就需要使用插件plugins了， 类似：
```javascript
Ext.define('App.view.summary.Manufacturing', {
	extend: 'Ext.panel.Panel',
	items: [{
		xtype: 'panel',
		plugins: 'responsive',
		responsiveConfig: {
		'width >= 600': {
			title: 'Manufacturing Summary'
		},
		'width < 600': {
			title: 'Mfg Summary'            
		}        
	}    
}]});
```

需要注意的是上面的是 viewport?的宽度，不是组件的宽度。
### 结论
不同的工具应用在不同的场景， 在加载时使用platformConfig，动态条件， 用responsiveConfig， 在更大的范围修改， 用Ext.app.Profile。
如果需要应用在平板和在桌面和手机看上去完全不一样， 可以考虑使用 cmd 的构建配置（profiles）。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS6]多类型设备开发

网站导航