Extjs學(xué)習(xí)及應(yīng)用經(jīng)驗(yàn)小結(jié)

申請免費(fèi)試用、咨詢電話：400-8352-114

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

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

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

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