第一步使用sencha touch cmd 4.0 創建項目、打包（加入全局變量、公用類、自定義擴展、資源文件）

本文轉載自查看原文 2013-11-13 10:42 9349 sencha touch與cordova

參考資料：

http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html

http://www.admin10000.com/document/140.html

這里我主要講的是如何加入全局變量、公用類、自定義擴展、資源文件

官網地址：http://www.sencha.com/products/touch/

官當最新doc：http://docs.sencha.com/touch/

1.環境搭建

　　a.安裝java

　　　　先下載JAVA，下載地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html

　　　　安裝到指定路徑，例如F:\Java

　　　　打開計算機屬性——高級系統設置——環境變量（如上文）

　　　　配置環境變量

　　　　　　變量： JAVA_HOME 值：安裝路徑：F:\Java\jdk1.6.0_10

　　　　　　變量： Path 添加值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

　　　　　　變量： CLASSPATH 添加值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

　　　　JAVA配置完成，接下來驗證配置是否成功。

　　　　擊運行——輸入cmd——回車——輸入javac——回車，，如果出現一堆英文，如下圖所示，即表示配置成功。

　　b.安裝cmd

　　　　再下載 sencha touch 的sdk （一個js壓縮包），現在最新的版本為2.3，我用的2.2.1版本

　　　　下載地址：http://www.sencha.com/products/touch/download/

　　　　然后下載 sencha touch cmd，一個工具，主要用來創建項目、生成測試包、部署包等，我用的4.0版本

　　　　下載地址：http://www.sencha.com/products/sencha-cmd/download/

　　c.安裝ruby

　　　　用 sencha touch cmd 生成測試包或部署包時調用的命令需要ruby，主要用來做js和css壓縮

　　　　下載地址：http://rubyinstaller.org/ （ps：需要下載1.93的版本，不要下載2.0的版本）

　　　　安裝過程出現如下界面。如圖

　　　　有3個選項分別是：(1) 是否安裝tclTk支持。(2) 添加ruby命令路徑到系統環境變量PATH。(3)是否將 .rb 和.rbw 文件關聯到Ruby。

　　　　這里選擇第二項即可

　　　　安裝之后測試cmd 是否安裝成功

　　　　運行-》cmd ；輸入sencha，看到下面的就說明cmd安裝好了

　　　　檢測當前cmd版本

　　　　sencha upgrade --check

　　　　更新cmd

　　　　sencha upgrade

　　　　如果你想升級到測試版

　　　　sencha upgrade --check --beta

　　　　sencha upgrade --beta

2.創建項目：

在cmd中輸入以下命令
sencha -sdk D:\ASPX\touch-2.2.1 generate app app D:\ASPX\Test

D:\ASPX\touch-2.2.1:你選擇的sdk根目錄

app D:\ASPX\Test：在指定目錄創建一個項目，命名空間為app

在谷歌瀏覽器中可以直接運行，不必搭建服務器。

如果開發過程中涉及到跨域問題，可以如下處理

找到谷歌瀏覽器，為其創建一個快捷方式，加入以下命令。--disable-web-security

關閉所有已經打開的谷歌瀏覽器，然后用你創建的快捷方式再次打開

把項目中index.html文件拖入即可。

3.加入全局變量以及公用類js

這是一個簡略的開發環境

如圖在app文件夾中加入config.js(全局變量),util.js(公用類)

他們的代碼分別如下

 1 /*
 2 *所有配置信息
 3 */
 4 Ext.define('app.config', {
 5     alternateClassName: 'config', //設置別名是為了方便調用，這樣直接config.weather就能獲取到變量。
 6     statics: {
 7         //天氣預報接口
 8         weather: 'http://www.weather.com.cn/data/cityinfo/101210904.html',
 9         //博客園
10         Cnblogs: 'http://www.cnblogs.com/mlzs/rss'
11     }
12 });

  1 /*公共類*/
  2 Ext.define('app.util', {
  3     alternateClassName: 'util',
  4     statics: {
  5         //加載stroe
  6         storeLoad: function(id) {
  7             var store = Ext.getStore(id);
  8             if (store.getCount() < 1) {
  9                 store.load();
 10             }
 11         },
 12         //Viewport添加新項,Viewport之中始終只有一項
 13         ePush: function(xtype) {
 14             var me = Ext.Viewport,
 15             view = me.getActiveItem();
 16             if (view && view.getItemId() == xtype) {
 17                 return;
 18             }
 19             view = Ext.create(xtype, {
 20                 itemId: xtype
 21             });
 22             //切換
 23             me.animateActiveItem(view, {
 24                 type: 'slide',
 25                 direction: 'left'
 26             });
 27         },
 28         //監控Viewport界面切換,切換時銷毀舊項
 29         eActiveitemchange: function() {
 30             var me = Ext.Viewport;
 31             me.onAfter('activeitemchange',
 32             function(t, value, oldValue, eOpts) {
 33                 if (oldValue) {
 34                     //強制銷毀，防止銷毀不完全引發錯誤
 35                     me.remove(oldValue, true);
 36                 }
 37             });
 38         },
 39         /*為Ext.Viewport添加一個消息提示組件*/
 40         addMessage: function() {
 41             Ext.Viewport.setMasked({
 42                 xtype: 'loadmask',
 43                 cls: 'message',
 44                 transparent: true,
 45                 indicator: false
 46             });
 47             this.hideMessage();
 48         },
 49         /*顯示一個消息提示*/
 50         showMessage: function(mes, autoHide) {
 51             var me = this,
 52             message = this.getMessage();
 53             message.setMessage(mes);
 54             message.show();
 55             //是否自動關閉提示
 56             if (autoHide) {
 57                 setTimeout(function() {
 58                     message.hide();
 59                 },
 60                 500);
 61             }
 62         },
 63         /*隱藏消息提示*/
 64         hideMessage: function() {
 65             this.getMessage().hide();
 66         },
 67         //消息組件
 68         getMessage: function() {
 69             return Ext.Viewport.getMasked();
 70         },
 71         //重寫ajax
 72         overrideAjax: function() {
 73             var me = this;
 74             //開始加載
 75             Ext.Ajax.on('beforerequest',
 76             function(connection, options) {
 77                 if (!options.hidMessage) {
 78                     me.showMessage('正在努力加載中...');
 79                 }
 80             });
 81             //加載成功
 82             Ext.Ajax.on('requestcomplete',
 83             function(connection, options) {
 84                 me.hideMessage();
 85             });
 86             //加載失敗
 87             Ext.Ajax.on('requestexception',
 88             function(connection, options) {
 89                 if (!options.hidMessage) {
 90                     me.showMessage('加載失敗，請稍后再試...', true);
 91                 }
 92             });
 93         },
 94         //重寫list
 95         overrideList: function() {
 96             //重寫分頁插件
 97             Ext.define("Ext.zh.plugin.ListPaging", {
 98                 override: "Ext.plugin.ListPaging",
 99                 config: {
100                     //自動加載
101                     autoPaging: true,
102                     //滾動到最底部時是否自動加載下一頁數據
103                     noMoreRecordsText: '沒有更多內容了',
104                     loadMoreText: '加載更多...' //加載更多按鈕顯示內容
105                 }
106             });
107             //重寫List
108             Ext.define("Ext.zh.List", {
109                 override: "Ext.List",
110                 config: {
111                     //取消選擇效果
112                     selectedCls: '',
113                     //禁用加載遮罩，防止跳轉時頁面卡頓，使用統一的遮罩效果
114                     loadingText: false,
115                     emptyText: '沒有更多內容了'
116                 }
117             });
118         },
119         //app初始化執行
120         inIt: function() {
121             this.eActiveitemchange();
122             this.overrideList();
123             this.overrideAjax();
124             this.addMessage();
125         }
126     }
127 });

直接utli.inIt();

config.weather就可以直接使用

創建一個ux文件夾，里面放置擴展插件。例如：

 1 /*
 2 *模仿tabpanel導航欄
 3 */
 4 Ext.define('ux.TabBar', {
 5     alternateClassName: 'tabBar',
 6     extend: 'Ext.Toolbar',
 7     xtype: 'tabBar',
 8     config: {
 9         docked: 'bottom',
10         cls: 'navToolbar',
11         layout: {
12             align: 'stretch'
13         },
14         defaults: {
15             flex: 1
16         },
17         //被選中的按鈕
18         selectButton: null
19     },
20     initialize: function () {
21         var me = this;
22         me.callParent();
23         //監聽按鈕點擊事件
24         me.on({
25             delegate: '> button',
26             scope: me,
27             tap: 'onButtonTap'
28         });
29     },
30     //更新被選中按鈕
31     updateSelectButton: function (newItem, oldItem) {
32         if (oldItem) {
33             oldItem.removeCls('x-tabBar-pressing');
34         }
35         if (newItem) {
36             newItem.addCls('x-tabBar-pressing');
37         }
38     },
39     //當按鈕被點擊時
40     onButtonTap: function (button) {
41         if (!button.getInitialConfig('noSelect')) {
42             this.setSelectButton(button);
43         }
44     },
45     /**
46     * @private 
47     *執行添加項，調用add方法后自動執行
48     */
49     onItemAdd: function (item, index) {
50         if (!this.getSelectButton() && item.getInitialConfig('selected')) {
51             this.setSelectButton(item);
52         }
53         this.callParent(arguments);
54     }
55 });

在app.js中需要加入

 1 //指定ux起調目錄
 2 Ext.Loader.setPath({
 3     'ux': 'app/ux'
 4 });
 5 //簡略寫法
 6 Ext.application({
 7     name: 'app',
 8     appFolder: 'app',
 9     controllers: ['Main', 'Panel', 'Layout', 'List'],
10     requires: ['app.config', 'app.util'],
11     launch: function () {
12         util.inIt();
13     }
14 });

這樣就可以通過ux.TabBar來使用自定義控件了

例如：

 1 Ext.define('app.view.MyBar', {
 2     alternateClassName: 'myBar',
 3     extend: 'ux.TabBar',
 4     xtype: 'myBar',
 5     requires: ['app.view.About'],
 6     config: {
 7         items: [
 8         {
 9             xtype: 'button',
10             text: '首頁',
11             //只有第一個設置的屬性有效
12             selected: true,
13             action: 'redirect',
14             redirect: 'home'
15         },
16         {
17             xtype: 'button',
18             text: '關於',
19             action: 'redirect',
20             redirect: 'about'
21         },
22         {
23             xtype: 'button',
24             text: '其他',
25             //沒有選中效果
26             noSelect:true,
27             action: 'other'
28         }]
29     }
30 });

下面是資源文件的引入

在app.json文件中：

通過resources來配置資源文件，這樣使用cmd打包時才會將資源文件復制到生成的項目中

下面是我的app.json,其中有我對各個配置的理解

  1 {
  2     /**
  3      * 項目的命名空間
  4      */
  5     "name": "app",
  6     /**
  7      * 項目起始html文件，路徑相對於此app.json文件
  8      */
  9     "indexHtmlPath": "index.html",
 10     /**
 11      * 運行此項目的url路徑，比如: "http://localhost/myapp/index.html".
 12      *
 13      *當設置此值時，將不能通過文件系統直接訪問。
 14      */
 15     "url": null,
 16     /**
 17      * 所需引用js文件
 18      * 單個格式如下
 19      *      {
 20      *          "path": "path/to/script.js" // 文件路徑，如果本地文件，路徑相對於此app.json文件
 21      *          "remote": true              // (可選值)
 22      *                                      // -默認值為"false"
 23      *                                      // -"true"，如果這個文件是一個遠程文件不會被復制
 24      *          "update": "delta"           // (可選值)
 25      *                                      // 如果沒有指定，這個文件將只加載一次，
 26      *                                        // 緩存到localStorage里面，直到這個值被改變。
 27      *                                      //  - "delta" 增量更新此文件
 28      *                                      //  - "full" 當文件改變時，完全更新此文件
 29      *          "x-bootstrap": true         // (可選值)
 30      *                                      // 表示這是項目依賴文件。
 31      *                                      // 該文件不會被復制到生成目錄或引用
 32      *
 33      *      }
 34      */
 35     "js": [{
 36         "path": "touch/sencha-touch.js",
 37         "x-bootstrap": true
 38     },
 39     {
 40         "path": "app.js",
 41         /* 表示所有的類生成到這個文件 */
 42         "bundle": true,
 43         "update": "delta"
 44     }],
 45     /**
 46      *所需引用js文件
 47      * 單個格式如下
 48      *      {
 49      *          "path": "path/to/script.js" // 文件路徑，如果本地文件，路徑相對於此app.json文件
 50      *          "remote": true              // (可選值)
 51      *                                      // -默認值為"false"
 52      *                                      // -"true"，如果這個文件是一個遠程文件不會被復制
 53      *          "update": "delta"           // (可選值)
 54      *                                      // 如果沒有指定，這個文件將只加載一次，
 55      *                                        // 緩存到localStorage里面，直到這個文件被改變。
 56      *                                      //  - "delta" 增量更新此文件
 57      *                                      //  - "full" 當文件改變時，完全更新此文件
 58      *
 59      *      }
 60      */
 61     "css": [{
 62         "path": "resources/css/app.css",
 63         "update": "delta"
 64     },
 65     {
 66         "path": "resources/css/main.css",
 67         "update": "delta"
 68     }],
 69     /**
 70      *項目生成時用於自動生成HTML5應用程序緩存清單（cache.manifest）
 71      */
 72     "appCache": {
 73         /**
 74          * 本地緩存名單
 75          */
 76         "cache": ["index.html"],
 77         /**
 78          * 網絡緩存名單
 79          */
 80         "network": ["*"],
 81         /**
 82          * FALLBACK緩存名單
 83          */
 84         "fallback": []
 85     },
 86     /**
 87      * 項目生成時需要復制的資源文件
 88      */
 89     "resources": ["resources/images", "resources/icons", "resources/startup"],
 90     /**
 91      * 項目生成時忽略的文件/目錄名稱匹配，必須是有效的正則表達式
 92      */
 93     "ignore": ["\.svn$"],
 94     /**
 95      * 之前生成項目儲存目錄，用於進行增量更新，不可隨意改變此目錄下的文件
 96      */
 97     "archivePath": "archive",
 98     /**
 99      * 在cmd創建時需要引用的類
100      */
101     "requires": [],
102     /**
103      * 唯一ID，作為localStorage前綴。
104      * 通常情況下，你不應該改變這個值。
105      */
106     "id": "d8504e05-a9fc-4692-bdbc-94c3190751f5"
107 }