心血來潮，決定好好學學Web前端，整理點東西，以後備用嘍！
一、理解Html DOM、Ext Element及Component
要學習及應用好Ext框架，需要理解Html DOM、Ext Element及Component三者的區別。 Ext是基於Web的富客戶端框架，其完全是基於標準W3C技術構建設的，使用到的都是HTML、CSS、DIV等相關技術。Ext最傑出之處，是開發了一系列非常簡單易用的控件及組件，我們只需要使用這些組件就能實現各種豐富多彩的UI的開發。 無論組件有多少配置屬性、還是事件、方法等等，其最終都會轉化爲HTML在瀏覽器上顯示出來，而每一個HTML頁面都有一個層次分明的DOM樹模型，瀏覽器中的所有內容都有相應的DOM對象，動態改變頁面的內容，正是通過使用腳本語言來操作DOM對象實現。 僅僅有DOM是不夠的，比如要把頁面中的某一個節點移到其它位置，要給某一個節點添加陰影效果，要隱藏或顯示某一個節點等，我們都需要通過幾句 javascript才能完成。因此，Ext在DOM的基礎上，創建了Ext Element，可以使用Element來包裝任何DOM，Element對象中添加了一系列快捷、簡便的實用方法。 對於終端用戶來說，僅僅有Element是不夠的，比如用戶要顯示一個表格、要顯示一棵樹、要顯示一個彈出窗口等。因此，除了Element以外，Ext 還建立了一系列的客戶端界面組件Component，我們在編程時，只要使用這些組件Componet即可實現相關數據展示及交互等，而 Component是較高層次的抽象，每一個組件在渲染render的時候，都會依次通過Element、DOM來生成最終的頁面效果。 在使用Ext開發的應用程序中，組件Component是最高層次的抽象，是直接給用戶使用的，Ext Element是Ext的底層API，主要是由Ext或自定義組件調用的，而DOM是W3C標準定義的原始API，Ext的Element通過操作DOM 來實現頁面的效果顯示。 在Ext中，組件渲染以後可以通過訪問組件的el屬性來得到組件對應的Element，通過訪問Element的dom屬性可以得到其下面的DOM對象。另外，我們可以通過通過Ext類的快捷方法getCmp、get、getDom等方法來得組件Component、Ext元素Element及DOM節點。比如： var view=new Ext.Viewport();//創建了一個組件Component view.el.setOpacity(.5);//調用Element的setOpacity方法 view.el.dom.innerHTML="Hello Ext";//通過Element的dom屬性操作DOM對象 再看下面的代碼： var win=new Ext.Window({id:"win1",title:"我的窗口",width:200,height:200}); win.show(); var c=Ext.getCmp("win1");//得到組件win var e=Ext.get("win1");//根據id得到組件win相應的Element var dom=Ext.getDom("win1");//得到id爲win1的DOM節點 二、熟悉ext組件體系 Ext2.0對整個框架進行了重構，最爲傑出的是推出了一個以Component類爲基礎的組件體系，在Component類基礎上，使用面向對象的方法，設計了一系列的組件及控件。因此，要能遊刃有餘地使用Ext，熟悉Ext組件體系是最基本的。 在《ExtJS實用開發指南》中，有如下面一幅組件圖： 通過組件結構圖我們可以一目瞭然的看出整個Ext組件繼承及組成體系，當使用一個組件的時間，瞭解他的繼承體系，這樣可以便於我們掌握組件的各種特性。 三、掌握核心控件 控件其實也是組件，比如用於顯示樹信息的TreePanel、用於顯示錶格的GridPanel及EditorGridPanel，還有代表應用程序窗口的Ext.Window等都屬於Ext控件。在使用Ext的時候，一定要掌握一些核心控件，特別是處於基類的控件。比如上面提到的幾個控件，他們都是繼承於面板Panel，所以我們要重點掌握面板這個核心控件的特性。比如面板由以下幾個部分組成：一個頂部工具欄(tbar)、一個底部工具欄(bbar)、面板頭部(header)、面板尾部(bottom)、面板主區域(body)幾個部分組成。面板類中還內置了面板展開、關閉等功能，並提供一系列可重用的工具按鈕使得我們可以輕鬆實現自定義的行爲，面板可以放入其它任何容器中，面板本身是一個容器，他裏面又可以包含各種其它組件。只要掌握了Panel的應用，那麼學習TreePanel、Window等就會變得簡單得多。 同樣的道理，對於Ext的表單字段來說，不管是ComboBox，NumberField、還是DateField，他們其它都是 Ext.form.Field類的子類，在他上面定義了表單字段的各種基本操作及特性。在學習使用表單字段組件時，一定要重點研究Field這個類，掌握他的主要方法、事件等，就能有助於更好的學習使用其它的字段。 四、學習及研究示例 由於javascript語言非常靈活，不像靜態強類型語言（比如Java）那樣有固定的代碼設計模式，而往往是不同的人就有不同的編程風格。在實際應用開發中，只有見多識廣，才能在自己的在腦中建立一個開發庫。 學習別人的示例對於我們開發幫助會非常大，示例包括基本組件的應用、綜合應用等多個方面。在此，簡單推薦幾個。 1、Ext官方示例，在ext項目下載包的examples目錄中，包括各個控件的基本應用演示，同時還有一些比較複雜的組合示例，有簡有繁，非常適合初學者認真研究。 2、Vifir推出的示例，Vifir推出的一些示例主要包括兩類，一種是開源的示例應用，另外一種是針對VIP用戶的實用示例。開源的示例主要是指 wlr單用戶blog系統，這個一個集合了前後臺技術的ext綜合示例，而針對VIP用戶的實用示例則是可以作爲開發骨架或擴展組件的示例。 3、其它示例，在ext社區中還有很多比較優秀的ext應用示例，有些只是一個應用演示，雖然沒有提供源碼下載，但我們可以直接下載引用的js文件來得到這些示例的ext應用代碼，同樣能取起到非常好的學習效果。 五、多運用 Ext看起來是非常簡單的東西，稍有點編程知識的人，按照《ExtJS實用開發指南》中的入門指南，半小時就能學會使用Ext。然而，當準備使用Ext開發一個項目時，卻不知道從何處入手，或者是在使用Ext的時候，出了一點小問題自己不知道該如何解決。編程是一門實踐性的科學，僅僅靠看書、看別人寫的代碼是遠遠不夠的，因此，必須多做實踐才行，只有通過不斷的練習，大量的使用，才能對Ext的組件特性、事件、事件處理機制以及與服務器端交互接口等深入的掌握，只有多做運用，深入瞭解ext的組件的工作原理及機制，才能編寫出高級的Ext的應用。 六、熟讀Ext項目的源代碼 如果要想深入應用Ext，那麼閱讀Ext項目的源代碼這是必不可少的環節，Ext的代碼質量非常高，通過閱讀他的代碼我們可以更加深刻的瞭解 javascript面向對象編程，Ext代碼中包含了很多高級的js技巧以及設計模式。在使用Ext的過程中，我們經常根據項目的需要對Ext組件進行擴展，設計自己的組件或控件，而如何實現一個自定義的Ext組件，我們可以從Ext的各個組件源代碼中找到答案。 Ext的源代碼在Ext項目的source目錄。讀Ext源碼，並不一定非要從某一個地方開始，而組件核心代碼Component.js、容器組件代碼 Container.js、面板Panel.js等這些是必看的； core目錄中的Element.js、Ext.js等也是必看的。當需要從一個控件進行擴展的時候，最好能簡單看一看這個控件的源代碼。 七、理解，熟悉，掌握Json 在項目中，Ext本身的華麗外表就很吸引眼球了，但這僅僅是其外在的美，還有最核心的內在美，即：Json。Json(JavaScript Object Notation) 是一種數據交互格式，一個不能實現數據交互功能的項目是沒有任何意義的，大多的Ajax框架的數據交互都基於Json，如：jQuery、ExtJs等。因此理解Json掌握Json並熟練運用是很重要的。以目前主流的開發語言爲例，.NET已經把Json封裝到類中，無需配置，直接與數據庫交互，輕鬆的封裝直接使用；Java就麻煩些，必須去下一個Json包，然後再做一些配置，纔可以使用；PHP和Java差不多，也必須下載一個Json插件（和類相似），但是不用配置，直接封裝使用。在實際的項目中，各自的取捨配置，都基於項目和需求，並不是每個項目（針對WEB）都一定要用到。但是，如果想在項目中用到此類的Ajax框架，Json的掌握又是必須的。
