文章目录
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 会找到每一个配置来进行构建。
在每个工具包中， 业务逻辑是共用的。
看一个实例：
"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?创建一整套不同的视图。举例来说， 根据应用在不同的设备上（移动或者桌面浏览器）指定特定的视图。
创建两个应用配置的例子：
Ext.define('App.Application', {
extend: 'Ext.app.Application',
profiles: [
'Desktop',
'Mobile'
]
});
通过Profile的isActive方法返回生效的配置， 以侦测到的操作系统为例：
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?属性使用在类的定义中， 用于基于平台或设备的类型的配置， 类似：
Ext.define('App.view.summary.Manufacturing', {
extend: 'Ext.panel.Panel',
title: 'Mfg Summary',
platformConfig: {
desktop: {
title: 'Manufacturing Summary'
}
}
});
等效于：
Ext.define('App.view.summary.Manufacturing', {
extend: 'Ext.panel.Panel',
title: testForDesktop ? 'Manufacturing Summary'
: 'Mfg Summary'
});
第一种方式将platformConfig看成是类定义的一部分， 如果将视图看成数据的话， 第二种方式是标准的 JSON格式。
也可以如下方式使用：
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?的花销会大一些。
以下，根据设备的宽来显示标题：
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了， 类似：
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）。