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

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

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

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

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

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