Javascript - ExtJs - 類

標籤：建議   vbox   原型繼承   har   stop   方法   hello   hid   封裝   

類（Class）

preparation！

我用的是ext-4.2，解壓後會得到以下檔案

學習要用到的檔案很少，現在保留以下檔案和整個檔案夾，然後刪除其它檔案並保持目錄結構。本頁面底部有提供基礎包的下載。

在aspx頁面中引入必要的Extjs檔案，ext-all-dev可以不引人，但它作為調試使用，so建議保留。

測試一下程式是否能跑起來。

<script type="text/javascript">    Ext.onReady(function () {        Ext.MessageBox.alert("title","hello");    });</script>

View Code

類

自訂類型

ExtJs允許你基於它提供的方法建立自訂的類型，建立自訂類型使用Ext的define方法。 所有使用define方法註冊的類，其執行個體的屬性、方法都是從原型上獲得而非從建構函式獲得。構造器只用於初始化配置資訊，將屬性、方法綁定到執行個體上。 

Ext.define(x,y)

x是自訂類，y是匿名對象用於設定類成員。

<script type="text/javascript">    //參數1是命名空間.類名    //參數2是類的成員，成員全部放在匿名對象中，    //匿名對象一般設定兩個屬性，    //一個屬性是config，表示配置資訊，它用於儲存物件的屬性和方法    //一個屬性是constructor，表示類的建構函式    //要使config的屬性、方法成為類執行個體的屬性、方法就需要使用initConfig初始化它們    Ext.onReady(function () {        Ext.define("Yin.Person", {            config: {                name: "預設",                age: 20,                say: function () { Ext.MessageBox.alert("",this.name+this.age); },            },            constructor: function (config) {                this.initConfig(config);            }        });        //new對象時會調用constructor構造器初始化config配置資訊        var person = new Yin.Person({            name: "寒食",            age:32        });        person.say();//寒食32        alert(Yin.Person.prototype.hasOwnProperty("say"));//true say方法屬於Person類的原型對象的方法        alert(Yin.Person.prototype.hasOwnProperty("name"));//true name屬性屬於Person類的原型對象的屬性        alert(Yin.Person.prototype.hasOwnProperty("age"));//true age屬性屬於Person類的原型對象的屬性    });    </script>

View Code

initConfig從哪裡來的？解析器會在該對象上去尋找initConfig方法，如果找不到就會去原型鏈上尋找，所以initConfig可以確定是來自類的原型對象，通過調用原型的initConfig方法，該方法內部會將config進行遍曆，接著逐一取出每個屬性，然後賦給原型對象自己。所以類的執行個體對象正是通過原型繼承的原理得到了這些成員。另外，如果我們在new對象時，沒有設定config，那麼在構造器中，this.initConfig(config);又是如何初始化name、age和say的呢？原因很簡單，config屬性和constructor屬性處於同一個塊（範圍）裡，所以，如果你執行個體化Person類時沒有顯示指定config，那麼構造器中的config就來自與它處於同一範圍的config屬性。 

get和set訪問器 

使用Ext的define方法建立的類會獲得Ext原型對象上定義的get、set訪問器，專用於擷取（get）和設定（set）對象的屬性或方法，注意一旦通過set訪問器修改了屬性或方法的代碼邏輯，那麼被修改過的屬性或方法就會自動變成當前對象的原產生員（這是經本人測試後的理解，不保證正確）。

person.getName();//返回寒食person.getAge();//返回32person.getSay();//返回say方法person.setName("sam");//修改值person.setAge(50);//修改值person.setSay(function () {//修改方法    Ext.MessageBox.alert("", "我叫："+this.name +"年齡："+ this.age);});

View Code

類繼承

extend:z

z是父類

類繼承同樣可以使用Ext的define方法來完成，只需要在參數二（匿名函數）中指示extend屬性，它表示當前類將從extend指向的類處派生。 我們假設X要從Y派生，X的extend就應該指向Y，X如何獲得Y的成員？Y.prototype會將自身的成員copy給X.prototype，就這麼簡單。

<script type="text/javascript">    Ext.onReady(function () {        //建立Person類        Ext.define("Yin.Person", {            config: {                name: "預設",                age: 20,                say: function () { Ext.MessageBox.alert("",this.name+this.age); },            },            constructor: function (config) {                this.initConfig(config);            }        });                      //建立Man類        Ext.define("Yin.Man", {            extend: "Yin.Person",//指示派生自Yin.Person類            contructor: function () {                this.initConfig();            }        });        var man = new Yin.Man();        man.say();//繼承了Person的say方法    });    </script>

View Code

對象繼承

對象繼承使用Ext.apply方法，與類繼承類似，X對象要從Y對象繼承實際上是直接將Y對象的成員完全copy給X，如果X已經有與Y同名的成員，則會發生新覆蓋舊。如果不想覆蓋，可使用Ext.applyIf。

var obj = { gender: "男" };var obj2 = { name: "sam" }Ext.apply(obj2, obj);alert(obj2.gender);

View Code

類多重繼承

mixins:[x1,x2]

x是類名

Ext為瞭解決類只能派生自一個類，而不能從多個類派生的問題，使用了混入mixins，實際上就是將多個類的prototype的成員copy給需要多重繼承的類。

Ext.onReady(function () {    Ext.define("Yin.Person", {        config:{name:"寒食"},        constructor: function (config) { this.initConfig(config);}    });    Ext.define("Yin.Employee", {        config: { job: "設計" },        constructor: function (config) { this.initConfig(config);}    });    Ext.define("Yin.Husband", {        config: { age: "32" },        constructor: function (config) { this.initConfig(config); }    });    Ext.define("Yin.Man", {        extend: Yin.Person,        mixins: ["Yin.Employee", "Yin.Husband"]    });    var man = new Yin.Man();    var name=man.name;//寒食    var age=man.age;//32});

View Code

靜態成員

statics:{ }

如果要為類定義靜態成員可使用statics。 

Ext.define("Yin.Person", {    statics:{        ancestor:"monkey"    },    config:{name:"寒食"},    constructor: function (config) { this.initConfig(config);}});Yin.Person.ancestor//monkey

View Code

ExtJs組件類

學習ExtJs主要就是學習配置、組合各種組件，所以對於利用物件導向的思維去建立自訂類這種形式肯定顯得不太有那個必要。

Ext.Component類

ExtJs中的所有可視化組件全都派生自Ext.Component，該類有一些最基本的屬性用於控制呈現在html上的組件的樣式，比如我們要渲染一個灰色的盒子到html頁面，可如下設定：

<div id="divBox"></div><script type="text/javascript">    Ext.onReady(function () {        var box = new Ext.Component({            el: "divBox",            style: "background-color:#1E1E1E;margin:200px auto;",            width:100,            height:40        });        box.render();    });</script>

View Code

Ext.Container類

派生自Ext.Component類，它提供兩個及其重要的參數：layout和items。

Container的屬性

layout : border | 

指示組件如何在html上布局。

items : [ obj , obj ]

指示當前組件的所有子組件，子組件以{ }的形式出現。

items的屬性

xtype : 組件的字元表示

指示子組件是哪種類型，取值是首字母小寫組件名字。以前你可能指示items時會直接new出子組件，現在只需要指示xtype即可，比如要在當前組件中建立一個Panel組件： 

//以前的寫法items: [    new Ext.Panel({title:"主題",region:‘north‘}),    new Ext.Panel({ title: "菜單", region: ‘west‘,width:100} )]//如今的寫法items: [    { xtype: ‘panel‘, region: ‘north‘ ,title:"主題" },    { xtype: ‘panel‘, region: ‘west‘, title:"菜單",width: 100 }]

View Code

Ext.Util.observable類

只有繼承了Ext.Util.observable的組件會擁有事件，作為程式員幾乎只需要處理滑鼠鍵盤表單文檔載入等事件，所以此處略過。

Ext.EventObjectImpl類

Javascript的Event事件對象被ExtJs封裝為Ext.EventObjectImpl，該類整合了自訂事件、瀏覽器事件和Dom文檔事件，所以擁有事件的組件、ExtJs對象、Dom對象都會繼承EventObjectImpl，我們可以在事件發生時通過組件繼承EventObjectImpl所得到的屬性和方法去執行一系列的操作。

Ext.EventObjectImpl的方法

getX( ) | getY( )  | getXY( )

擷取事件發生時，觸發事件的對象在文檔中的x、y座標。最後一個方法返回數組，getXY( )[0]得到x座標，getXY( )[1]得到y座標。

getTarget( )

擷取觸發事件的來源物件。

preventDefault( bool )

是否阻止瀏覽器預設動作。

stopPropagation( bool )

是否阻止事件冒泡。似乎Jquery和ExtJs都不支援事件圍捕。

stopEvent( )

立即停止事件。該方法內部自動調用preventDefault()和stopPropagation()兩個函數,取消瀏覽器的預設操作,同時停止事件冒泡。 

purgeElement( )

清除該對象上鎖綁定的所有事件。

on | un

綁定事件監聽（偵聽）器、取消事件監聽（偵聽）器。 

<input id="test" type="text" /><script type="text/javascript">    Ext.onReady(function () {        //e就是觸發事件的對象，此處e表示鍵盤，e是Ext.EventObjectImpl的執行個體        Ext.get("test").on("keypress", function (e) {            if (e.charCode == e.SPACE) {                Ext.MessageBox.alert("","你按下了空格鍵位");            }        });    });</script>

View Code

 

ExtJs4.2基礎包↓

Javascript - 學習總目錄

Javascript - ExtJs - 類