Extjs學習及應用經驗小結

申請免費試用、咨詢電話：400-8352-114

一、了解Html DOM、Ext Element及Component
　　要進修及使用好Ext框架，需求了解Html DOM、Ext Element及Component三者的區(qū)別。
　　Ext是基于Web的富客戶端框架，其完滿是基于規(guī)范W3C技能構建立的，運用到的都是HTML、CSS、DIV等相關技能。Ext最出色之處，是開拓了一系列十分簡略易用的控件及組件，我們只需求運用這些組件就能完成各類豐厚多彩的UI的開拓。
　　無論組件有幾多裝備屬性、照樣事情、辦法等等，其最終都邑轉化為HTML在閱讀器上顯示出來，而每一個HTML頁面都有一個條理清楚的DOM樹范型，閱讀器中的一切內容都有響應的DOM對象，動態(tài)改動頁面的內容，恰是經過運用劇本言語來操作DOM對象完成。
　　僅僅有DOM是不敷的，比方要把頁面中的某一個節(jié)點移到其它地位，要給某一個節(jié)點添加暗影結果，要埋沒或顯示某一個節(jié)點等，我們都需求經過幾句 javascript才干完成。因而，Ext在DOM的根底上，創(chuàng)立了Ext Element，可以運用Element來包裝任何DOM，Element對象中添加了一系列快捷、簡潔的適用辦法。
　　關于終端用戶來說，僅僅有Element是不敷的，比方用戶要顯示一個表格、要顯示一棵樹、要顯示一個彈出窗口等。因而，除了Element以外，Ext 還樹立了一系列的客戶端界面組件Component，我們在編程時，只需運用這些組件Componet即可完成相關數(shù)據(jù)展現(xiàn)及交互等，而 Component是較高條理的抽象，每一個組件在襯著render的時分，都邑順次經過Element、DOM來生成最終的頁面結果。

　　在運用Ext開拓的使用順序中，組件Component是最高條理的抽象，是直接給用戶運用的，Ext Element是Ext的底層API，首要是由Ext或自界說組件挪用的，而DOM是W3C規(guī)范界說的原始API，Ext的Element經過操作DOM 來完成頁面的結果顯示。
　　在Ext中，組件襯著今后可以經過拜訪組件的el屬性來獲得組件對應的Element，經過拜訪Element的dom屬性可以獲得其下面的DOM對象。別的，我們可以經過經過Ext類的快捷辦法getCmp、get、getDom等辦法來得組件Component、Ext元素Element及DOM節(jié)點。比方：
　　var view=new Ext.Viewport();//創(chuàng)立了一個組件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");//依據(jù)id獲得組件win響應的Element
　　var dom=Ext.getDom("win1");//獲得id為win1的DOM節(jié)點
二、熟習ext組件系統(tǒng)
　　Ext2.0對整個框架進行了重構，最為出色的是推出了一個以Component類為根底的組件系統(tǒng)，在Component類根底上，運用面向對象的辦法，設計了一系列的組件及控件。因而，要能揮灑自如地運用Ext，熟習Ext組件系統(tǒng)是最根本的。
　　在《ExtJS適用開拓指南》中，有如下面一幅組件圖：
　　經過組件構造圖我們可以了如指掌的看出整個Ext組件承繼及構成系統(tǒng)，當運用一個組件的工夫，調查他的承繼系統(tǒng)，如許可以便于我們把握組件的各類特征。
三、把握中心控件　
　　控件其實也是組件，比方用于顯示樹信息的TreePanel、用于顯示表格的GridPanel及EditorGridPanel，還有代表使用順序窗口的Ext.Window等都屬于Ext控件。在運用Ext的時分，必然要把握一些中心控件，特殊是處于基類的控件。比方上面提到的幾個控件，他們都是承繼于面板Panel，所以我們要重點把握面板這個中心控件的特征。比方面板由以下幾個局部構成：一個頂部東西欄(tbar)、一個底部東西欄(bbar)、面板頭部(header)、面板尾部(bottom)、面板主區(qū)域(body)幾個局部構成。面板類中還內置了面板睜開、封閉等功用，并供應一系列可重用的東西按鈕使得我們可以輕松完成自界說的行為，面板可以放入其它任何容器中，面板自身是一個容器，他里面又可以包括各類其它組件。只需把握了Panel的使用，那么進修TreePanel、Window等就會變得簡略得多。
　　相同的事理，關于Ext的表單字段來說，不論是ComboBox，NumberField、照樣DateField，他們其它都是 Ext.form.Field類的子類，在他上面界說了表單字段的各類根本操作及特征。在進修運用表單字段組件時，必然要重點研討Field這個類，把握他的首要辦法、事情等，就能有助于更好的進修運用其它的字段。
四、進修及研討示例
　　因為javascript言語十分靈敏，不像靜態(tài)強類型言語（比方Java）那樣有固定的代碼設計形式，而往往是分歧的人就有分歧的編程作風。在實踐使用開拓中，只要見多識廣，才干在本人的在腦中樹立一個開拓庫。
　　進修他人的示例關于我們開拓協(xié)助會十分大，示例包羅根本組件的使用、綜合使用等多個方面。在此，簡略引薦幾個。
　　1、Ext官方示例，在ext項面前目今載包的examples目次中，包羅各個控件的根本使用演示，還還有一些比擬復雜的組合示例，有簡有繁，十分合適初學者仔細研討。
　　2、Vifir推出的示例，Vifir推出的一些示例首要包羅兩類，一種是開源的示例使用，別的一種是針對VIP用戶的適用示例。開源的示例首要是指 wlr單用戶blog系統(tǒng)，這個一個調集了前后臺技能的ext綜合示例，而針對VIP用戶的適用示例則是可以作為開拓骨架或擴展組件的示例。

　　3、其它示例，在ext社區(qū)中還有良多比擬優(yōu)異的ext使用示例，有些只是一個使用演示，固然沒有供應源碼下載，但我們可以直接下載援用的js文件來獲得這些示例的ext使用代碼，相同能取起到十分好的進修結果。
五、多運用
　　Ext看起來長短常簡略的器械，稍有點編程常識的人，依照《ExtJS適用開拓指南》中的入門指南，半小時就能學會運用Ext。但是，當預備運用Ext開拓一個項目時，卻不曉得從何處動手，或許是在運用Ext的時分，出了一點小問題本人不曉得該若何處理。編程是一門理論性的科學，僅僅靠看書、看他人寫的代碼是遠遠不敷的，因而，必需多做理論才行，只要經過不時的演習，很多的運用，才干對Ext的組件特征、事情、事情處置機制以及與效勞器端交互接口等深化的把握，只要多做運用，深化調查ext的組件的任務道理及機制，才干編寫出高級的Ext的使用。
六、熟讀Ext項目標源代碼
　　假如要想深化使用Ext，那么閱讀Ext項目標源代碼這是必不成少的環(huán)節(jié)，Ext的代碼質量十分高，經過閱讀他的代碼我們可以愈加深入的調查 javascript面向對象編程，Ext代碼中包括了良多高級的js技巧以及設計形式。在運用Ext的進程中，我們常常依據(jù)項目標需求對Ext組件進行擴展，設計本人的組件或控件，而若何完成一個自界說的Ext組件，我們可以從Ext的各個組件源代碼中找到謎底。

　　Ext的源代碼在Ext項目標source目次。讀Ext源碼，并紛歧定非要從某一個當?shù)亻_端，而組件中心代碼Component.js、容器組件代碼 Container.js、面板Panel.js等這些是必看的； core目次中的Element.js、Ext.js等也是必看的。當需求從一個控件進行擴展的時分，最好能簡略看一看這個控件的源代碼。
七、了解，熟習，把握Json
　　在項目中，Ext自身的華美表面就很吸引眼球了，但這僅僅是其外在的美，還有最中心的內涵美，即：Json。Json(JavaScript Object Notation) 是一種數(shù)據(jù)交互花樣，一個不克不及完成數(shù)據(jù)交互功用的項目是沒有任何意義的，大多的Ajax框架的數(shù)據(jù)交互都基于Json，如：jQuery、ExtJs等。因而了解Json把握Json并純熟運用是很主要的。以當前主流的開拓言語為例，.NET曾經把Json封裝到類中，無需裝備，直接與數(shù)據(jù)庫交互，輕松的封裝直接運用；Java就費事些，必需去下一個Json包，然后再做一些裝備，才可以運用；PHP和Java差不多，也必需下載一個Json插件（和類類似），然則不必裝備，直接封裝運用。在實踐的項目中，各自的棄取裝備，都基于項目和需求，并不是每個項目（針對WEB）都必然要用到。然則，假如想在項目頂用到此類的Ajax框架，Json的把握又是必需的。