Sencha Touch 现在已全面升级至Ext Js 6，那么我们如何使用他们呢？
首先去官网下载最新的sdk和帮助文档
sdk下载地址：https://www.sencha.com/products/extjs/evaluate/
如图，这个是试用版下载地址，试用版和正版的区别大概就是试用版有试用标记水印吧，大概是吧。
官方api下载地址：http://docs.sencha.com/extjs/6.0/
这个就是官方的在线api了，想要下载就把鼠标移动到左上角的Ext JS Guides上面去，如图
选择你想要下载的版本，点有括号的链接就能下载了。如图
如果不太了解api如何使用的同学可以参考以下文章：
http://www.cnblogs.com/mlzs/p/3908739.html
对了，我们还应该去下载一个最新的cmd，下载地址：
https://www.sencha.com/products/extjs/cmd-download/
如果你是初学者，还不清楚如何配置环境这些，可以参考以下文章，环境搭建部分：
http://www.cnblogs.com/mlzs/p/3420900.html
以上准备完成之后，我们就来用用Ext Js 6吧
首先运行cmd命令行，输入以下命令：
sencha -sdk D:\ASPX\ext-premium-6.0.1\ext-6.0.1 generate app app D:\ASPX\Test\www
如图所示：
命令解释，在D:\ASPX\Test\www 目录下创建一个ext项目，命名空间是app
D:\ASPX\ext-premium-6.0.1\ext-6.0.1:你选择的sdk根目录
app D:\ASPX\Test\www：在指定目录创建一个项目，命名空间为app
ok，现在我们来看看效果，用谷歌浏览器打开项目，如图
我们把谷歌浏览器切换到手机模式试试，如图
这样效果和我们原来的sencha touch没啥差别了
看看index.html的代码
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>app</title> <script type="text/javascript">
var Ext = Ext || {}; // Ext namespace won't be defined yet... // 在这里检测设备类型，根据类型决定调用那个模块
// 除了ext自带的现代版和经典版你还可以自定义一些模块
Ext.beforeLoad = function (tags) {
var s = location.search, // the query string (ex "?foo=1&bar")
profile; // For testing look for "?classic" or "?modern" in the URL to override
// device detection default.
//
if (s.match(/\bclassic\b/)) {
profile = 'classic';
}
else if (s.match(/\bmodern\b/)) {
profile = 'modern';
}
else {
profile = tags.desktop ? 'classic' : 'modern';
//profile = tags.phone ? 'modern' : 'classic';
}
//最后profile的值是啥，就调用那个模块
Ext.manifest = profile; // this name must match a build profile name // This function is called once the manifest is available but before
// any data is pulled from it.
//
//return function (manifest) {
// peek at / modify the manifest object
//};
};
</script> <!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="95540398-5be2-4a4a-9cab-b172e28eb380" type="text/javascript" src="bootstrap.js"></script> </head>
<body></body>
</html>
从注释可以看出，ext通过判断设备类型来决定调用那个模块来工作
隐藏掉一些无关目录文件，我们来看看项目结构，如图：
app还是那个app，resources还是那个resources，sass呢也还是那个sass
不过多了classic和modern还有overrides
在ext里面，对于一些通用的东西我们可以放在app文件夹里面比如model、store和部分控制层的东西
然后classic和modern分别对应以前的ext和sencha touch，他们的src就相当于以前的app文件了。
overrides是拿来放重写类的文件夹
然后对于sencha touch来说ViewController和ViewModel是新东西，这个大家可以看看http://blog.csdn.net/sushengmiyan/article/details/38612721
最主要的是app.json发生了一些变化，具体说明看注释：
{
/**
* 应用程序的命名空间。
*/
"name": "app",
/**
* 应用程序的版本。
*/
"version": "1.0.0.0",
/**
* 起始页面名称（后缀可以是HTML，JSP，ASP等）。
*/
"indexHtmlPath": "index.html",
/**
* 项目文件路径，也就是默认的modern/src和classic/src
*/
"classpath": [
"app",
"${toolkit.name}/src"
],
/**
* 重写类文件目录路径，也就是默认的modern/overrides和classic/overrides
*/
"overrides": [
"overrides",
"${toolkit.name}/overrides"
],
/**
* The Sencha Framework for this application: "ext" or "touch".
* 不知道做啥用的，改成touch之后无法打包了
*/
"framework": "ext",
/**
* 默认没有这个配置，如果配置就可以指定打包模式 "classic" or "modern".
*/
"toolkit": "modern",
/**
* 默认没有这个配置，应用的主题名称，不要随便乱写
*/
/**
"theme": "ext-theme-crisp",
*/
/**
* 需要的扩展包 ( 默认是最新的).
*
* 例如,
*
* "requires": [
* "charts"
* ]
*/
"requires": [
"font-awesome"
],
/**
* 打包相关配置
*/
"fashion": {
"inliner": {
/**
* 是否禁用资源的内联。默认情况下不启用。
* 不知道做啥的
*/
"enable": false
}
},
/**
* Sass 相关配置.
*/
"sass": {
/**
* 命名空间映射
*/
"namespace": "app",
/**
* File used to save sass variables edited via Sencha Inspector. This file
* will automatically be applied to the end of the scss build.
*
* "save": "sass/save.scss"
*
*/
/**
* 默认全局scss样式路径
*
* +-------+---------+
* | | base |
* | theme +---------+
* | | derived |
* +-------+---------+
* | packages | (in package dependency order)
* +-----------------+
* | application |
* +-----------------+
*/
"etc": [
"sass/etc/all.scss",
"${toolkit.name}/sass/etc/all.scss"
],
/**
* 默认全局scss 变量路径
*
* +-------+---------+
* | | base |
* | theme +---------+
* | | derived |
* +-------+---------+
* | packages | (in package dependency order)
* +-----------------+
* | application |
* +-----------------+
*
* The "sass/var/all.scss" file is always included at the start of the var
* block before any files associated with JavaScript classes.
*/
"var": [
"sass/var/all.scss",
"sass/var",
"${toolkit.name}/sass/var"
],
/**
* 默认全局scss 目录路径
* +-------+---------+
* | | base |
* | theme +---------+
* | | derived |
* +-------+---------+
* | packages | (in package dependency order)
* +-----------------+
* | application |
* +-----------------+
*/
"src": [
"sass/src",
"${toolkit.name}/sass/src"
]
},
/**
* 所需引用js文件
* 单个格式如下
*
* {
* // 文件路径，如果本地文件，路径相对于此app.json文件
* //
* "path": "path/to/script.js", // REQUIRED
*
* // 设置为true，表示所有的类生成到这个文件
* //
* "bundle": false, // OPTIONAL
*
* // 设置为true以包括级联的类文件。
* // 不清楚含义
* "includeInBundle": false, // OPTIONAL
*
* //设置为true,表示这个文件是一个远程文件不会被复制，默认false
* "remote": false, // OPTIONAL
*
* // 如果没有指定，这个文件将只加载一次，
* // 缓存到localStorage里面，直到这个值被改变。
* //
* // - "delta" 增量更新此文件
* // - "full" 当文件改变时，完全更新此文件
* //
* "update": "", // OPTIONAL
*
* // 设置为true，表示这是项目依赖文件。
* // 该文件不会被复制到生成目录或引用
* "bootstrap": false // OPTIONAL
* }
*
*/
"js": [
{
"path": "app.js",
"bundle": true
}
],
/**
* 经典包所需引入的js
*/
"classic": {
"js": [
// 删除此项将单独从框架加载源。
{
"path": "${framework.dir}/build/ext-all-rtl-debug.js"
}
]
},
/**
* 现代包所需引入的js
*/
"modern": {
"js": [
// 删除此项将单独从框架加载源。
{
"path": "${framework.dir}/build/ext-modern-all-debug.js"
}
]
},
/**
* 所需引用css文件
* 单个格式如下
* {
* // 文件路径，如果本地文件，路径相对于此app.json文件
* //
* "path": "path/to/stylesheet.css", // REQUIRED
*
* //设置为true,表示这个文件是一个远程文件不会被复制，默认false
* "remote": false, // OPTIONAL
*
* // 如果没有指定，这个文件将只加载一次，
* // 缓存到localStorage里面，直到这个值被改变。
* //
* // - "delta" 增量更新此文件
* // - "full" 当文件改变时，完全更新此文件
* //
* "update": "" // OPTIONAL
* }
*/
"css": [
{
// 输出css路径
// 默认.sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": [ "fashion" ]
}
],
/**
* 应用加载配置
*
*/
"loader": {
// 缓存配置
//
// - true: 允许缓存
// - false: 禁用缓存
// - other:不明白
//
"cache": false,
// 缓存没有启用时传递的参数
"cacheParam": "_dc"
},
/**
* 打包命令相关配置
*/
"production": {
"output": {
"appCache": {
"enable": true,
"path": "cache.appcache"
}
},
"loader": {
"cache": "${build.timestamp}"
},
"cache": {
"enable": true
},
"compressor": {
"type": "yui"
}
},
/**
* Settings specific to testing builds.
*/
"testing": {
},
/**
* Settings specific to development builds.
*/
"development": {
"tags": [
// You can add this tag to enable Fashion when using app watch or
// you can add "?platformTags=fashion:1" to the URL to enable Fashion
// without changing this file.
//
// "fashion"
]
},
/**
* Controls the output structure of development-mode (bootstrap) artifacts. May
* be specified by a string:
*
* "bootstrap": "${app.dir}"
*
* This will adjust the base path for all bootstrap objects, or expanded into object
* form:
*
* "bootstrap": {
* "base": "${app.dir},
* "manifest": "bootstrap.json",
* "microloader": "bootstrap.js",
* "css": "bootstrap.css"
* }
*
* You can optionally exclude entries from the manifest. For example, to exclude
* the "loadOrder" (to help development load approximate a build) you can add:
*
* "bootstrap": {
* "manifest": {
* "path": "bootstrap.json",
* "exclude": "loadOrder"
* }
* }
*
*/
"bootstrap": {
"base": "${app.dir}",
"manifest": "${build.id}.json",
"microloader": "bootstrap.js",
"css": "bootstrap.css"
},
/**
* 输出配置，可以是字符串
* "${workspace.build.dir}/${build.environment}/${app.name}"
*
* 也可以是一个对象
*
* {
* "base": "${workspace.build.dir}/${build.environment}/${app.name}",
* "page": {
* "path": "../index.html",
* "enable": false
* },
* "css": "${app.output.resources}/${app.name}-all.css",
* "js": "app.js",
* "microloader": {
* "path": "microloader.js",
* "embed": true,
* "enable": true
* },
* "manifest": {
* "path": "app.json",
* "embed": false,
* "enable": "${app.output.microloader.enable}"
* },
* "resources": "resources",
* "slicer": {
* "path": "${app.output.resources}/images",
* "enable": false
* },
* // 是否禁用缓存
* "appCache":{
* "enable": false"
* }
* }
*
*/
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": "index.html",
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
/**
* 缓存配置
* "cache": {
* // 是否禁用缓存，为true将全局禁用
* "enable": false,
*
* // 全局配置
* // 设置为deltas，或者true表示增量更新
* // 不设置或者为false将禁用
* "deltas": "deltas"
* }
*/
"cache": {
"enable": false,
"deltas": "${build.id}/deltas"
},
/**
* 自动生成的缓存文件配置
*/
"appCache": {
/**
* 缓存目标
*/
"cache": [
"index.html"
],
/**
* 作用目录
*/
"network": [
"*"
],
/**
* 非作用目录？
*/
"fallback": [ ]
},
/**
* 项目生成时需要复制的资源文件
*/
"resources": [
{
"path": "resources",
"output": "shared"
},
{
"path": "${toolkit.name}/resources"
},
{
"path": "${build.id}/resources"
}
],
/**
* 打包时忽略对象的正则表达式
*/
"ignore": [
"(^|/)CVS(/?$|/.*?$)"
],
/**
* 储存之前项目缓存目录的文件夹路径
*/
"archivePath": "archive/${build.id}",
/**
* The space config object is used by the "sencha app publish" command to publish
* a version of this application to Sencha Web Application Manager:
* 不知道是啥
* "manager": {
* // the space id for this application
* "id": 12345,
*
* // space host
* "host": "https://api.space.sencha.com/json.rpc",
*
* // Either a zip file path or a folder to be zipped
* // this example shows how to publish the root folder for all build profiles
* "file": "${app.output.base}/../",
*
* // These may be specified here, but are best specified in your user
* // ~/.sencha/cmd/sencha.cfg file
* "apiKey": "",
* "secret": ""
* }
*/
/**
* 输出配置，可以配置不同的模版
*
* "builds": {
* "classic": {
* "toolkit": "classic",
* "theme": "theme-neptune"
* },
*
* "modern": {
* "toolkit": "modern",
* "theme": "theme-neptune"
* }
* }
*
*/
"builds": {
"classic": {
"toolkit": "classic",
"theme": "theme-triton",
"sass": {
// "save": "classic/sass/save.scss"
}
},
"modern": {
"toolkit": "modern",
"theme": "theme-triton",
"sass": {
// "save": "modern/sass/save.scss"
}
}
},
/**
* 唯一ID，作为localStorage前缀。
* 通常情况下，你不应该改变这个值。
*/
"id": "ebe06ef3-c353-495d-90ff-b3ca72030352"
}
打包之后的项目结构就是这样，如图
这种开发模式可以很方便的同时开发pc端和移动端
如果我们只是单独开发pc端或者移动端，在创建的时候我们可以根据需求这样加入classic或者modern命令
::创建pc端应用
sencha -sdk D:\ASPX\ext-premium-6.0.1\ext-6.0.1 generate app --classic app D:\ASPX\Test\www
项目结构如下：
打包后如下：
::创建移动端应用
sencha -sdk D:\ASPX\ext-premium-6.0.1\ext-6.0.1 generate app --modern app D:\ASPX\Test\www
项目结构如下：
打包后如下：
这样和以前也没啥区别了