Ext.define (ExtJS 4 二)

以下為了方便，就不貼Ext.onReady了
文件要在 Ext (最上面) 點一下即可
Ext.define 是定義類別的(最後沒有d)，可以使用 Ext.create 和 new 的方式使用這個類

※一、使用Ext.create

Ext.define("xxx.ooo", { 
    aaa : "a1",
    bbb : "b1",
    ccc : function(){
        return this.aaa + " " + this.bbb;
    }
});
    
var a = Ext.create("xxx.ooo");
Ext.Msg.alert("標題", "我是" + a.aaa, function(){
    // var a = Ext.create("xxx.ooo"); 不能寫在裡面
    Ext.Msg.alert("call back 標題", a.ccc());
});

※

※覆蓋

Ext.define("xxx.ooo", { 
    aaa : "a1",
    bbb : "b1"
});
    
Ext.define("xxx.ooo", { 
    aaa : "a2"
});
    
var obj = new xxx.ooo();
alert(obj.aaa); // a2
alert(obj.bbb); // undefined

※因為後者蓋前者，所以 obj.bbb 就沒有了

※setter/getter (config)

Ext.define("xxx.ooo", {
    config : {
        ddd : 'abc',
        eee : 'def'
    }
});
    
var a = Ext.create("xxx.ooo");
    
alert(a.getDdd()); // abc
a.setDdd('aaa');
alert(a.getDdd()); // aaa

※使用內鍵的 config 就可以做到 setter/getter

※二、使用new

Ext.define("xxx.ooo", { 
    aaa : "a1",
    bbb : "b1"
});
    
var obj = new xxx.ooo();
alert(obj.message); // undefined
obj.message = 'msg';
alert(obj.message); // msg
alert(obj.aaa); // a1

※

※繼承 (extend)

Ext.define("xxx.ooo", { 
    aaa : "a1",
    bbb : "b1"
});
    
Ext.define("xxx.ooo.qqq", { 
    extend: 'xxx.ooo' // 最後沒有「s」，最後也不可加「;」
});
    
var obj = new xxx.ooo.qqq();
alert(obj.aaa); // a1
alert(new xxx.ooo.qqq().bbb); // b1

※使用內鍵的 extend 可以做到繼承

※因為繼承的關係，所以 aaa 和 bbb 還是有值

※靜態屬性、靜態方法 (statics、inheritableStatics)

Ext.define("xxx.ooo", { 
    aaa : "a1",
    statics : { // statics，後面有「s」
        bbb : "b1",
        ccc : function(){
            return 'ccc';
        }
    }, 
    inheritableStatics : {
        ddd : "d1",
        eee : function(){
            return 'eee';
        }
    }
});
    
var obj = new xxx.ooo();
alert(obj.aaa); // a1
alert(xxx.ooo.bbb); // b1
alert(xxx.ooo.ccc()); // ccc
// alert(obj.ccc()); // Uncaught TypeError: obj.ccc is not a function
alert(obj.bbb); // undefined
    
alert(xxx.ooo.ddd); // d1
alert(xxx.ooo.eee()); // eee
// alert(obj.ddd()); // Uncaught TypeError: obj.ddd is not a function
alert(obj.eee); // undefined

※使用內鍵的 statics 和 inheritableStatics 可以做到靜態

※靜態屬性沒有時是 undefined，但靜態方法沒有時會報錯，以下無法執行

※statics 和 inheritableStatics 差異

Ext.define("xxx.ooo", { 
    aaa : "a1",
    statics : { // statics，後面有「s」
        bbb : "b1",
        ccc : function(){
            return 'ccc';
        }
    }, 
    inheritableStatics : {
        ddd : "d1",
        eee : function(){
            return 'eee';
        }
    }
});
    
Ext.define("xxx.ooo.qqq", {
    extend: 'xxx.ooo' //最後不可加「;」
});
    
alert(xxx.ooo.qqq.bbb); // undefined
// alert(xxx.ooo.qqq.ccc()); // Uncaught TypeError: xxx.ooo.qqq.ccc is not a function
    
alert(xxx.ooo.qqq.ddd); // d1
alert(xxx.ooo.qqq.eee()); // eee

※statics 無法被繼承；而inheritableStatics可以

※別名 (alias)

Ext.define("xxx.ooo", {
    aaa : "a1",
    alias : 'xo'
});
    
var a = Ext.create('xo');
alert(a.aaa);
// alert(new xo()); // Uncaught ReferenceError: xo is not defined

※通過關鍵字 alias 即可達成，但只適用在Ext.create

※備用類別名稱 (alternateClassName)

Ext.define("xxx.ooo", {
    aaa : 'a1',
    alternateClassName: ['zzz', 'yyy.zzz']
});
    
alert(new xxx.ooo().aaa); // a1
alert(new zzz().aaa); // a1
alert(new yyy.zzz().aaa); // a1
alert(Ext.create('yyy.zzz').aaa); // a1

※比 alias 好，使用 new 和Ext.create 都可以

※建構子 (constructor)

Ext.define("xxx.ooo", {
    aaa : 'default aaa',
    bbb : 'default bbb',
    constructor : function(aaa) {
        this.aaa = aaa;
    },
    constructor : function(aaa, bbb) {
        this.aaa = aaa;
        this.bbb = bbb;
    }
});
    
var obj1 = new xxx.ooo();
alert(obj1.aaa); // undefined
alert(obj1.bbb); // undefined
    
var obj2 = new xxx.ooo('a');
alert(obj2.aaa); // a
alert(obj2.bbb); // undefined
    
var obj3 = new xxx.ooo('a', 'b');
alert(obj3.aaa); // a
alert(obj3.bbb); // b

※注意沒有參數的建構子，屬性都是 undefined，如果沒有加 constructor，可以得到 default aaa和 default bbb




※還有其他內鍵的，在左邊點 Class 即可看見，有 10 個