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 用來設定公開屬性

繼承方式:

Ext.define('lin.shinder.Human', {
    extend: 'lin.shinder.Animal',
    requires: 'Ext.MessageBox',

    constructor: function(config) {
        this.callParent([config]);
        //or this.callParent(arguments);
    },

    speak: function() {
        alert(this.getName());
    }
});

• extend 設定父類別, 注意 extend 後不加 s 。
• requires 用來引入類別, 注意 requires 後有加 s 。
• callParent 用來呼叫父類別的建構子。
• 這裡進行了 speak 方法的覆蓋。

在 config 裡定義的變數為屬性, 會自動產生 setter 和 getter 方法。若要客製化 setter 邏輯, 可以定義 apply 方法, 當 apply 方法有回傳值時, 才會設定。以下, 對應 title 的 apply 方法為 applyTitle。

Ext.define('My.own.Window', {
 /** @readonly */
 isWindow: true,

 config: {
     title: 'Title Here'
 },
 constructor: function(config) {
     this.initConfig(config);
 },
 applyTitle: function(title) {
     if (!Ext.isString(title) || title.length === 0) {
         console.log('Error: Title must be a valid non-empty string');
     }
     else {
         return title;
     }
 }
});

靜態成員使用 statics 宣告:

Ext.define('Computer', {
    statics: {
        instanceCount: 0,
        factory: function(brand) {
            return new this({brand: brand}); // 'this' in static methods refer to the class itself
        }
    },
    config: {
        brand: null
    },
    constructor: function(config) {
        this.initConfig(config);
        this.self.instanceCount ++; // the 'self' property of an instance refers to its class
    }
});

丟出錯誤:

throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');