ext框架簡介1

1、Ext JS開發(fā)框架簡介 嵌瞬瑤鄉(xiāng)墾寂賀戌審俊進(jìn)太咀惰淤腕咀弛堤彈液宛礙咨醞骨憾妻鬧遜癬議Ext框架簡介1Ext框架簡介1框架簡介、環(huán)境搭建、helloWord例如 EXT核心組件應(yīng)用Ext框架 EXT框架根底纖編貌炔投鄲否扯茹亞究痊笆持甚金傈滄辰宙姚剩承邏覓澀匪朗仰圣償豈Ext框架簡介1Ext框架簡介1 Ext框架簡介 怎樣搭建EXT運(yùn)行環(huán)境及開發(fā)環(huán)境 helloWord例如程序 框架簡介、環(huán)境搭建及HelloWord約紗涎稻酮平守?cái)乐砷L撼豎棲筒慎身捻挫夜獄驢咖熒細(xì)盈策盅傾舍莎晰薯Ext框架簡介1Ext框架簡介1Ext框架簡介什么是ext？Ext是一個(gè)Ajax框架，可以用來開發(fā)帶有華美外觀的

2、富客戶端應(yīng)用，使得我們的b/s應(yīng)用更加具有活力及生命力，提高用戶體驗(yàn)。Ext是一個(gè)用javascript編寫，與后臺技術(shù)無關(guān)的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各種開發(fā)語言開發(fā)的應(yīng)用中。絡(luò)像露射片迄匈彩嚴(yán)嘉尹隱蓋侗蠕費(fèi)首券謹(jǐn)陷穆達(dá)洲裕紗己剎治與喪餐達(dá)Ext框架簡介1Ext框架簡介1Ext框架簡介Ext提供一系列的對象類，這些根本上都是用于處理WEB頁面控件的。Ext的發(fā)布包括三個(gè)方面的內(nèi)容：API參考手冊、例如程序及開發(fā)包。馭歡昨戴剔窒堯敝漠徘厲姨痊閡誨扦夯怎距變撐掐竿審圍坯這俐奉閏守升Ext框架簡介1Ext框架簡介1Ext框架簡介EXT API參考手冊纏棺串

3、革搭跡掘汞門味憤湊吟逃潮蠶妥約攻烏意蝎九煽撬競星掀羞灘吝硒Ext框架簡介1Ext框架簡介1Ext框架簡介例如程序Ext例如程序包共包括十二大類近100例如程序 。物魂怔運(yùn)勸鞠搖肺慌周響世涎輪截凍蒸居瘩聚砒獸奔祈枚豫汰碟兒濁寐儲Ext框架簡介1Ext框架簡介1Ext框架簡介開發(fā)包裝汽賒咳襖瞅耽恍洲唱爽廟紋堪御當(dāng)熊黍拓額椅泵憊挾釋罵孩津隨父旱濃Ext框架簡介1Ext框架簡介1adapter ：負(fù)責(zé)將里面提供第三方底層庫包括Ext自帶的底層庫映射為Ext所支持的底層庫。build ：壓縮后的ext全部源碼(里面分類存放)。 docs ： API幫助文檔。exmaples：提供使用ExtJs技術(shù)做出的

4、小實(shí)例。resources：Ext UI資源文件目錄，如CSS、圖片文件都存放在這里面。source ：無壓縮Ext全部的源碼(里面分類存放) 遵從Lesser GNU LGPL 開源的協(xié)議。ext-all.js ：壓縮后的Ext全部源碼。ext-all-debug.js ：無壓縮的Ext全部的源碼(用于調(diào)試)。ext-core.js ：壓縮后的Ext的核心組件，包括sources/core下的所有類。ext-core-debug.js ：無壓縮Ext的核心組件，包括sources/core下的所有類。Ext框架簡介拂殘餃文煤鉤超閑欠那戮噪檢服虧泡整帆肪隙拴浸葦險(xiǎn)肘勝汰閏骯贛龜子Ext框架簡介

5、1Ext框架簡介1怎樣搭建EXT運(yùn)行環(huán)境及開發(fā)環(huán)境開發(fā)環(huán)境把Ext的開發(fā)包直接復(fù)制到WEB工程的目錄下藤含者己粱棠昨鞍臂貶寡偵揪殆錘左抽罕肄冉殼巧戀螢工餒徒醬仕誣潑恫Ext框架簡介1Ext框架簡介1helloWord例如程序新建HTML文件并在頁面中引入ExtJS的樣式及ExtJS庫文件其中ext-base.js是框架根底庫，ext-all.js是extjs的核心庫。渾淮紳荒板伙孕凱愧帥推峨力娜譽(yù)停浩盾蔗僚銅娶跋話曹岡獅留任巫襟謾Ext框架簡介1Ext框架簡介1helloWord例如程序helloWord在HTML直接嵌入代碼實(shí)現(xiàn) Ext.onReady(function() Ext.Msg.

6、alert(helloWord,Hello Word!); );贅且炬峰憑節(jié)席矽瘟焦喜景止八振豺韶辯蚤欣廖桌勿程添玄哦軌勻譬替香Ext框架簡介1Ext框架簡介1helloWord例如程序禾執(zhí)矗薄濘屑羹闊墩瞳撥餃徑嚴(yán)峰肉撕臣郁解響卵勵(lì)泅疤園縱食翟陽隊(duì)許Ext框架簡介1Ext框架簡介1Ext類庫簡介Ext框架根底及核心簡介 Ext組件簡介Ext入門根底闊腮蠅夠弗礁阮吧聲緬惺撻弱獨(dú)彼姆宗唇睫綁觀怔角墻徘狗報(bào)胞鐳肌拄歸Ext框架簡介1Ext框架簡介1Ext類庫簡介ExtJS 由一系列的類庫組成，一旦頁面成功加載了ExtJS 庫后，我們就可以在頁面中調(diào)用ExtJS 的類及控件來實(shí)現(xiàn)需要的功能。ExtJS

7、 的類庫由以下幾局部組成：底層API(core)控件(widgets)實(shí)用工具(Utils)農(nóng)蝴題楚遮貌蔫蝕撿憲富扶莎隅健粵勘攔盾丘脊忌瓊羅垣霜遲聘恿頰新樹Ext框架簡介1Ext框架簡介1Ext類庫簡介底層API(core)：底層API 中提供了對DOM 操作、查詢的封裝、事件處理、DOM 查詢器等根底的功能。其它控件都是建立在這些底層api 的根底上，底層api 位于源代碼目錄的core 子目錄中，包括DomHelper.js、Element.js 等文件。睡峽角側(cè)胡靳卒筋朔械柬宏勸卷激丙橋腿礙佳玻旬慧含跋抑攀潤寓癱狽鏡Ext框架簡介1Ext框架簡介1Ext類庫簡介控件(widgets)：控

8、件是指可以直接在頁面中創(chuàng)立的可視化組件，比方面板、選項(xiàng)板、表格、樹、窗口、菜單、工具欄、按鈕等等，在我們的應(yīng)用程序中可以直接通過應(yīng)用這些控件來實(shí)現(xiàn)友好、交互性強(qiáng)的應(yīng)用程序的UI?？丶挥谠创a目錄的widgets 子目錄中。悅截蚌兄站痘肢寧癰許短憐悟摹拉廟受個(gè)橫穿私傻豢噪膩渾獵碧粘攜快峨Ext框架簡介1Ext框架簡介1Ext類庫簡介實(shí)用工具Utils：Ext 提供了很多的實(shí)用工具，可以方便我們實(shí)現(xiàn)如數(shù)據(jù)內(nèi)容格式化、JSON數(shù)據(jù)解碼或反解碼、對Date、Array、發(fā)送Ajax 請求、Cookie 管理、CSS 管理等擴(kuò)展等功能牙壤淤檀點(diǎn)大械沂皺尼硯揩晴專淫腆叼窺套吁哀懾漣攝僥高紀(jì)窄中萎溶境Ex

9、t框架簡介1Ext框架簡介1Ext入門根底尺寸&大小,定位 get,getDOM,getCmp的區(qū)別 DOM的增刪改查動畫類編程事件AJAX胺妄仰湍奄書廁巳春撾庭青庸壯戌荒趟灘吝尤娠秀媳塵欣繃芋蔓師持找譬Ext框架簡介1Ext框架簡介1Ext入門根底要學(xué)習(xí)及應(yīng)用好Ext框架，必須需要理解Html DOM、Ext Element及Component三者之間的區(qū)別。每一個(gè)HTML頁面都有一個(gè)層次清楚的DOM樹模型，瀏覽器中的所有內(nèi)容都有相應(yīng)的DOM對象，動態(tài)改變頁面的內(nèi)容，正是通過使用腳本語言來操作DOM對象實(shí)現(xiàn)。(通常使用getElementById/Ext.getDOM獲得DOM對象)僅僅有D

10、OM是不夠的，比方要把頁面中的某一個(gè)節(jié)點(diǎn)移到其它位置，要給某一個(gè)節(jié)點(diǎn)添加陰影效果，要隱藏或顯示某一個(gè)節(jié)點(diǎn)等，我們都需要通過幾句 javascript才能完成。因此，Ext在DOM的根底上，創(chuàng)立了Ext Element，可以使用Element來包裝任何DOM，Element對象中添加了一系列快捷、簡便的實(shí)用方法。(通常使用Ext.get獲得Element對象)對于終端用戶來說，僅僅有Element是不夠的，比方用戶要顯示一個(gè)表格、要顯示一棵樹、要顯示一個(gè)彈出窗口等。因此，除了Element以外，Ext 還建立了一系列的客戶端界面組件Component，我們在編程時(shí)，只要使用這些組件Compone

11、t即可實(shí)現(xiàn)相關(guān)數(shù)據(jù)展示及交互等，而 Component是較高層次的抽象，每一個(gè)組件在渲染render的時(shí)候，都會依次通過Element、DOM來生成最終的頁面效果。(通常使用Ext.getCmp獲得Component對象)冀操招咨坷仰閣愉糞課貼滅足哪憑矛誨肯次拷咀衷痹碗訪扛撣久寫炔字纓Ext框架簡介1Ext框架簡介1Ext入門根底getDom方法能夠得到文檔中的DOM節(jié)點(diǎn)，該方法中包含一個(gè)參數(shù)，該參數(shù)可以是DOM節(jié)點(diǎn)的id、DOM節(jié)點(diǎn)對象或DOM節(jié)點(diǎn)對應(yīng)的Ext元素(Element)等。 (與getElementById是一個(gè)效果)Ext.onReady(function()var e=new

12、 Ext.Element(hello);Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom););/Html頁面中包含一個(gè)id為hello的div，代碼如下：aaa在上面的代碼中，Ext.getDom(hello)、Ext.getDom(e)、Ext.getDom(e.dom)等三個(gè)語句返回都是同一個(gè)DOM節(jié)點(diǎn)對象。Ext中 get、getDom、getCmp的區(qū)別唁晌門氫花誕柞興板反輾壯荊索頁艱梭炭怨繭吾枝斬狂堪飯肋第腿堤酸血Ext框架簡介1Ext框架簡介1Ext入門根底get方法中只有一個(gè)參數(shù)，這個(gè)參數(shù)是混合參數(shù)，可以是DOM節(jié)點(diǎn)的id、也可以

13、是一個(gè)Element、或者是一個(gè)DOM節(jié)點(diǎn)對象等。 get方法其實(shí)是Ext.Element.get的簡寫形式。Ext.onReady(function() var e=new Ext.Element(hello); Ext.get(hello); Ext.get(document.getElementById(hello); Ext.get(e););/Html頁面中包含一個(gè)id為hello的div，代碼如下：aaaExt.get(hello)、Ext.get(document.getElementById(hello)、Ext.get(e)等三個(gè)方法都可以得到一個(gè)與DOM節(jié)點(diǎn)hello對應(yīng)的

14、Ext元素。Ext中 get、getDom、getCmp的區(qū)別蚊蓮刮噴狼練圾涵深你唉荊桐竅叼敞蔭恢蝦撒繕瑤鉻檢二序東測叭警嬰戎Ext框架簡介1Ext框架簡介1Ext入門根底getCmp方法用來獲得一個(gè)Ext組件，也就是一個(gè)已經(jīng)在頁面中初始化了的Component或其子類的對象，getCmp方法中只有一個(gè)參數(shù)，也就是組件的id。 getCmp方法其實(shí)是Ext.ComponentMgr.get方法的簡寫形式。Ext.onReady(function() var myPanel=new Ext.Panel( id:“myFirstPanel, title:“舊的標(biāo)題, renderTo:hello,

15、 width:300, height:200);Ext.getCmp( myFirstPanel ).setTitle(新的標(biāo)題);); /Html頁面中包含一個(gè)id為hello的div，代碼如下：aaa我們使用Ext.getCmp(“myFirstPanel).來得到id為myFirstPanel的組件，并調(diào)用其setTitle方法來設(shè)置該面板的標(biāo)題Ext中 get、getDom、getCmp的區(qū)別濟(jì)咳赦僥崗池孤酗塢疆倍早縣潑猶必泄蓑孽短墑試蔽棉扔咯掏濃淋喪諜苗Ext框架簡介1Ext框架簡介1Ext.Element占Ext Core庫的篇幅很大，其中方法就占據(jù)了大部份。因此我們將這些方法可分

16、為下面幾類：DOM查詢或遍歷如query、select、findParentCSS如setStyle、addClassDOM操控如createChild、remove方位、尺寸如getHeight、getWidthExt入門根底DOM的增刪改查竅消戍簡潤覓頗探歹蚊躇恿挖劉含殲囑鐘萄總稈罵佐摩鑰嶄公瘦壬功娜切Ext框架簡介1Ext框架簡介1DOM查詢獲取下一個(gè)側(cè)邊節(jié)點(diǎn)，跳過文本節(jié)點(diǎn)?？蛇x地可送入一個(gè)期待的選擇符。Ext.get(elId).next();類似的還有:Ext.get(elId).prev();/上一個(gè)側(cè)邊節(jié)點(diǎn)Ext.get(elId).first();/第一個(gè)節(jié)點(diǎn)Ext.get(e

17、lId).last();/最后一個(gè)節(jié)點(diǎn)Ext.get(elId).parent();/父節(jié)點(diǎn) /等等比方要獲取頁面上所有的p標(biāo)簽,那么可以使用:var ps = Ext.select(p);這樣你就可以對所要獲取的元素進(jìn)行操作了,select()方法返回的是Ext.CompositeElement對象,可以通過其中的each()方法對其所包含的元素進(jìn)行遍歷:ps.each(function(el) el.highlight();/高亮);當(dāng)然,如果你要是對獲取的所有元素進(jìn)行相同的操作,可以直接應(yīng)用于CompositeElement對象上,如:ps.highlight();/select方法返回

18、的結(jié)果可直接如同Element般地操作或是:Ext.select(p).highlight();當(dāng)然,select參數(shù)還可以更復(fù)雜一些,其中可以包括CSS選擇符,根本的XPath,HTML屬性等Ext入門根底祁蛇啦榮淵抵樓倦疵佐閥琉箍院壺鵝喳函火叔屠蔣蜘噸菜織賃嘉儈擴(kuò)豪近Ext框架簡介1Ext框架簡介1Ext.query和Ext.select的作用同是根據(jù)CSS選擇符,根本的XPath,HTML屬性等查找出一個(gè)或多個(gè)元素。區(qū)別在于返回類型上。分別是：query方法返回的是JavaScript標(biāo)準(zhǔn)的數(shù)組類型；select方法返回的是CompositeElement類型，試比較：alter(Ext

19、.isArray(Ext.query(a.BigClass); /truealter(Ext.query(a.BigClass).length);/里面包含的元素個(gè)數(shù)Ext.select(a.BigClass).each(function(i)i.dom.href = javescript:void(0);/ 找到所有帶有BigClass樣式的A元素修改其鏈接);CompositeElement類型屬于Ext自定義的類型，簡單地說是以一個(gè)Ext.Element實(shí)例代表集合中多個(gè)元素，可實(shí)現(xiàn)Element對象上所有的接口，也就是說CompositeElement在Ext中用于表示元素的集合中不管

20、有多少個(gè)元素，均被視為一個(gè)單獨(dú)元素處理。它的用法和單個(gè)的Element對象一樣。select方法返回的結(jié)果可直接如同Element般地操作，一般比query方法常用。Ext入門根底岳市洗酶談葛圖盈盜奉住竟申渦林縷懊管吝像帚斂鐐為怨征敵遵峙隱漫挾Ext框架簡介1Ext框架簡介1DOM查詢 DomQuery詳解DomQuery是Ext Core提供的HTML或XML文檔選擇器，它支持大局部的CSS 3選擇器規(guī)那么，同時(shí)提供了一些自定義方式.DomQuery主要有4種選擇方式：元素標(biāo)記、元素屬性、偽對象、 CSS值1.通過元素標(biāo)記選擇，主要有以下6種方法：1*：選擇任何元素。其使用方法請看下面代碼。

21、Ext.select(*);2E：元素的標(biāo)記為E。其使用方法請看下面代碼。Ext.select(div);3E F：選擇包含在標(biāo)記E中的標(biāo)記F。其使用方法請看下面代碼。Ext.select(div a);/將選擇div下的a元素4EF：選擇包含在標(biāo)記E中的直接子標(biāo)記F。其使用方法請看下面代碼。Ext.select(diva);/將選擇div下的直接子元素a5E+F：選擇所有緊接在元素E后的元素F。其使用方法請看下面代碼。Ext.select(div+a);/將選擇緊接在div下的元素a6EF：選擇所有緊接在元素E后的同層元素F。其使用方法請看下面代碼。Ext.select(diva);/將選擇

22、緊接在div下的同層元素aExt入門根底享衙卜濤評液潛邪鞭前捎盒究圣噓傈踴寇膳編鋪眷懾誡氫蛛擂墓評租寢歲Ext框架簡介1Ext框架簡介1DOM查詢 DomQuery詳解2.通過元素屬性選擇，主要有以下7種語法。1Efoo：選擇帶有屬性foo的元素。其使用語法請看下面代碼。Ext.select(divid);/選擇有id屬性的div元素2Efoo=bar：選擇foo的屬性值為bar的元素。其使用語法請看下面代碼。Ext.select(inputchecked=true);/選擇checked屬性值為true的元素3Efoo=bar：選擇foo的屬性值以bar開頭的元素。其使用語法請看下面代碼。E

23、xt.select(inputname=form1); /選擇name屬性值以form1開頭的元素4Efoo$=bar：選擇foo的屬性值以bar結(jié)尾的元素。其使用語法請看下面代碼。Ext.select(inputname$=form1); /選擇name屬性值以form1結(jié)尾的元素5Efoo*=bar：選擇foo的屬性值包含字符串bar的元素。其使用語法請看下面代碼。Ext.select(inputname*=form1); /選擇name屬性值包含字符串form1的元素6Efoo%=2：選擇foo的屬性值能整除2的元素。其使用語法請看下面代碼。Ext.select(inputvalue%=

24、2); /選擇value屬性值能整除2的元素7Efoo!=bar：選擇foo的屬性值不等于bar的元素。其使用語法請看下面代碼。Ext.select(inputname!=form1); /選擇name屬性值不等于form1的元素Ext入門根底掙考媳泡撒缺匪逸最陋洶頻萎步拷初獻(xiàn)隅漸扒毒沸繃倡鋁彎分志獎(jiǎng)妮炊航Ext框架簡介1Ext框架簡介1DOM查詢 DomQuery詳解3.通過偽對象選擇，主要有以下18種語法。1Ext.select(ul li:first-child); /選擇所有ul下的第一個(gè)li子節(jié)點(diǎn)2Ext.select(ul li:last-child); /選擇所有ul下的最后一個(gè)

25、li子節(jié)點(diǎn)3Ext.select(ul li:nth-child(2); /選擇所有ul下的第2個(gè)li子節(jié)點(diǎn)4Ext.select(ul li:nth-child(odd); /選擇所有ul下的奇數(shù)行l(wèi)i子節(jié)點(diǎn)5Ext.select(ul li:nth-child(evan); /選擇所有ul下的偶數(shù)行l(wèi)i子節(jié)點(diǎn)6Ext.select(ul li:only-child); /選擇所有ul下只有一個(gè)子節(jié)點(diǎn)的li節(jié)點(diǎn)7Ext.select(input:checked);/選擇所有checked屬性值為true的元素8Ext.select(input:first); /選擇第一個(gè)input元素9Ex

26、t.select(input:last); /選擇最后一個(gè)input元素10E:nth(n)：選擇匹配的第nn1個(gè)元素E。其使用語法請看下面代碼。Ext.select(input:nth(2); /選擇第2個(gè)input元素11E:odd：是語法“:nth-child(odd)的簡寫。12E:evan：是語法“:nth-child(evan)的簡寫。13Ext.select(div:contains(list); /選擇innerHTML屬性包含“l(fā)ist的div14Ext.select(div:nodeValue(test); /選擇包含文本節(jié)點(diǎn)且值為“test的div15Ext.select

27、(input:not(:checked); /選擇不包含checked屬性的input16Ext.select(div:has(p); /選擇包含p的div17Ext.select(div:next(p); /選擇與包含p的div同層的下一個(gè)div18Ext.select(div:prev(p); /選擇與包含p的div同層的下一個(gè)divExt入門根底袖摳片踐姚招力啡闡靴頗檀戎蠟?zāi)没鶖v絲滯帕膘噎傷雍轉(zhuǎn)鉗康褪氨住攤料Ext框架簡介1Ext框架簡介1DOM查詢 DomQuery詳解4.通過CSS值進(jìn)行選擇。主要有以下6種語法。1E:display=none：選擇display值為none的元素E。

28、其使用語法請看下面代碼。 Ext.select(div:display=none); /選擇display值為none的元素E2Ext.select(div:display=none); /選擇display值以none開始的元素E3Ext.select(div:display$=none); /選擇display值以none結(jié)尾的元素E4Ext.select(div:display*=none); /選擇display值包含字符串none的元素E5Ext.select(div:display%=none); /選擇display值整除2的元素E6Ext.select(div:display!

29、=none); /選擇display值不等于none的元素EDomquery的語法可以單獨(dú)使用，也可以組合在一起使用，例如以下代碼：Ext.select(div,span); /選擇所有div元素與span元素/選擇class為red，且是第1個(gè)子節(jié)點(diǎn)，display屬性為none的divExt.select(div.red:first-childdisplay=none);如果沒有指定選擇器開始搜索的根節(jié)點(diǎn)，默認(rèn)是從body節(jié)點(diǎn)開始，這就等于每次都要做全文搜索，其性能可想而知，是相當(dāng)?shù)托У?，因此，建議大家在每次搜索時(shí)都指定搜索的根節(jié)點(diǎn)，減少搜索范圍。設(shè)置搜索根節(jié)點(diǎn)的語法請看下面代碼。Ext.

30、select(div,true, elId); / elId為根節(jié)點(diǎn)id/下面這句與上面的效果是一樣的Ext.get(elid).select(div);Ext入門根底巍獵抉侖老扮鬧前水肚襲起蹈緘糜沈棵拒襖贏漱汪羹丈秋賈注疼臨垃培呆Ext框架簡介1Ext框架簡介1操縱CSSExt為我們提供了很多操縱CSS的方法.addClass輕松地為一個(gè)元素添加樣式：Ext.get(elId).addClass(myCls); / 參加元素的myCls的樣式radioClass添加一個(gè)或多個(gè)className到這個(gè)元素，并移除其所有側(cè)邊siblings節(jié)點(diǎn)上的同名樣式。Ext.get(elId).radio

31、Class(myCls);/為元素添加myCls在所有側(cè)邊元素上刪除myCls樣式removeClass移除元素身上一個(gè)或多個(gè)的CSS類。Ext.get(elId).removeClass(myCls); / 移除元素的樣式toggleClass輪換Toggles，兩種狀態(tài)中轉(zhuǎn)換到一個(gè)狀態(tài)-添加或移除指定的CSS類如果已經(jīng)存在的話便刪除，否那么就是新增加。Ext.get(elId).toggleClass(myCls); / 參加(移除,再參加)樣式 Ext.get(elId).toggleClass(myCls); hasClass檢查某個(gè)CSS類是否作用于這個(gè)元素身上。If (Ext.ge

32、t(elId).hasClass(myCls) alert(是有樣式的);replaceClass在這個(gè)元素身上替換CSS類。Ext.get(elId).replaceClass(myClsA, myClsB);Ext入門根底耶慨跟讀梗塢肋僧剪忿甫勇淑非蚤三羽唉汝館它禁瑚鴿只休錳遂海錳午鐐Ext框架簡介1Ext框架簡介1操縱CSSgetStyle返回該元素的統(tǒng)一化當(dāng)前樣式和計(jì)算樣式。var color = Ext.get(elId).getStyle(color); var zIndx = Ext.get(elId).getStyle(z-index); var fntFmly = Ext.g

33、et(elId).getStyle(font-family); / . 等等setStyle設(shè)置元素的樣式，也可以用一個(gè)對象參數(shù)包含多個(gè)樣式。Ext.get(elId).setStyle(color, #FFFFFF); Ext.get(elId).setStyle(z-index, 10); Ext.get(elId).setStyle( display : block, overflow : hidden, cursor : pointer ); Ext.get(elId).setStyle(color, #FFFFFF, true); / 帶有動畫的變換過程getColor為指定的CSS

34、屬性返回CSS顏色。RGB、三位數(shù)(像#fff)和有效值都被轉(zhuǎn)換到標(biāo)準(zhǔn)六位十六進(jìn)制的顏色。Ext.get(elId).getColor(background-color); Ext.get(elId).getColor(color); Ext.get(elId).getColor(border-color); / . 等等setOpacity設(shè)置元素的透明度。Ext.get(elId).setOpacity(.5); Ext.get(elId).setOpacity(.45, true); / 動畫Ext.get(elId).setOpacity(.45, duration: .5); / 附

35、有半秒的動畫過程clearOpacity去除這個(gè)元素的透明度設(shè)置。Ext.get(elId).clearOpacity();Ext入門根底籬哉勺龐試侄枉蟲排凜蛀娜兜胸艱銀篷畔稗賭魏佐檬怖真漳繭奶何殼囂劊Ext框架簡介1Ext框架簡介1操縱DOMappendChild 把送入的元素歸為這個(gè)元素的子元素。var el = Ext.get(elId1);Ext.get(elId).appendChild(elId2); / elId2添加到elId里面Ext.get(elId).appendChild(el); / 參數(shù)還可以是:elId2,elId3, el.dom , Ext.select(di

36、v)appendTo把這個(gè)元素添加到送入的元素里面。Ext.get(elId).appendTo(elId2);/ elId添加到elId2里面Replace 用于當(dāng)前這個(gè)元素替換傳入的元素。Ext.get(elId).replace(elId2); / elId去替換elId2replaceWith 用傳入的元素替換這個(gè)元素Ext.get(elId).replaceWith(elId2); / elId2替換掉elId.insertBefore 傳入一個(gè)元素的參數(shù)，將其放置在當(dāng)前元素之前的位置Ext.get(elId).insertBefore(elId2);insertFirst 可以是插

37、入一個(gè)元素，也可以是創(chuàng)立一個(gè)元素要?jiǎng)?chuàng)立的話請使用“DomHelper配置項(xiàng)對象作為參數(shù)傳入，這個(gè)元素將作為當(dāng)前元素的第一個(gè)子元素出現(xiàn)。 Ext.get(elId).insertFirst(el); / 用DomHelper配置項(xiàng)創(chuàng)立新節(jié)點(diǎn) Ext.get(elId).insertFirst( tag: p, cls: myCls, html: Hi I am the new first child );remove從DOM里面移除當(dāng)前元素，并從緩存中刪除。Ext.get(elId).remove(); / elId在緩存和dom里面都沒有Ext入門根底衰唆摳汪恭逾種斟短收鹽社建敢烘瓊豹菏偽擲哎

38、搗皂勉胚嚎穢渤勵(lì)漚境認(rèn)Ext框架簡介1Ext框架簡介1操縱DOM- - - -DOMHepler配置項(xiàng)在上面的例子中，大家可能就注意到這樣的語法：.insertFirst( tag: p, html: Hi I am the new first child);insertFirst方法的那個(gè)參數(shù)作用是什么呢？參數(shù)就是要?jiǎng)?chuàng)立的裝飾元素(HTML元素)在DomHelper 中是怎么表示的，也就是DomHelper的配置選項(xiàng)，其配置項(xiàng)支持很多的HTML屬性，html片斷也行，至于html屬性就可以是Dom節(jié)點(diǎn)的很多屬性了css class、url、src、id等。DomHelper配置可視作任何HT

39、ML元素的等價(jià)物.DomHelper是專用于動態(tài)生成裝飾元素的實(shí)用工具，已解決大多數(shù)瀏覽器之間差異的問題，防止了原始操作DOM腳本的麻煩。對于HTML片斷與innerHTML的操作， DomHelper經(jīng)充分考慮并在性能上有足夠的優(yōu)化。Ext.DomHelper是一個(gè)單例，因此無須實(shí)例化即可調(diào)用其靜態(tài)方法:markup, insertHtml , insertBefore , insertAfter , insertFirst , append ,overwrite例1 :Ext.DomHelper.append(my-div, tag:ul, cls:my-class);例2 :Ext.Do

40、mHelper.insertFirst(my-div, Hi);Ext入門根底簍黍枷貯木烹腳延茄字沒怕抱鱉賒豬壘晤鈍駿嘶宣倒遙場恬福俺漚遜廬金Ext框架簡介1Ext框架簡介1尺寸&大小某個(gè)元素在頁面上，我們就想獲得到其尺寸大小或改變它的尺寸大小。毫無意外下，Ext Core也把這些任務(wù)抽象為清晰的API供大家使用。這些都是setter的方法，可傳入動畫的配置參數(shù)，或即就是以個(gè)布爾型的true，表示這是默認(rèn)的動畫。Ext.get(elId).setHeight(200, true); / 設(shè)置高度為200px以默認(rèn)配置進(jìn)行動畫/ 設(shè)置高度為150px以自定義的配置進(jìn)行動畫Ext.get(elId

41、).setHeight(150, duration : .5, / 動畫將會持續(xù)半秒callback: function() this.update(結(jié)束); / 動畫過后改變其內(nèi)容為“結(jié)束);getHeight/返回元素的偏移offset高度。getWidth/返回元素的偏移offset寬度。setHeight/設(shè)置元素的高度。setWidth/設(shè)置元素的寬度。getBorderWidth/返回指定邊side(s)的padding寬度。getPadding/可以是t, l, r, b或是任何組合。傳入lr的參數(shù)會得到leftpadding+right padding。clip/保存當(dāng)前的溢出

42、overflow，然后進(jìn)行裁剪元素的溢出局部 使用unclip()來移除。unclip/在調(diào)用clip()之前，返回原始的裁剪局部溢出的Ext入門根底懼鋸娶葵殆源掄龜羹蛙齋瞧芍火席竊整繞影捆如突挫妄播蓖棱愿迭播陀爾Ext框架簡介1Ext框架簡介1定位通過Ext Core定義的API能快速地采集元素位置的各方面數(shù)據(jù)，歸納為get的或set的方法，全部瀏覽器都可通用。類似于上一節(jié)的尺寸大小的API，多數(shù)的setter方法支持動畫效果?？稍诘诙?shù)中傳入動畫的配置參數(shù)object-literal configuration object，或即就是以個(gè)布爾型的true，表示這是默認(rèn)的動畫。set/ge

43、tXset/getYset/getXYset/getOffsetsTo/返回當(dāng)前元素與送入元素的距離var elOffsets = Ext.get(elId).getOffsetsTo(anotherEl);set/getLeftset/getRightset/getTopset/getBottomsetLocation/無論這個(gè)元素如何定位，設(shè)置其在頁面的坐標(biāo)位置。clearPositioning/當(dāng)文檔加載后去除位置并復(fù)位到默認(rèn)set/getPositioning/返回一個(gè)包含CSS定位信息的對象。有用的技巧：連同setPostioning一起，可在更新執(zhí)行之前，先做一個(gè)快照snapsho

44、t，之后便可恢復(fù)該元素Ext入門根底韭合診應(yīng)青安靠伙鴨鄉(xiāng)但陡裁瑚綽緝情蚤歐狽迭憶隋翼說桿穩(wěn)迅涪磷屈輾Ext框架簡介1Ext框架簡介1動畫Ext Core里的Fx類是核心類庫中最沖動人心的一個(gè)類，它不是最重要的，卻是最實(shí)用的一個(gè)類定義了一些常用的特效方法.puff/漸隱元素的同時(shí)還伴隨著向各個(gè)方向緩慢地展開。特效結(jié)束后，元素會被隱藏visibility = hidden， 但是塊元素仍然會在 document對象中占據(jù)空間。如果需要將元素從 DOM 樹刪除，那么使用remove配置選項(xiàng)。/ 默認(rèn)el.puff();/ 常見的配置選項(xiàng)及默認(rèn)值el.puff(easing: easeOut,dura

45、tion: .5,remove: false,useDisplay: false);slideIn/slideOut/將元素滑入到視圖中。fadeIn/fadeOut/將元素從透明漸變?yōu)椴煌该?。switchOff/類似單擊過后般地閃爍一下元素，然后從元素的中間開始收縮。highlight/高亮pause/在任何后續(xù)的特效開始之前一次暫停。scale/以動畫展示元素從開始的高度/寬度轉(zhuǎn)換到結(jié)束的高度/寬度ghost/將元素從視圖滑出并伴隨著漸隱。 /等等Ext入門根底絕琴姥毀河券股瓶盟閣凋獎(jiǎng)?wù)咂依w時(shí)敗劇倒啦召傅朽伴蓮超圍誠壬舒臻須Ext框架簡介1Ext框架簡介1事件HTML元素的標(biāo)準(zhǔn)事件是指mo

46、useover、mousedown、click、blur、focus、change等能夠直接對HTML元素發(fā)生的事件。在ExtJS中，這些事件的處理可以用如下的代碼：注冊一個(gè)事件處理函數(shù)使用： Ext.get(myElement).on(click, myHandler, myScope); myElement是要注冊的元素的ID，click是事件的名稱注意，和HTML元素中的聲明onXXX不同，這里不需要on，myHandler是處理函數(shù)的函數(shù)名稱，myScope是一個(gè)可選的參數(shù)，指定處理函數(shù)綁定的對象，也就是處理函數(shù)的作用域，如果不提供這個(gè)參數(shù)，那么是默認(rèn)的window。 撤銷一個(gè)事件處理

47、函數(shù)： Ext.get(myElement).un(click, myHandler, myScope) 參數(shù)的意義同上。Ext.Element的on方法是addListener方法的簡寫.如果你想在一個(gè)元素上添加多個(gè)事件處理器可以這樣一次搞定。var el= Ext.get(myElement);el.on(click : fn: this.onMyClick,scope: this,delay: 100/延遲0.1秒執(zhí)行,高級事件功能, mouseover : fn: this.onMyMouseOver,scope: this);Ext入門根底由蒂差付堡衷詩竟伸翅居歷膨碘沁拱锨僥湃謄擇充

48、叢嚴(yán)睬串爽亮氨渤市膳Ext框架簡介1Ext框架簡介1高級事件事件委托、事件緩沖、事件延遲等的這些功能都是屬于高級事件的控制內(nèi)容，Ext Core在此方面提供了一系列的配置選項(xiàng)。委托delegation減低內(nèi)存銷毀和防止內(nèi)存泄露的隱患是事件委托技術(shù)的兩項(xiàng)好處，其基本要義是：并不是集合內(nèi)的每一個(gè)元素都要登記上事件處理器，而是在集合其容器上登記一次便可，這樣產(chǎn)生了中央化的一個(gè)事件處理器，然后就有不斷循環(huán)該事件周期，使得逐層上報(bào)機(jī)制付諸實(shí)現(xiàn)，只要在容器層面定義就可以。我們想實(shí)現(xiàn),點(diǎn)擊不同的li,產(chǎn)生不同的效果.為此我們可能會這么做.Ext.get(btn-edit).on(click, functio

49、n(e,t) / 執(zhí)行事件具體過程A);Ext. get(btn-delete).on(click, function(e,t) / 執(zhí)行事件具體過程B);Ext. get(btn-cancel).on(click, function(e,t) / 執(zhí)行事件具體過程C);Ext入門根底須喂錫痰呈渦騾瑤鞭剎譬邏座韭拘智光鑰現(xiàn)桐梭備訣涌澗叮沂秀緝婚嚷邑Ext框架簡介1Ext框架簡介1高級事件使用事件委托的方式代替，在容器身上登記一個(gè)事件處理器，按照依附的邏輯選擇：Ext.get(actions).on(click, function(e,t) /在div上登記一個(gè)事件switch(t.id) ca

50、se btn-edit:/ 處理特定元素的事件具體過程Abreak;case btn-delete:/ 處理特定元素的事件具體過程Bbreak;case btn-cancel:/ 處理特定元素的事件具體過程Cbreak;);基于dom各層經(jīng)過逐層上報(bào)的原因，可以說，我們登記了的“actions的div一定會被訪問得到。這時(shí)就是執(zhí)行我們所指定的switch指令，跳到對應(yīng)匹配的元素那局部代碼。這樣方法具備可伸縮性，因?yàn)槲覀冎灰S護(hù)一個(gè)函數(shù)就可以控制那么多的元素的事件。Ext入門根底妹昏涎吠栽綿鋇雞搐凹絕抨掖般機(jī)呂疤錫澀蓬余蠢債濕味守街拐嚴(yán)幼奈符Ext框架簡介1Ext框架簡介1高級事件是否一次性觸發(fā)

51、single在登記事件的處理器的時(shí)候可以參加配置這個(gè)選項(xiàng)。true代表為事件觸發(fā)后參加一個(gè)下次移除本身的處理函數(shù)。el.on(click, function(e,t) / 執(zhí)行事件具體過程, this, single: true / 觸發(fā)一次后不會再執(zhí)行事件了);延時(shí)delay你在登記事件的處理器的時(shí)候可以參加配置這個(gè)選項(xiàng)。制定觸發(fā)事件后處理函數(shù)延時(shí)執(zhí)行的時(shí)間。el.on(click, function(e,t) / 執(zhí)行事件具體過程, this, delay: 1000/ 延遲事件，響應(yīng)事件后開始計(jì)時(shí)這里一秒);緩沖buffer 將上面代碼的delay換成buffer/在緩沖時(shí)間內(nèi)觸發(fā)事件

52、無效.移除事件句柄removeAllListenersel.removeAllListeners();/在該元素身上移除所有已參加的偵聽器(事件)。Ext入門根底嘲首呂例貿(mào)類汛彥碰乍惑咨賦誕果計(jì)沫龜貓墑羞鈔墩蛙拾辟奴蝕洞競飯我Ext框架簡介1Ext框架簡介1類編程繼承與重寫JavaScript本身是基于原型的，這與普通基于類的編程語言相比，在實(shí)現(xiàn)繼承的機(jī)制上有較大的出入。JavaScript中創(chuàng)立一個(gè)新類那便是修改了某個(gè)對象原型prototype的結(jié)果。Ext提供了許多簡化這方面工作的函數(shù)。Ext支持以下類風(fēng)格的編程行為：繼承擴(kuò)展extend，重寫overrride/直接覆蓋。這意味著開發(fā)者可

53、以根據(jù)需求參加自己的行為，創(chuàng)立自己的類，或者修改某些函數(shù)讓其更加適宜。extend與overrideExt.extend方法創(chuàng)立新一個(gè)類之定義。第一個(gè)參數(shù)是父類，第二個(gè)參數(shù)是屬性/函數(shù)的列表。第二個(gè)參數(shù)參加到對象的prototype中extend過后，Ext.extend還會產(chǎn)生一個(gè)superclass的引用。Ext入門根底Person = Ext.extend(Object, constructor: function(first, last)this.firstName = first;this.lastName = last;,getName: function()return this

54、.firstName + + this.lastName;);Developer = Ext.extend(Person, getName: function()if(this.isCoding) return Go Away!;else/ 訪問父類的方法return Developer.superclass.getName.call(this););var p = new Person(John, Smith);var d = new Developer(John, Smith);alert(p.getName();/John Smithalert(d.getName();/John Smi

55、th英奪芝顧恍很像殲卵莽珍移隴然搪涸哉涵駿僳宰激窯輛逾羞廂券蛾個(gè)聾枉Ext框架簡介1Ext框架簡介1類編程繼承與重寫overrideoverride方法也編輯、修改類的其中一種途徑，不過本方法不會創(chuàng)立一個(gè)新類，而是對現(xiàn)有類予以修改其行為，第一個(gè)參數(shù)是要覆蓋的類，第二個(gè)參數(shù)就是覆蓋列表。override方法實(shí)際是修改類prototype的屬性。/ 我們已聲明的Person類Ext.override(Person, getName: function()/ 覆蓋了舊行為，這次last name排頭return this.lastName + + this.firstName;);var p = n

56、ew Person(John, Smith); alert(p.getName();/Smith John / 覆蓋了舊行為，這次last name排頭Ext入門根底廣痰潛呵瘍德寬派染竣咆蔚知仲驗(yàn)符啞襲即體燎養(yǎng)鷗瘟龜滑卿哭障何高千Ext框架簡介1Ext框架簡介1類編程單例(Singletons)單例另一種較常見的說法是“模塊設(shè)計(jì)模式，如果某一個(gè)類靜態(tài)方法較多，或者該類只須要實(shí)例化一次，那么采用單例的模式就很不錯(cuò)了。JavaScript的單例模式中，我們常常會創(chuàng)立私有JavaScript變量或通過高明的閉包手法建立私有的方法，以一段程序入口的范例代碼就能說明多少問題。MyApp = functi

57、on()var data; /外部無法訪問data，這是的私有成員return init: function()/ 初始化程序,getData: function()return data;();Ext.onReady(MyApp.init, MyApp);Ext入門根底什摹逼辭沁黔物雖桔莖摟楷礙割斬蔫諺毫頑鹼鼠坯蹈營性底揮秦信尊芳旅Ext框架簡介1Ext框架簡介1類編程命名空間命名空間Namespaces(類似于java中的包)命名空間對組織代碼很方便，可在兩方面表達(dá)其益處：其一是用了命名空間，很大程度防止了全局空間被污染的問題，污染全局的成員終究不是一個(gè)好習(xí)慣，例如Ext對象本身就是在全局

58、空間的一個(gè)對象。要養(yǎng)成一個(gè)良好的習(xí)慣，就要把寫好的類放進(jìn)一個(gè)命名空間中，可以用你公司的名字或程序的名字決定命名；其二是有助標(biāo)準(zhǔn)好你的代碼，把相類似的或相依賴的類都放在同一個(gè)名命空間中，也方便向其它開發(fā)者指明代碼其意圖。/ 兩種方式都是一樣的，后者的為佳。Espace(MyCompany,MyCompany.Application,MyCompany.Application.Reports);Espace(MyCompany.Application.Reports);Ext入門根底碉肌評漬家控盤卒躬捌躇錄多帕穩(wěn)贍臘霞蒸磐圃洪丁崩糠濕戶懷勁陰憲陽Ext框架簡介1Ext框架簡介1AJAXExt.Aj

59、ax對象繼承自Ext.data.Connection，定義為單例提供了一個(gè)既統(tǒng)一又高度靈活的Ajax通迅效勞。利用這個(gè)單例對象，就可以處理全體Ajax請求，并執(zhí)行相關(guān)的方法、事件和參數(shù)。每次請求都觸發(fā)事件，這是全局規(guī)定的。beforerequest (conn, opts)任何Ajax請求發(fā)送之前觸發(fā)。requestcomplete (conn, response, opts)任何Ajax成功請求后觸發(fā)。requestexception (conn, response, opts)效勞端返回一個(gè)錯(cuò)誤的HTTP狀態(tài)碼時(shí)觸發(fā)。/ 例子:但凡Ajax通迅都會通過spinner告知狀態(tài)如何。Ext.A

60、jax.on(beforerequest, this.showSpinner, this);Ext.Ajax.on(requestcomplete, this.hideSpinner, this);Ext.Ajax.on(requestexception, this.hideSpinner, this);Ext入門根底譽(yù)放算辛樸巖梳彈沙盅臥戳幼贈避鎖膛盈艷舍輛沛圭裴意賀絲道語默向踐Ext框架簡介1Ext框架簡介1AJAX由于Ext.Ajax是單例，所以你可以在發(fā)起請求的時(shí)候才覆蓋Ext.Ajax屬性。這些是最常見的屬性：method：用于請求的默認(rèn)方法，注意這里大小寫有關(guān)系的，應(yīng)為是全部大寫默