-------------------------------------------------------------資源連結-----------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------

本篇指導旨在給想要建立或者從EXT JS 4.X或者EXT JS 5.X繼承已有類的任何開發者的。

概述

-------

EXT JS 5自帶了有超過300的類，到目前為止有200多萬的開發者在使用extjs開發，他們來自不同的地方，有不同的背景。所以這樣說來，在提供一份公共程式碼結構上我們就面臨著一個巨大的挑戰，這些程式碼結構是：

1.大家都熟悉瞭解，簡單容易學習

2.開發迅速，除錯方便，部署的時候也沒有痛苦

3.有組織的，可擴充套件的，並且是可維護的

JavaScript是面向原型的類語言，其中一個最強大的功能就是自由，有好多的解決方案，可以使用不同的編碼風格還有技術問題，但是這樣就會以不可預知為代價了。沒有一個統一的結構，javascript程式碼就很難理解，很難維護並且不好複用。

另一方面，基於類的程式設計仍然是最流行的面向物件的程式設計模式，基於類的語言通常需要強型別，封裝和標準的編碼慣例，通過讓開發人員堅持大量的原則,程式碼更可能是可預測的,可擴充套件和可伸縮。然而,這個模型沒有JavaScript的動態能力。

每個方法都有優點和缺點,但是我們可以保持好的而壞的部分同時隱藏?答案是肯定的,你可以在Ext JS找到解決方案。

命名約定

  在程式碼中使用一致的命名慣例基礎類、名稱空間和檔名可以幫助組織你的程式碼,結構化和可讀性。

  類命名約定

  類名只能包含字母數字字元。數字被允許但是不被鼓勵，除非他們屬於一個技術術語。不要使用下劃線、連字元或其他任何非字母數字字元。例如:

MyCompany.useful_util.Debug_Toolbar

這個是被推薦的

MyCompany.util.Base64 

這個是可以接受的  類名應該打包到像使用物件屬性(.)一樣的適當的名稱空間中。類名至少應該有一個獨特的頂級名稱空間中緊隨其後。例如:

MyCompany.data.CoolProxy
MyCompany.Application

頂級名稱空間和實際的類名應該駝峰模式其它一切應該都小寫，例如:

MyCompany.form.action.AutoLoad

不是使用sencha生成的類儘量不要使用Ext作為頂級空間。縮略詞也應該遵守駝峰預約定，如：使用Ext.data.JsonProxy 而不是 Ext.data.JSONProxy
使用 MyCompany.util.HtmlParser 而不是MyCompary.parser.HTMLParser
使用MyCompany.server.Http 而不是 MyCompany.server.HTTP

原始檔命名約定

類的名稱直接對映到它們儲存的檔案路徑。因此,必須只有一個類檔案。例如:
Ext.util.Observable 是在如下目錄儲存的 path/to/src/Ext/util/Observable.js
Ext.form.action.Submit 是在如下目錄儲存的 path/to/src/Ext/form/action/Submit.js
MyCompany.chart.axis.Numeric 是在如下目錄儲存的 path/to/src/MyCompany/chart/axis/Numeric.js
path/to/src是應用程式的類路徑。所有類應該在這種共同的根下，,應該給予適當的名稱空間以便可以最好的開發、維護和部署。

方法和變數的命名規則

以類似的方式,類名、方法和變數名只能包含字母數字字元。數字被允許但是不被鼓勵,除非他們屬於一個技術術語。不要使用下劃線、連字元或其他任何非字母數字字元。方法和變數名應該遵循駝峰原則這也適用於縮略詞。
例如：
可接受的方法名稱:
encodeUsingMd5()
getHtml()而不是 getHTML()
getJsonResponse()而不是getJsonResponse()
parseXmlContent()而不是parseXMLContent()
可接受的變數名:
var isGoodName
var base64Encoder
var xmlReader 
var httpServer

屬性的命名規則

類屬性名遵循完全相同的約定時除了靜態常量。
靜態類常量屬性應該全部大寫。例如:
Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"

宣告

舊的方式

如果你曾經使用過Ext的4.x版本，你可能會對Ext.extend方法來建立類比較熟悉：

var MyWindow = Ext.extend(Object, { ... });

這種方法很容易遵循以建立一個新的類繼承自另一個。除了直接繼承,我們沒有其他方面創造流暢的API的類。這個排除諸如配置、靜態和mixins。我們稍後將詳細回顧這些物品在本指南。
讓我們再看看另一個例子：

My.cool.Window = Ext.extend(Ext.Window, { ... });

在本例中,我們想我們新類名稱空間,並使其從Ext.window延伸。有兩個問題我們需要解決:
1.在給My.cool屬性賦值Window屬性的時候，需要先有這個物件存在。
2.ext . window需要存在/載入頁面,才能引用解決第一個問題我們可以通過Ext.namespace(別名 Ext.ns)來解決。這個方法遞迴地通過物件/屬性樹建立他們如果他們不存在。這需要在之前新增Ext.extend

xt.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });

第二個問題不容易解決,因為ext.window可能取決於許多其他類。反過來,這些依賴關係可能依賴於其他類的存在。出於這個原因,Ext JS 4之前編寫的應用程式引入整個ext-all.js的形式,不管應用程式是不是隻需要一小部分的框架。

新的方式

Ext JS 4消除這些缺點為類建立一個方法你需要記住:Ext.define。它的基本語法如下:

Ext.define(className, members, onClassCreated);

className:類名members:一個物件,代表一個類成員的鍵-值對的集合onClassCreated:一個可選的回撥函式當所有定義的類和類本身是完全做好了準備的時候被呼叫。由於類建立的非同步本性,這個回撥在很多情況下是非常有用的。這些將在第四部分進一步討論
例如：

Ext.define('My.sample.Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
    }
});

var aaron = Ext.create('My.sample.Person', 'Aaron');

aaron.eat("Salad"); // alert("Aaron is eating: Salad");

注意:我們建立了一個新的My.sample的例項。使用Ext.create()方法。我們可以使用新的關鍵字(new My.sample.Person())。不過建議得到的習慣總是使用Ext.create因為它允許您利用動態載入。動態載入的更多資訊參見入門指南

配置

在Ext JS 4中,我們介紹了一個專用的配置屬性,它是在類建立之前被強大的Ext.Class 預處理建立的類。功能包括:1.從其他類成員配置是完全封裝
2.如果方法還未定義，建立期間Getter和setter方法為每個配置屬性自動生成到類原型類。
3.一個apply方法也為每個屬性生成配置。內部自動生成setter方法呼叫apply方法之前設定值。你可以覆蓋apply方法申請配置屬性,如果你需要執行自定義邏輯之前設定的值。如果apply不返回一個值,setter不會設定值。
為Ext類使用配置,Ext JS 5消除了需要手動呼叫initConfig()。然而,對於自己的類,擴充套件Ext.Base initConfig()仍然需要手動呼叫。
你可以看到下面的配置示例：

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

   config: {
       title: 'Title Here',

       bottomBar: {
           height: 50,
           resizable: false
       }
   },

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

   applyBottomBar: function(bottomBar) {
       if (bottomBar) {
           if (!this.bottomBar) {
               return Ext.create('My.own.WindowBottomBar', bottomBar);
           }
           else {
               this.bottomBar.setConfig(bottomBar);
           }
       }
   }
});

/** A child component to complete the example. */
Ext.define('My.own.WindowBottomBar', {
   config: {
       height: undefined,
       resizable: true
   }
});

這是一個如何使用它的例子:

var myWindow = Ext.create('My.own.Window', {
    title: 'Hello World',
    bottomBar: {
        height: 60
    }
});

alert(myWindow.getTitle()); // alerts "Hello World"

myWindow.setTitle('Something New');

alert(myWindow.getTitle()); // alerts "Something New"

myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"

myWindow.setBottomBar({ height: 100 });

alert(myWindow.getBottomBar().getHeight()); // alerts 100

靜態變數

靜態變數可以使用statics配置來定義：

Ext.define('Computer', {
    statics: {
        instanceCount: 0,
        factory: function(brand) {
            // 'this' in static methods refer to the class itself
            return new this({brand: brand});
        }
    },

    config: {
        brand: null
    }
});

var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');

alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

錯誤控制和除錯

Ext JS包括一些有用的特性,將幫助您除錯和錯誤處理。
您可以使用Ext.getDisplayName()的任何方法的顯示名稱。這對丟擲錯誤的類名和方法名描述來說是特別有用的:

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

當有錯誤在使用Ext.define時丟擲的時候，你應該檢視這個方法還有類的堆疊資訊，你可以看下谷歌Chrome中報錯的資訊如下：