Sencha Touch 2 類別定義

原本想找看看有沒有比較好的 Sencha Touch 2 的教學或書籍, 後來發現官方的文件已經足夠。這裡的記錄純粹是個人備忘, 以下內容皆參考 How to Use Classes in Sencha Touch。

Sencha Touch 2 的類別定義承襲 ExtJS 的做法, 使用 Object 來設定。

Ext.define('類別名', 設定用物件);

類別寫法:

Ext.define('lin.shinder.Animal', {
    config: {
        name: null
    },

    constructor: function(config) {
        this.initConfig(config);
    },

    speak: function() {
        alert('grunt');
    }
});

• 套件名稱和類別名稱直接在 define() 第一個參數裡設定。
• constructor 顧名思義為建構函式
• config 用來設定公開屬性

Sencha Touch 2 初體驗

使用過 jQuery Mobile 後，其缺點很容易就看出來。在比較複雜的情況，jQuery Mobile 並不好使，所以尋找較佳的解決方案，看了看就看到 Sencha Touch。個人沒用過 ExtJS，當然對 Sencha Touch 也沒什麼概念，不過其 example 倒是很吸引人。

Sencha Touch 承襲了 ExtJS 的風格，MVC 全部以 code 的方式來呈現，並以 JSON style 的方式撰寫。一開始看還真的很不習慣。

參考 Getting Started with Sencha Touch 2

開發所需工具（在 Mac 上）：

• Web server: MAMP
• Webkit browser: Google Chrome
• Text editor: Sublime Text 2 （看自己偏好）
• Sencha Touch SDK （2.1.1 目前商業版依然免費）
• Sencha Cmd （3.0.2 需要 JRE 或 JDK）

Sencha Touch SDK 解壓縮後目錄 touch-2.1.1 放在 Document Root (htdocs)。

Sencha Cmd 安裝在 /Users/USER/bin 內。

以 Command line 建立專案：

htdocs shinder$ cd touch-2.1.1/
touch-2.1.1 shinder$ sencha generate app GS ../GS
Sencha Cmd v3.0.2.288
[INF] ...  

等跑完後，即完成專案的建立。查看 app/view/Main.js 的內容。