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

時間 2019-11-19

標籤初探 ext sencha touch 升級版欄目 JavaScript 简体版

原文原文鏈接

Sencha Touch 如今已全面升級至Ext Js 6，那麼咱們如何使用他們呢？javascript

首先去官網下載最新的sdk和幫助文檔css

sdk下載地址：https://www.sencha.com/products/extjs/evaluate/html

如圖，這個是試用版下載地址，試用版和正版的區別大概就是試用版有試用標記水印吧，大概是吧。java

官方api下載地址：http://docs.sencha.com/extjs/6.0/正則表達式

這個就是官方的在線api了，想要下載就把鼠標移動到左上角的Ext JS Guides上面去，如圖json

選擇你想要下載的版本，點有括號的連接就能下載了。如圖bootstrap

若是不太瞭解api如何使用的同窗能夠參考如下文章：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 }