ExtJS開發(fā)框架入門.ppt

1、Ext JS開發(fā)框架入門,框架簡介、環(huán)境搭建、helloWord示例,EXT核心組件應(yīng)用,Ext框架,EXT框架基礎(chǔ),Ext 框架簡介,怎樣搭建EXT運(yùn)行環(huán)境及開發(fā)環(huán)境,helloWord示例程序,框架簡介、環(huán)境搭建及HelloWord,Ext框架簡介,什么是ext？ Ext是一個(gè)Ajax框架，可以用來開發(fā)帶有華麗外觀的富客戶端應(yīng)用，使得我們的b/s應(yīng)用更加具有活力及生命力，提高用戶體驗(yàn)。 Ext是一個(gè)用javascript編寫，與后臺(tái)技術(shù)無關(guān)的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各種開發(fā)語言開發(fā)的應(yīng)用中。 Ext最新版本是ext3.2,Ext框架簡介,Ext提

2、供一系列的對象類，這些基本上都是用于處理WEB頁面控件的。 Ext的發(fā)布包括三個(gè)方面的內(nèi)容：API參考手冊、示例程序及開發(fā)包。,Ext框架簡介,EXT API參考手冊,Ext框架簡介,示例程序,Ext示例程序包共包括十二大類近100示例程序 。,Ext框架簡介,開發(fā)包,adapter ：負(fù)責(zé)將里面提供第三方底層庫（包括Ext自帶的底層庫）映射為Ext所支持的底層庫。 build ：壓縮后的ext全部源碼(里面分類存放)。 docs ： API幫助文檔。 exmaples：提供使用ExtJs技術(shù)做出的小實(shí)例。 resources：Ext UI資源文件目錄，如CSS、圖片文件都存放在這里面。 so

3、urce ：無壓縮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框架簡介,怎樣搭建EXT運(yùn)行環(huán)境及開發(fā)環(huán)境,開發(fā)環(huán)境 把Ext的開發(fā)包直接復(fù)制到WEB工程的目錄下,helloWord示例程序,新建HTML文件并在頁面中引入Ext

4、JS的樣式及ExtJS庫文件 樣式文件為resources/css/ext-all.css 庫文件主要包含兩個(gè)：adapter/ext/ext-base.js及ext-all.js 其中ext-base.js是框架基礎(chǔ)庫，ext-all.js是extjs的核心庫。, ,helloWord示例程序,helloWord在HTML直接嵌入代碼實(shí)現(xiàn), Ext.onReady(function() Ext.Msg.alert(helloWord,Hello Word!); ); ,helloWord示例程序,Ext類庫簡介,Ext框架基礎(chǔ)及核心簡介,Ext組件簡介,Ext入門基礎(chǔ),Ext類庫簡介,Ext

5、JS 由一系列的類庫組成，一旦頁面成功加載了ExtJS 庫后，我們就可以在頁面中調(diào)用ExtJS 的類及控件來實(shí)現(xiàn)需要的功能。ExtJS 的類庫由以下幾部分組成： 底層API(core) 控件(widgets) 實(shí)用工具(Utils),Ext類庫簡介,底層API(core)：底層API 中提供了對DOM 操作、查詢的封裝、事件處理、DOM 查詢器等基礎(chǔ)的功能。其它控件都是建立在這些底層api 的基礎(chǔ)上，底層api 位于源代碼目錄的core 子目錄中，包括DomHelper.js、Element.js 等文件。,Ext類庫簡介,控件(widgets)：控件是指可以直接在頁面中創(chuàng)建的可視化組件，比如

6、面板、選項(xiàng)板、表格、樹、窗口、菜單、工具欄、按鈕等等，在我們的應(yīng)用程序中可以直接通過應(yīng)用這些控件來實(shí)現(xiàn)友好、交互性強(qiáng)的應(yīng)用程序的UI?？丶挥谠创a目錄的widgets 子目錄中。,Ext類庫簡介,實(shí)用工具Utils：Ext 提供了很多的實(shí)用工具，可以方便我們實(shí)現(xiàn)如數(shù)據(jù)內(nèi)容格式化、JSON數(shù)據(jù)解碼或反解碼、對Date、Array、發(fā)送Ajax 請求、Cookie 管理、CSS 管理等擴(kuò)展等功能,Ext入門基礎(chǔ),尺寸Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom);); /Html頁面中包含一個(gè)id為hello的div，代碼如下：aaa 在上面的

7、代碼中，Ext.getDom(hello)、Ext.getDom(e)、Ext.getDom(e.dom)等三個(gè)語句返回都是同一個(gè)DOM節(jié)點(diǎn)對象。,Ext中 get、getDom、getCmp的區(qū)別,Ext入門基礎(chǔ),get方法中只有一個(gè)參數(shù)，這個(gè)參數(shù)是混合參數(shù)，可以是DOM節(jié)點(diǎn)的id、也可以是一個(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.getElementBy

8、Id(hello); Ext.get(e);); /Html頁面中包含一個(gè)id為hello的div，代碼如下：aaa Ext.get(hello)、Ext.get(document.getElementById(hello)、Ext.get(e)等三個(gè)方法都可以得到一個(gè)與DOM節(jié)點(diǎn)hello對應(yīng)的Ext元素。,Ext中 get、getDom、getCmp的區(qū)別,Ext入門基礎(chǔ),getCmp方法用來獲得一個(gè)Ext組件，也就是一個(gè)已經(jīng)在頁面中初始化了的Component或其子類的對象，getCmp方法中只有一個(gè)參數(shù)，也就是組件的id。 getCmp方法其實(shí)是Ext.ComponentMgr.get

9、方法的簡寫形式。 Ext.onReady(function() var myPanel=new Ext.Panel( id:“myFirstPanel”, title:“舊的標(biāo)題, renderTo:hello, 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

10、、getCmp的區(qū)別,Ext.Element占Ext Core庫的篇幅很大，其中方法就占據(jù)了大部份。因此我們將這些方法可分為下面幾類： DOM查詢或遍歷（如query、select、findParent） CSS（如setStyle、addClass） DOM操控（如createChild、remove） 方位、尺寸（如getHeight、getWidth）,Ext入門基礎(chǔ),DOM的增刪改查,DOM查詢,獲取下一個(gè)側(cè)邊節(jié)點(diǎn)，跳過文本節(jié)點(diǎn)。可選地可送入一個(gè)期待的選擇符。 Ext.get(elId).next(); 類似的還有: Ext.get(elId).prev();/上一個(gè)側(cè)邊節(jié)點(diǎn) Ext.

11、get(elId).first();/第一個(gè)節(jié)點(diǎn) Ext.get(elId).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)用于Composit

12、eElement對象上,如: ps.highlight();/select方法返回的結(jié)果可直接如同Element般地操作 或是: Ext.select(p).highlight(); 當(dāng)然,select參數(shù)還可以更復(fù)雜一些,其中可以包括CSS選擇符,基本的XPath,HTML屬性等,Ext入門基礎(chǔ),DOM查詢-Ext.query與Ext.select,Ext.query和Ext.select的作用同是根據(jù)CSS選擇符,基本的XPath,HTML屬性等查找出一個(gè)或多個(gè)元素。區(qū)別在于返回類型上。 分別是：query方法返回的是JavaScript標(biāo)準(zhǔn)的數(shù)組類型； select方法返回的是Compo

13、siteElement類型，試比較： alter(Ext.isArray(Ext.query(a.BigClass); /true alter(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對象上所有的接口，也就是說Co

14、mpositeElement在Ext中用于表示元素的集合中不論有多少個(gè)元素，均被視為一個(gè)單獨(dú)元素處理。 它的用法和單個(gè)的Element對象一樣。select方法返回的結(jié)果可直接如同Element般地操作，一般比query方法常用。,Ext入門基礎(chǔ),DOM查詢- DomQuery詳解,DomQuery是Ext Core提供的HTML或XML文檔選擇器，它支持大部分的CSS 3選擇器規(guī)則，同時(shí)提供了一些自定義方式. DomQuery主要有4種選擇方式：元素標(biāo)記、元素屬性、偽對象、 CSS值 1.通過元素標(biāo)記選擇，主要有以下6種方法： （1）*：選擇任何元素。其使用方法請看下面代碼。 Ext.sel

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

16、ct(diva);/將選擇緊接在div下的同層元素a,Ext入門基礎(chǔ),DOM查詢- DomQuery詳解,2.通過元素屬性選擇，主要有以下7種語法。 （1）Efoo：選擇帶有屬性foo的元素。其使用語法請看下面代碼。 Ext.select(divid);/選擇有id屬性的div元素 （2）Efoo=bar：選擇foo的屬性值為bar的元素。其使用語法請看下面代碼。 Ext.select(inputchecked=true);/選擇checked屬性值為true的元素 （3）Efoo=bar：選擇foo的屬性值以bar開頭的元素。其使用語法請看下面代碼。 Ext.select(inputname

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

18、value屬性值能整除2的元素 （7）Efoo!=bar：選擇foo的屬性值不等于bar的元素。其使用語法請看下面代碼。 Ext.select(inputname!=form1); /選擇name屬性值不等于form1的元素,Ext入門基礎(chǔ),DOM查詢- DomQuery詳解,3.通過偽對象選擇，主要有以下18種語法。 （1）Ext.select(ul li:first-child); /選擇所有ul下的第一個(gè)li子節(jié)點(diǎn) （2）Ext.select(ul li:last-child); /選擇所有ul下的最后一個(gè)li子節(jié)點(diǎn) （3）Ext.select(ul li:nth-child(2); /

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

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

21、elect(input:not(:checked); /選擇不包含checked屬性的input （16）Ext.select(div:has(p); /選擇包含p的div （17）Ext.select(div:next(p); /選擇與包含p的div同層的下一個(gè)div （18）Ext.select(div:prev(p); /選擇與包含p的div同層的下一個(gè)div,Ext入門基礎(chǔ),DOM查詢- DomQuery詳解,4.通過CSS值進(jìn)行選擇。主要有以下6種語法。 （1）E:display=none：選擇display值為none的元素E。其使用語法請看下面代碼。 Ext.select(div

22、:display=none); /選擇display值為none的元素E （2）Ext.select(div:display=none); /選擇display值以none開始的元素E （3）Ext.select(div:display$=none); /選擇display值以none結(jié)尾的元素E （4）Ext.select(div:display*=none); /選擇display值包含字符串none的元素E （5）Ext.select(div:display%=none); /選擇display值整除2的元素E （6）Ext.select(div:display!=none); /選擇d

23、isplay值不等于none的元素E Domquery的語法可以單獨(dú)使用，也可以組合在一起使用，例如以下代碼： Ext.select(div,span); /選擇所有div元素與span元素 /選擇class為red，且是第1個(gè)子節(jié)點(diǎn)，display屬性為none的div Ext.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.select

24、(div,true, elId); / elId為根節(jié)點(diǎn)id /下面這句與上面的效果是一樣的 Ext.get(elid).select(div);,Ext入門基礎(chǔ),操縱CSS,Ext為我們提供了很多操縱CSS的方法. addClass輕松地為一個(gè)元素添加樣式： Ext.get(elId).addClass(myCls); / 加入元素的myCls的樣式 radioClass添加一個(gè)或多個(gè)className到這個(gè)元素，并移除其所有側(cè)邊（siblings）節(jié)點(diǎn)上的同名樣式。 Ext.get(elId).radioClass(myCls);/為元素添加myCls在所有側(cè)邊元素上刪除myCls樣式 r

25、emoveClass移除元素身上一個(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.get(elId).hasClass(myCls) alert(是有樣式的

26、); replaceClass在這個(gè)元素身上替換CSS類。 Ext.get(elId).replaceClass(myClsA, myClsB);,Ext入門基礎(chǔ),操縱CSS,getStyle返回該元素的統(tǒng)一化當(dāng)前樣式和計(jì)算樣式。 var color = Ext.get(elId).getStyle(color); var zIndx = Ext.get(elId).getStyle(z-index); var fntFmly = Ext.get(elId).getStyle(font-family); / . 等等 setStyle設(shè)置元素的樣式，也可以用一個(gè)對象參數(shù)包含多個(gè)樣式。 Ext.

27、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); / 帶有動(dòng)畫的變換過程 Ext.get(elId).setStyle(color, #FFFFFF, duration: .75); / 帶有0.75秒動(dòng)畫變換過程 getColor為指定的CSS屬性返

28、回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); / 動(dòng)畫 Ext.get(elId).setOpacity(.45, duration: .5); /

29、附有半秒的動(dòng)畫過程 clearOpacity清除這個(gè)元素的透明度設(shè)置。 Ext.get(elId).clearOpacity();,Ext入門基礎(chǔ),操縱DOM,appendChild 把送入的元素歸為這個(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(div) appendTo把這個(gè)元素添加到送入的元素里面。 Ext.get(elI

30、d).appendTo(elId2);/ elId添加到elId2里面 Replace 用于當(dāng)前這個(gè)元素替換傳入的元素。 Ext.get(elId).replace(elId2); / elId去替換elId2 replaceWith 用傳入的元素替換這個(gè)元素 Ext.get(elId).replaceWith(elId2); / elId2替換掉elId. insertBefore 傳入一個(gè)元素的參數(shù)，將其放置在當(dāng)前元素之前的位置 Ext.get(elId).insertBefore(elId2); insertFirst 可以是插入一個(gè)元素，也可以是創(chuàng)建一個(gè)元素（要?jiǎng)?chuàng)建的話請使用“DomH

31、elper配置項(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入門基礎(chǔ),操縱DOM- - - -DOMHepler配置項(xiàng),在上面的例子中，大家可能就注意到這樣的

32、語法： .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配置可視作任何HTML元素的等價(jià)物. DomHelper是專用于動(dòng)態(tài)生成裝飾元素的實(shí)用工具，已解決大多數(shù)瀏覽器之間差別的問題，避免了原始操作DOM

33、腳本的麻煩。對于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.DomHelper.insertFirst(my-div, Hi);,Ext入門基礎(chǔ),尺寸 / 設(shè)置高度為200px以默認(rèn)

34、配置進(jìn)行動(dòng)畫 / 設(shè)置高度為150px以自定義的配置進(jìn)行動(dòng)畫 Ext.get(elId).setHeight(150, duration : .5, / 動(dòng)畫將會(huì)持續(xù)半秒 callback: function() this.update(結(jié)束); / 動(dòng)畫過后改變其內(nèi)容為“結(jié)束” ); getHeight/返回元素的偏移（offset）高度。 getWidth/返回元素的偏移（offset）寬度。 setHeight/設(shè)置元素的高度。 setWidth/設(shè)置元素的寬度。 getBorderWidth/返回指定邊（side(s)）的padding寬度。 getPadding/可以是t, l, r

35、, b或是任何組合。傳入lr的參數(shù)會(huì)得到leftpadding+right padding。 clip/保存當(dāng)前的溢出（overflow），然后進(jìn)行裁剪元素的溢出部分 使用unclip()來移除。 unclip/在調(diào)用clip()之前，返回原始的裁剪部分（溢出的）,Ext入門基礎(chǔ),定位,通過Ext Core定義的API能快速地采集元素位置的各方面數(shù)據(jù)，歸納為get的或set的方法，全部瀏覽器都可通用。類似于上一節(jié)的尺寸大小的API，多數(shù)的setter方法支持動(dòng)畫效果?？稍诘诙?shù)中傳入動(dòng)畫的配置參數(shù)（object-literal configuration object），或即就是以個(gè)布爾型的

36、true， 表示這是默認(rèn)的動(dòng)畫。 set/getX set/getY set/getXY set/getOffsetsTo/返回當(dāng)前元素與送入元素的距離 var elOffsets = Ext.get(elId).getOffsetsTo(anotherEl); set/getLeft set/getRight set/getTop set/getBottom setLocation/無論這個(gè)元素如何定位，設(shè)置其在頁面的坐標(biāo)位置。 clearPositioning/當(dāng)文檔加載后清除位置并復(fù)位到默認(rèn) set/getPositioning/返回一個(gè)包含CSS定位信息的對象。有用的技巧：連同setP

37、ostioning 一起，可在更新執(zhí)行之前，先做一個(gè)快照（snapshot），之后便可恢復(fù)該元素,Ext入門基礎(chǔ),動(dòng)畫,Ext Core里的Fx類是核心類庫中最激動(dòng)人心的一個(gè)類，它不是最重要的，卻是最實(shí)用的一個(gè)類定義了一些常用的特效方法. puff/漸隱元素的同時(shí)還伴隨著向各個(gè)方向緩慢地展開。特效結(jié)束后，元素會(huì)被隱藏（visibility = hidden）， 但是塊元素仍然會(huì)在 document對象中占據(jù)空間。如果需要將元素從 DOM 樹刪除，則使用remove配置選項(xiàng)。 / 默認(rèn) el.puff(); / 常見的配置選項(xiàng)及默認(rèn)值 el.puff( easing: easeOut, dura

38、tion: .5, remove: false, useDisplay: false ); slideIn/slideOut/將元素滑入到視圖中。 fadeIn/fadeOut/將元素從透明漸變?yōu)椴煌该鳌?switchOff/類似單擊過后般地閃爍一下元素，然后從元素的中間開始收縮。 highlight/高亮 pause/在任何后續(xù)的特效開始之前一次暫停。 scale/以動(dòng)畫展示元素從開始的高度/寬度轉(zhuǎn)換到結(jié)束的高度/寬度 ghost/將元素從視圖滑出并伴隨著漸隱。 /等等,Ext入門基礎(chǔ),事件,HTML元素的標(biāo)準(zhǔn)事件是指mouseover、mousedown、click、blur、focus、

39、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è)事件處理函數(shù)： Ext.get(myElement).un(click,

40、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入門基礎(chǔ),高級事件,事件委托、事件緩沖、事件延遲等的這些功能都是屬于高級事件的控制內(nèi)容， Ext Core

41、在此方面提供了一系列的配置選項(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)生不同的效果.為此我們可能會(huì)這么做. Ext.get(btn-edit).on(click, function(e,t) / 執(zhí)行事件具體過程A); Ext. get(btn-delete).on(click, function(e,t

42、) / 執(zhí)行事件具體過程B); Ext. get(btn-cancel).on(click, function(e,t) / 執(zhí)行事件具體過程C);,Ext入門基礎(chǔ),高級事件,使用事件委托的方式代替，在容器身上登記一個(gè)事件處理器，按照依 附的邏輯選擇： Ext.get(actions).on(click, function(e,t) /在div上登記一個(gè)事件 switch(t.id) case btn-edit: / 處理特定元素的事件具體過程A break; case btn-delete: / 處理特定元素的事件具體過程B break; case btn-cancel: / 處理特定元素的

43、事件具體過程C break; ); 基于dom各層經(jīng)過逐層上報(bào)的原因，可以說，我們登記了的“actions”的div一定會(huì)被訪問得到。這時(shí)就是執(zhí)行我們所指定的switch指令，跳到對應(yīng)匹配的元素那部分代碼。這樣方法具備可伸縮性，因?yàn)槲覀冎灰S護(hù)一個(gè)函數(shù)就可以控制那么多的元素的事件。,Ext入門基礎(chǔ),高級事件,是否一次性觸發(fā)single 在登記事件的處理器的時(shí)候可以加入配置這個(gè)選項(xiàng)。true代表為事件觸發(fā)后加入一個(gè)下次移除本身的處理函數(shù)。 el.on(click, function(e,t) / 執(zhí)行事件具體過程 , this, single: true / 觸發(fā)一次后不會(huì)再執(zhí)行事件了 ); 延

44、時(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ā)事件 無效. 移除事件句柄removeAllListeners el.removeAllListeners();/在該元素身上移除所有已加入的偵聽器(事件)。,Ext入門基礎(chǔ),類編程-繼承與重寫,JavaScript本身是基于原型的，這與普通基于類的編程語

45、言相比，在實(shí)現(xiàn)繼承的機(jī)制上有較大的出入。JavaScript中創(chuàng)建一個(gè)新類那便是修改了某個(gè)對象原型（prototype）的結(jié)果。Ext提供了許多簡化這方面工作的函數(shù)。 Ext支持以下類風(fēng)格的編程行為：繼承擴(kuò)展（extend），重寫（overrride）/直接覆蓋。這意味著開發(fā)者可以根據(jù)需求加入自己的行為，創(chuàng)建自己的類，或者修改某些函數(shù)讓其更加合適。 extend與override Ext.extend方法創(chuàng)建新一個(gè)類之定義。第一個(gè)參數(shù)是父類，第二個(gè)參數(shù)是屬性/函數(shù)的列表。第二個(gè)參數(shù)加入到對象的prototype中extend過后，Ext.extend還會(huì)產(chǎn)生一個(gè)superclass的引用。,E

46、xt入門基礎(chǔ),Person = Ext.extend(Object, constructor: function(first, last) this.firstName = first; this.lastName = last; , getName: function() return this.firstName + + this.lastName; );,Developer = Ext.extend(Person, getName: function() if(this.isCoding) return Go Away!; else / 訪問父類的方法 return Developer.

47、superclass.getName.call(this); ); var p = new Person(John, Smith); var d = new Developer(John, Smith); alert(p.getName();/John Smith alert(d.getName();/John Smith,類編程-繼承與重寫,override override方法也編輯、修改類的其中一種途徑，不過本方法不會(huì)創(chuàng)建一個(gè)新類，而是對現(xiàn)有類予以修改其行為，第一個(gè)參數(shù)是要覆蓋的類，第二個(gè)參數(shù)就是覆蓋列表。override方法實(shí)際是修改類prototype的屬性。 / 我們已聲明的Per

48、son類 Ext.override(Person, getName: function() / 覆蓋了舊行為，這次last name排頭 return this.lastName + + this.firstName; ); var p = new Person(John, Smith); alert(p.getName();/Smith John / 覆蓋了舊行為，這次last name排頭,Ext入門基礎(chǔ),類編程-單例(Singletons),單例另一種較常見的說法是“模塊設(shè)計(jì)模式”，如果某一個(gè)類靜態(tài)方法較多，或者該類只須要實(shí)例化一次，那么采用單例的模式就很不錯(cuò)了。JavaScript的單

49、例模式中，我們常常會(huì)創(chuàng)建私有JavaScript變量或通過高明的閉包手法建立私有的方法，以一段程序入口的范例代碼就能說明多少問題。 MyApp = function() var data; /外部無法訪問data，這是的私有成員 return init: function() / 初始化程序 , getData: function() return data; ; (); Ext.onReady(MyApp.init, MyApp);,Ext入門基礎(chǔ),類編程-命名空間,命名空間（Namespaces）(類似于java中的包) 命名空間對組織代碼很方便，可在兩方面體現(xiàn)其益處：其一是用了命名空間，

50、很大程度避免了全局空間被污染的問題，污染全局的成員終究不是一個(gè)好習(xí)慣，例如Ext對象本身就是在全局空間的一個(gè)對象。要養(yǎng)成一個(gè)良好的習(xí)慣，就要把寫好的類放進(jìn)一個(gè)命名空間中，可以用你公司的名字或程序的名字決定命名；其二是有助規(guī)范好你的代碼，把相類似的或相依賴的類都放在同一個(gè)名命空間 中，也方便向其它開發(fā)者指明代碼其意圖。 / 兩種方式都是一樣的，后者的為佳。 Espace( MyCompany, MyCompany.Application, MyCompany.Application.Reports ); Espace(MyCompany.Application.Rep

51、orts);,Ext入門基礎(chǔ),AJAX,Ext.Ajax對象繼承自Ext.data.Connection，定義為單例提供了一個(gè)既統(tǒng)一又高度靈活的Ajax通迅服務(wù)。利用這個(gè)單例對象，就可以處理全體Ajax請求，并執(zhí)行相關(guān)的方法、事件和參數(shù)。 Ext.Ajax的事件 每次請求都觸發(fā)事件，這是全局規(guī)定的。 beforerequest (conn, opts) 任何Ajax請求發(fā)送之前觸發(fā)。 requestcomplete (conn, response, opts) 任何Ajax成功請求后觸發(fā)。 requestexception (conn, response, opts) 服務(wù)端返回一個(gè)錯(cuò)誤的HT

52、TP狀態(tài)碼時(shí)觸發(fā)。 / 例子:凡是Ajax通迅都會(huì)通過spinner告知狀態(tài)如何。 Ext.Ajax.on(beforerequest, this.showSpinner, this); Ext.Ajax.on(requestcomplete, this.hideSpinner, this); Ext.Ajax.on(requestexception, this.hideSpinner, this);,Ext入門基礎(chǔ),AJAX,Ext.Ajax的屬性 由于Ext.Ajax是單例，所以你可以在發(fā)起請求的時(shí)候才覆蓋Ext.Ajax屬性。 這些是最常見的屬性： method：用于請求的默認(rèn)方法，注意

53、這里大小寫有關(guān)系的，應(yīng)為是全部 大寫（默認(rèn)為undefined，如不設(shè)置參數(shù)就是“POST”，否則是“GET”）。 extraParams：收集各屬性的對象，每次發(fā)起請求就會(huì)把該對象身上的各 屬性作為參數(shù)發(fā)送出去（默認(rèn)為undefined）需要與Session信息和其它 數(shù)據(jù)交互就要在這里設(shè)置。 url： 請求目標(biāo)的服務(wù)器地址（默認(rèn)為undefined），如果服務(wù)端都用 一個(gè)url來接收請求，那么在這里設(shè)置過一次就足夠了。 defaultHeaders：對請求頭部設(shè)置的對象（默認(rèn)為undefined）。 / 每次請求都將這字段與信息注入到頭部中去。 Ext.Ajax.defaultHeader

54、s = Powered-By: Ext Core ;,Ext入門基礎(chǔ),AJAX,Ext.Ajax.request Ext.Ajax.request就是發(fā)送與接收服務(wù)端函數(shù)的函數(shù)。服務(wù)端返用response以決定執(zhí)行success或failure函數(shù)。注意這種success/failure函數(shù)是異步的，即就是服務(wù)端有響應(yīng)后客戶端這邊回頭調(diào)用（回調(diào)函數(shù)），期用客戶端的Web頁面還可以進(jìn)行其它任務(wù)的操作。 Ext.Ajax.request( url: login.do, /請求地址 /提交參數(shù)組 params: LoginName:Ext.get(LoginName).dom.value, Logi

55、nPassword:Ext.get(LoginPassword).dom.value , /成功時(shí)回調(diào) success: function(response, options) /獲取響應(yīng)的json字符串 var responseArray =Ext.util.JSON.decode(response.responseText); if(responseArray.success=true) Ext.Msg.alert(恭喜,您已成功登錄！); else Ext.Msg.alert(失敗,登錄失敗，請 重新登錄); /失敗時(shí)回調(diào),一般很少寫 failure: function(response

56、, opts) console.log(服務(wù)端失效的狀態(tài)代碼： + response.status); );,Ext入門基礎(chǔ),Ext2.0對整個(gè)框架進(jìn)行了重構(gòu)，最為杰出的是推出了一個(gè)以Component類為基礎(chǔ)的組件體系，在Component類基礎(chǔ)上，使用面向?qū)ο蟮姆椒?，設(shè)計(jì)了一系列的組件及控件。因此，要能游刃有余地使用Ext，熟悉Ext組件體系是最基本的。 通過組件結(jié)構(gòu)圖我們可以一目了然的看出整個(gè)Ext組件繼承及組成體系，當(dāng)使用一個(gè)組件的時(shí)間，了解他的繼承體系，這樣可以便于我們掌握組件的各種特性,Ext組件簡介,Ext組件簡介,Ext組件簡介,Ext組件簡介,Ext.FormPanel,EX

57、T核心組件應(yīng)用,Ext.tree.TreePanel,Ext.Window,toolBar and Menus,Ext界面中的布局,Ext.grid.GridPanel,Record 、 Store 、 DataProxy、DataReader,輔助函數(shù),Ext組件的應(yīng)用,組件可以直接通過new 關(guān)鍵子來創(chuàng)建，比如控件一個(gè)窗口，使用new Ext.Window()，創(chuàng)建一個(gè)表格則使用new Ext.GridPanel()。當(dāng)然，除了一些普通的組件以外，一般都會(huì)在構(gòu)造函數(shù)中通過傳遞構(gòu)造參數(shù)來創(chuàng)建組件。 組件的構(gòu)造函數(shù)中一般都可以包含一個(gè)對象，這個(gè)對象包含創(chuàng)建組件所需要的配置屬性及值，組件根據(jù)構(gòu)造

58、函數(shù)中的參數(shù)屬性值來初始化組件。,Ext.FormPanel,一個(gè)簡單的FormPanel效果圖,Ext.FormPanel,一個(gè)簡單的FormPanel代碼,var simple = new Ext.FormPanel( labelWidth: 75, frame:true, url:saveForm.do, title: Simple Form, bodyStyle:padding:5px 5px 0, width: 350, defaults: width: 230,defaultType: textfield, items: fieldLabel: First Name,name: first,allowBlank:false, fieldLabel: Last Name,name: last, fieldLabel: Company,name: company, fieldLabel: Email,name: email,vtype:email, new Ext.form.TimeField( fieldLabel: Time,name: time, minValue: 8:00am,maxValue: 6:0