初探 Ext JS 6 (sencha touch/ext升级版)

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的代码

 1 <!DOCTYPE HTML>
 2 <html manifest="">
 3 <head>
 4     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7 
 8     <title>app</title>
 9 
10     
11     <script type="text/javascript">
12         var Ext = Ext || {}; // Ext namespace won't be defined yet...
13 
14         // 在这里检测设备类型，根据类型决定调用那个模块
15         // 除了ext自带的现代版和经典版你还可以自定义一些模块
16         Ext.beforeLoad = function (tags) {
17             var s = location.search,  // the query string (ex "?foo=1&bar")
18                 profile;
19 
20             // For testing look for "?classic" or "?modern" in the URL to override
21             // device detection default.
22             //
23             if (s.match(/\bclassic\b/)) {
24                 profile = 'classic';
25             }
26             else if (s.match(/\bmodern\b/)) {
27                 profile = 'modern';
28             }
29             else {
30                 profile = tags.desktop ? 'classic' : 'modern';
31                 //profile = tags.phone ? 'modern' : 'classic';
32             }
33             //最后profile的值是啥，就调用那个模块
34             Ext.manifest = profile; // this name must match a build profile name
35 
36             // This function is called once the manifest is available but before
37             // any data is pulled from it.
38             //
39             //return function (manifest) {
40                 // peek at / modify the manifest object
41             //};
42         };
43     </script>
44     
45     
46     <!-- The line below must be kept intact for Sencha Cmd to build your application -->
47     <script id="microloader" data-app="95540398-5be2-4a4a-9cab-b172e28eb380" type="text/javascript" src="bootstrap.js"></script>
48 
49 </head>
50 <body></body>
51 </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发生了一些变化，具体说明看注释：

  1 {
  2     /**
  3      * 应用程序的命名空间。
  4      */
  5     "name": "app",
  6 
  7     /**
  8      * 应用程序的版本。
  9      */
 10     "version": "1.0.0.0",
 11 
 12     /**
 13      * 起始页面名称（后缀可以是HTML，JSP，ASP等）。
 14      */
 15     "indexHtmlPath": "index.html",
 16 
 17     /**
 18      * 项目文件路径，也就是默认的modern/src和classic/src
 19      */
 20     "classpath": [
 21         "app",
 22         "${toolkit.name}/src"
 23     ],
 24 
 25     /**
 26      * 重写类文件目录路径，也就是默认的modern/overrides和classic/overrides
 27      */
 28     "overrides": [
 29         "overrides",
 30         "${toolkit.name}/overrides"
 31     ],
 32 
 33     /**
 34      * The Sencha Framework for this application: "ext" or "touch".
 35      * 不知道做啥用的，改成touch之后无法打包了
 36      */
 37     "framework": "ext",
 38 
 39     /**
 40      * 默认没有这个配置，如果配置就可以指定打包模式 "classic" or "modern".
 41      */
 42     "toolkit": "modern",
 43 
 44     /**
 45      * 默认没有这个配置，应用的主题名称，不要随便乱写
 46      */
 47     /**
 48     "theme": "ext-theme-crisp",
 49     */
 50     /**
 51      * 需要的扩展包 ( 默认是最新的).
 52      *
 53      * 例如,
 54      *
 55      *      "requires": [
 56      *          "charts"
 57      *      ]
 58      */
 59     "requires": [
 60         "font-awesome"
 61     ],
 62 
 63     /**
 64      * 打包相关配置
 65      */
 66     "fashion": {
 67         "inliner": {
 68             /**
 69              * 是否禁用资源的内联。默认情况下不启用。
 70              * 不知道做啥的
 71              */
 72             "enable": false
 73         }
 74     },
 75 
 76     /**
 77      * Sass 相关配置.
 78      */
 79     "sass": {
 80         /**
 81          * 命名空间映射 
 82          */
 83         "namespace": "app",
 84 
 85         /**
 86          * File used to save sass variables edited via Sencha Inspector. This file
 87          * will automatically be applied to the end of the scss build.
 88          *
 89          *      "save": "sass/save.scss"
 90          *
 91          */
 92 
 93         /**
 94          * 默认全局scss样式路径
 95          *
 96          *      +-------+---------+
 97          *      |       | base    |
 98          *      | theme +---------+
 99          *      |       | derived |
100          *      +-------+---------+
101          *      | packages        |  (in package dependency order)
102          *      +-----------------+
103          *      | application     |
104          *      +-----------------+
105          */
106         "etc": [
107             "sass/etc/all.scss",
108             "${toolkit.name}/sass/etc/all.scss"
109         ],
110 
111         /**
112          * 默认全局scss 变量路径
113          *
114          *      +-------+---------+
115          *      |       | base    |
116          *      | theme +---------+
117          *      |       | derived |
118          *      +-------+---------+
119          *      | packages        |  (in package dependency order)
120          *      +-----------------+
121          *      | application     |
122          *      +-----------------+
123          *
124          * The "sass/var/all.scss" file is always included at the start of the var
125          * block before any files associated with JavaScript classes.
126          */
127         "var": [
128             "sass/var/all.scss",
129             "sass/var",
130             "${toolkit.name}/sass/var"
131         ],
132 
133         /**
134          *  默认全局scss 目录路径
135          *      +-------+---------+
136          *      |       | base    |
137          *      | theme +---------+
138          *      |       | derived |
139          *      +-------+---------+
140          *      | packages        |  (in package dependency order)
141          *      +-----------------+
142          *      | application     |
143          *      +-----------------+
144          */
145         "src": [
146             "sass/src",
147             "${toolkit.name}/sass/src"
148         ]
149     },
150 
151     /**
152      * 所需引用js文件
153      * 单个格式如下
154      *
155      *      {
156      *          // 文件路径，如果本地文件，路径相对于此app.json文件
157      *          //
158      *          "path": "path/to/script.js",   // REQUIRED
159      *
160      *          // 设置为true，表示所有的类生成到这个文件
161      *          //
162      *          "bundle": false,    // OPTIONAL
163      *
164      *          // 设置为true以包括级联的类文件。
165      *          // 不清楚含义
166      *          "includeInBundle": false,  // OPTIONAL
167      *
168      *          //设置为true,表示这个文件是一个远程文件不会被复制，默认false
169      *          "remote": false,    // OPTIONAL
170      *
171      *          // 如果没有指定，这个文件将只加载一次，
172      *          // 缓存到localStorage里面，直到这个值被改变。
173      *          //
174      *          //   - "delta" 增量更新此文件
175      *          //   - "full" 当文件改变时，完全更新此文件
176      *          //
177      *          "update": "",        // OPTIONAL
178      *
179      *          // 设置为true，表示这是项目依赖文件。
180      *          // 该文件不会被复制到生成目录或引用
181      *          "bootstrap": false   // OPTIONAL
182      *      }
183      *
184      */
185     "js": [
186         {
187             "path": "app.js",
188             "bundle": true
189         }
190     ],
191 
192     /**
193      *  经典包所需引入的js
194      */
195     "classic": {
196         "js": [
197             // 删除此项将单独从框架加载源。
198             {
199                 "path": "${framework.dir}/build/ext-all-rtl-debug.js"
200             }
201         ]
202     },
203 
204     /**
205      * 现代包所需引入的js
206      */
207     "modern": {
208         "js": [
209             // 删除此项将单独从框架加载源。
210             {
211                 "path": "${framework.dir}/build/ext-modern-all-debug.js"
212             }
213         ]
214     },
215 
216     /**
217      * 所需引用css文件
218      * 单个格式如下
219      *      {
220      *          // 文件路径，如果本地文件，路径相对于此app.json文件
221      *          //
222      *          "path": "path/to/stylesheet.css",   // REQUIRED
223      *
224      *          //设置为true,表示这个文件是一个远程文件不会被复制，默认false
225      *          "remote": false,    // OPTIONAL
226      *
227      *          // 如果没有指定，这个文件将只加载一次，
228      *          // 缓存到localStorage里面，直到这个值被改变。
229      *          //
230      *          //   - "delta" 增量更新此文件
231      *          //   - "full" 当文件改变时，完全更新此文件
232      *          //
233      *          "update": ""      // OPTIONAL
234      *      }
235      */
236     "css": [
237         {
238             // 输出css路径
239             // 默认.sencha/app/defaults.properties
240             "path": "${build.out.css.path}",
241             "bundle": true,
242             "exclude": [ "fashion" ]
243         }
244     ],
245 
246     /**
247      * 应用加载配置
248      *
249      */
250     "loader": {
251                 // 缓存配置
252         //
253         //   - true: 允许缓存 
254         //   - false: 禁用缓存
255         //   - other:不明白
256         //
257         "cache": false,
258 
259         // 缓存没有启用时传递的参数
260         "cacheParam": "_dc"
261     },
262 
263     /**
264      * 打包命令相关配置
265      */
266     "production": {
267         "output": {
268             "appCache": {
269                 "enable": true,
270                 "path": "cache.appcache"
271             }
272         },
273         "loader": {
274             "cache": "${build.timestamp}"
275         },
276         "cache": {
277             "enable": true
278         },
279         "compressor": {
280             "type": "yui"
281         }
282     },
283 
284     /**
285      * Settings specific to testing builds.
286      */
287     "testing": {
288     },
289 
290     /**
291      * Settings specific to development builds.
292      */
293     "development": {
294         "tags": [
295             // You can add this tag to enable Fashion when using app watch or
296             // you can add "?platformTags=fashion:1" to the URL to enable Fashion
297             // without changing this file.
298             //
299             // "fashion"
300         ]
301     },
302 
303     /**
304      * Controls the output structure of development-mode (bootstrap) artifacts. May
305      * be specified by a string:
306      *
307      *      "bootstrap": "${app.dir}"
308      *
309      * This will adjust the base path for all bootstrap objects, or expanded into object
310      * form:
311      *
312      *      "bootstrap": {
313      *          "base": "${app.dir},
314      *          "manifest": "bootstrap.json",
315      *          "microloader": "bootstrap.js",
316      *          "css": "bootstrap.css"
317      *      }
318      *
319      * You can optionally exclude entries from the manifest. For example, to exclude
320      * the "loadOrder" (to help development load approximate a build) you can add:
321      *
322      *      "bootstrap": {
323      *          "manifest": {
324      *              "path": "bootstrap.json",
325      *              "exclude": "loadOrder"
326      *          }
327      *      }
328      *
329      */
330     "bootstrap": {
331         "base": "${app.dir}",
332 
333         "manifest": "${build.id}.json",
334 
335         "microloader": "bootstrap.js",
336         "css": "bootstrap.css"
337     },
338 
339     /**
340      *  输出配置，可以是字符串
341      *      "${workspace.build.dir}/${build.environment}/${app.name}"
342      *
343      *  也可以是一个对象
344      *
345      *      {
346      *          "base": "${workspace.build.dir}/${build.environment}/${app.name}",
347      *          "page": {
348      *              "path": "../index.html",
349      *              "enable": false
350      *          },
351      *          "css": "${app.output.resources}/${app.name}-all.css",
352      *          "js": "app.js",
353      *          "microloader": {
354      *              "path": "microloader.js",
355      *              "embed": true,
356      *              "enable": true
357      *          },
358      *          "manifest": {
359      *              "path": "app.json",
360      *              "embed": false,
361      *              "enable": "${app.output.microloader.enable}"
362      *          },
363      *          "resources": "resources",
364      *          "slicer": {
365      *              "path": "${app.output.resources}/images",
366      *              "enable": false
367      *          },
368      *          // 是否禁用缓存
369      *          "appCache":{
370      *              "enable": false"
371      *          }
372      *      }
373      *
374      */
375 
376     "output": {
377         "base": "${workspace.build.dir}/${build.environment}/${app.name}",
378         "page": "index.html",
379         "manifest": "${build.id}.json",
380         "js": "${build.id}/app.js",
381         "appCache": {
382             "enable": false
383         },
384         "resources": {
385             "path": "${build.id}/resources",
386             "shared": "resources"
387         }
388     },
389 
390 
391     /**
392     *  缓存配置
393     *   "cache": {
394     *       // 是否禁用缓存，为true将全局禁用
395     *       "enable": false,
396     *
397     *       // 全局配置
398     *       // 设置为deltas，或者true表示增量更新
399     *       // 不设置或者为false将禁用
400     *       "deltas": "deltas"
401     *   }
402     */
403 
404     "cache": {
405         "enable": false,
406         "deltas": "${build.id}/deltas"
407     },
408 
409 
410     /**
411      * 自动生成的缓存文件配置
412      */
413     "appCache": {
414         /**
415          * 缓存目标
416          */
417         "cache": [
418             "index.html"
419         ],
420         /**
421          * 作用目录
422          */
423         "network": [
424             "*"
425         ],
426         /**
427          * 非作用目录？
428          */
429         "fallback": [ ]
430     },
431 
432     /**
433      * 项目生成时需要复制的资源文件
434      */
435     "resources": [
436         {
437             "path": "resources",
438             "output": "shared"
439         },
440         {
441             "path": "${toolkit.name}/resources"
442         },
443         {
444             "path": "${build.id}/resources"
445         }
446     ],
447 
448     /**
449      * 打包时忽略对象的正则表达式
450      */
451     "ignore": [
452         "(^|/)CVS(/?$|/.*?$)"
453     ],
454 
455     /**
456      *    储存之前项目缓存目录的文件夹路径
457      */
458 
459     "archivePath": "archive/${build.id}",
460 
461 
462 
463     /**
464      * The space config object is used by the "sencha app publish" command to publish
465      * a version of this application to Sencha Web Application Manager:
466      * 不知道是啥
467      *      "manager": {
468      *          // the space id for this application
469      *          "id": 12345,
470      *
471      *          // space host
472      *          "host": "https://api.space.sencha.com/json.rpc",
473      *
474      *          // Either a zip file path or a folder to be zipped
475      *          // this example shows how to publish the root folder for all build profiles
476      *          "file": "${app.output.base}/../",
477      *
478      *          // These may be specified here, but are best specified in your user
479      *          // ~/.sencha/cmd/sencha.cfg file
480      *          "apiKey": "",
481      *          "secret": ""
482      *      }
483      */
484 
485     /**
486      * 输出配置，可以配置不同的模版
487      *
488      *     "builds": {
489      *         "classic": {
490      *             "toolkit": "classic",
491      *             "theme": "theme-neptune"
492      *         },
493      *
494      *         "modern": {
495      *             "toolkit": "modern",
496      *             "theme": "theme-neptune"
497      *         }
498      *     }
499      *
500      */
501 
502     "builds": {
503         "classic": {
504             "toolkit": "classic",
505 
506             "theme": "theme-triton",
507 
508             "sass": {
509                 // "save": "classic/sass/save.scss"
510             }
511         },
512 
513         "modern": {
514             "toolkit": "modern",
515 
516             "theme": "theme-triton",
517 
518             "sass": {
519                 // "save": "modern/sass/save.scss"
520             }
521         }
522     },
523 
524 
525     /**
526      * 唯一ID，作为localStorage前缀。
527      * 通常情况下，你不应该改变这个值。
528      */
529     "id": "ebe06ef3-c353-495d-90ff-b3ca72030352"
530 }