本文作者：sushengmiyan
-------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------
這篇指引提供了一個簡單的ext js介紹，我們會從讨論建立一個簡單的hello world例子開始我們的體驗。我們會接着講解在extjs中代碼是怎樣的結構，這個指導同樣也會包括一些其他可以使用的資源的連結，是以，你應該盡可能的多看一些來提升你對ext的認知程度。
----------------------
我們命名的index.html的内容如下：
像jQuery或者AngularJS囊括了html的聲明标記，但是ext js不是這樣，你隻需要在我們内部類輔助系統和js中書寫就夠了。你可以看到像如下結構的例子：
現在講上述代碼嵌入到你的app.js檔案中，在index.html同級目錄下建立app.js内容粘貼上去即可。
如果你現在重新整理頁面，你可能無法看到運作結果，因為現在架構還沒有被完全加載。這就是為什麼我們需要在應用程式中增加launch()函數，這個函數是當頁面準備結束的時候就被調用。
現在我們給app.js内容替換為如下：
在IE8中運作有提示錯誤，但是在chrom中完全可以，看到如下結果：
這個例子說明了開始ext js 5是多麼簡單，從這裡，天空是你的極限。你可以探索ext js 5的許多功能通過研究我們的例子，它們給出了架構工具盒能力的偉大介紹。
ext-all.js
----------
我們應該注意到，index.html中ext-all.js和ext-them-neptune.css是被完全包含進來的，這個對于我們練習來說是合适的，但是當你想隻用架構的部分來釋出應用程式的時候就不太适合了。你可以根據你的工程的需要來簡化你的架構。
你可以參考 getting started guide 來擷取更多的關于這方面的extjs5和sencha cmd 的介紹。
請繼續閱讀關于extjs5的核心。
------------------------
Ext JS 5是一個JavaScript應用程式架構,它為您提供了一整套工具用于建立跨平台的應用程式。Ext JS 5支援所有現代浏覽器,IE8的最新版本以及Chrome和介于兩者之間的。
Ext JS是面向對象的、基于類庫的,這意味着它的設計允許您的應用程式範圍從單個開發人員到多團隊的企業。讓我們打破這些概念的一些你不熟悉的術語。
面向對象程式設計
面向對象程式設計(OOP)是一個子產品化的方式設定為可重用的代碼,使碎片。這也使代碼更易于維護比常見的“内聯”腳本編碼與許多其他JavaScript庫。
而不是使一個巨大的項目,說計劃可以分為連接配接部分,最終,會讓事情更容易維護和規模。
閱讀更多關于面向對象程式設計的基礎知識。
類和對象
OOP的關鍵概念包括類和對象。一個類是一個抽象的定義應用程式的一個元件。這是一個簡單的抽象基礎水準的“東西”。這個類可以作為表示類的對象執行個體。在這一點上,抽象的對象包含的所有資訊,除了任何其他部分的擴充。
現在我們開始另一個例子來展示extjs的類系統，我們還是從上述的index.html和app.js開始。
我們先來定義一個類：我們定義一個panel類如下：
你可以看到，我們定義了一個東西叫做MyPanel，它繼承于ext js panel類 現在我們可以使用這個模闆來建立一個新的對象。
或許我們需要兩個面闆，他們之間的唯一差別就是内容不一樣，我們就可以建立兩個執行個體，現在你的app.js内容應該像下面這樣：
重新整理index.html可以看到如下效果：
如你所見，這可以讓你重複使用一段基代碼，但是也可以達到我們不同的需要。雖然這是一個簡單的例子,使用和擴充Ext JS類是一個非常強大的機制,将幫助您建立清潔和可維護的代碼。
你可以閱讀更多關于我們班的内部系統。
注意:這個方法是“嵌入”例如目的。如果你寫一個真正的應用程式中,您會MyApp.view.MyPanel視圖在一個單獨的檔案。此外,在控制器中建立語句會或發射()函數。
你可以在這裡閱讀更多關于應用程式體系結構。
----------------------------------------------
你現在已經看到了我們建立helloworld的例子，如果你對sencha 架構式不熟悉的話，它可能看起來像稍微正常文法,你可能需要建立一些那麼簡單的東西。讓我們看看網格,這樣你可以看到最真實的情況下如何利用少量的文法來建立真正令人印象深刻的輸出。
在這個例子中,我們會産生Ext.grid.panel,其中包含一行編輯插件和幾行資料。檢視此示例,隻需你app.js檔案的内容替換為以下代碼:
當你重新整理浏覽器的時候，可以看到如下效果：
你在這裡看到的是一個功能齊全的Ext JS網格。這個網格包含可排序的可移動的列也是可拖放的。這些列可以利用網格頭下的列選項的下拉菜單顯示和隐藏。這個網格還包含一行通過輕按兩下激活任何行的編輯器。這些行包含可編輯的文本字段和一個有用的和有吸引力的使用者界面。
真正神奇的事情是,你得到這個在大約30行代碼。這種功能帶有網格在預設情況下,這意味着更少的時間添加功能。唯一的添加到這個示例是行編輯器,它隻需要一行配置被添加到您的網格。
這應該說明一旦你熟悉文法Ext JS可以節省你多少時間。最後,你節省時間和使用者與應用程式功能豐富的經驗。
注意:在一個真實世界的例子,您将使用一個單獨的存儲和模型來填充你的網格資料。
你可以在我們的應用程式架構指南中閱讀更多關于Ext.data.store和Ext.data.model
--------------------
既然你已經看到了啟動是如此的簡單，那麼你就可以看一些比較高深的知識了。
你可以在如下位址找到extjs的doc文檔：http://docs.sencha.com/extjs/5.0.0/
下一步我們就要學習：
1.set up and geting started
2.the class system
3.layouts and containers
4.enwents in ext js
5.examples