【文章內(nèi)容簡介】 價物 . ? DomHelper是 專用于動態(tài)生成裝飾元素的實用工具 ，已解決大多數(shù)瀏覽器之間差別的問題，避免了原始操作 DOM腳本的麻煩。對于 HTML片斷與 innerHTML的操作， DomHelper經(jīng)充分考慮并在性能上有足夠的優(yōu)化。 ? ，因此無須實例化即可調用其靜態(tài)方法 : ? markup, insertHtml , insertBefore , insertAfter , insertFirst , append ,overwrite ? 例 1 :(39。mydiv39。, {tag: 39。ul39。, cls: 39。myclass39。})。 ? 例 2 :(39。mydiv39。, 39。pHi/p39。)。 Ext入門基礎 尺寸 amp。大小 ? 某個元素在頁面上，我們就想獲得到其尺寸大小或改變它的尺寸大小。毫無意外下，Ext Core也把這些任務抽象為清晰的 API供大家使用。這些都是 setter的方法，可傳入動畫的配置參數(shù)，或即就是以個布爾型的 true，表示 ? 這是默認的動畫。 ? (39。elId39。).setHeight(200, true)。 // 設置高度為 200px以默認配置進行動畫 ? // 設置高度為 150px以自定義的配置進行動畫 ? (39。elId39。).setHeight(150, { ? duration : .5, // 動畫將會持續(xù)半秒 ? callback: function(){ (結束 )。} // 動畫過后改變其內(nèi)容為“結束” ? })。 ? getHeight//返回元素的偏移（ offset）高度。 ? getWidth//返回元素的偏移（ offset）寬度。 ? setHeight//設置元素的高度。 ? setWidth//設置元素的寬度。 ? getBorderWidth//返回指定邊（ side(s)）的 padding寬度。 ? getPadding//可以是 t, l, r, b或是任何組合。傳入 lr的參數(shù)會得到 leftpadding+right padding。 ? clip//保存當前的溢出（ overflow），然后進行裁剪元素的溢出部分 使用 unclip()來移除。 ? unclip//在調用 clip()之前，返回原始的裁剪部分（溢出的） Ext入門基礎 定位 ? 通過 Ext Core定義的 API能快速地采集元素位置的各方面數(shù)據(jù)，歸納為 get的或 set的方法，全部瀏覽器都可通用。類似于上一節(jié)的尺寸大小的 API，多數(shù)的 setter方法支持動畫效果?？稍诘诙?shù)中傳入動畫的配置參數(shù)（ objectliteral configuration object），或即就是以個布爾型的 true， ? 表示這是默認的動畫。 ? set/getX ? set/getY ? set/getXY ? set/getOffsetsTo//返回當前元素與送入元素的距離 ? var elOffsets = (39。elId39。).getOffsetsTo(anotherEl)。 ? set/getLeft ? set/getRight ? set/getTop ? set/getBottom ? setLocation//無論這個元素如何定位，設置其在頁面的坐標位置。 ? clearPositioning//當文檔加載后清除位置并復位到默認 ? set/getPositioning//返回一個包含 CSS定位信息的對象。有用的技巧：連同setPostioning ? 一起，可在更新執(zhí)行之前，先做一個快照（ snapshot），之后便可恢復該元素 Ext入門基礎 動畫 ? Ext Core里的 Fx類是核心類庫中最激動人心的一個類，它不是最重要的，卻是最實用的一個類 定義了一些常用的特效方法 . ? puff//漸隱元素的同時還伴隨著向各個方向緩慢地展開。特效結束后，元素會被隱藏（ visibility = ?hidden?）， 但是塊元素仍然會在 document對象中占據(jù)空間。如果需要將元素從 DOM 樹刪除，則使用‘ remove?配置選項。 ? // 默認 ? ()。 ? // 常見的配置選項及默認值 ? ({ ? easing: 39。easeOut39。, ? duration: .5, ? remove: false, ? useDisplay: false ? })。 ? slideIn/slideOut//將元素滑入到視圖中。 ? fadeIn/fadeOut//將元素從透明漸變?yōu)椴煌该鳌? ? switchOff//類似單擊過后般地閃爍一下元素，然后從元素的中間開始收縮。 ? highlight//高亮 ? pause//在任何后續(xù)的特效開始之前一次暫停。 ? scale//以動畫展示元素從開始的高度 /寬度轉換到結束的高度 /寬度 ? ghost//將元素從視圖滑出并伴隨著漸隱。 //等等 … Ext入門基礎 事件 ? HTML元素的標準事件是指 mouseover、 mousedown、 click、 blur、 focus、 change等能夠直接對 HTML元素發(fā)生的事件。在 ExtJS中，這些事件的處理可以用如下的代碼： ? 注冊一個事件處理函數(shù)使用： ? (39。myElement39。).on(39。click39。, myHandler, myScope)。 myElement是要注冊的元素的 ID，click是事件的名稱（ 注意，和 HTML元素中的聲明 onXXX不同，這里不需要 on），myHandler是處理函數(shù)的函數(shù)名稱， myScope是一個可選的參數(shù)，指定處理函數(shù)綁定的對象，也就是處理函數(shù)的作用域，如果不提供這個參數(shù)，則是默認的 window。 ? 撤銷一個事件處理函數(shù)： (?myElement?).un(?click?, myHandler, myScope) 參數(shù)的意義同上。 ? on方法是 addListener方法的簡寫 . ? 如果你想在一個元素上添加多個事件處理器可以這樣一次搞定。 ? var el= (?myElement?)。 ? ({ ?click? : { fn: , scope: this, delay: 100//延遲 ,高級事件功能 }, 39。mouseover39。 : { fn: , scope: this } })。 Ext入門基礎 高級事件 ? 事件委托、事件緩沖、事件延遲等的這些功能都是屬于高級事件的控制內(nèi)容， ? Ext Core在此方面提供了一系列的配置選項。 ? 委托 delegation ? 減低內(nèi)存銷毀和防止內(nèi)存泄露的隱患是事件委托技術的兩項好處，其基 ? 本要義是： ? 并不是集合內(nèi)的每一個元素都要登記上事件處理器，而是在集合其容器上登記 ? 一次便可，這樣產(chǎn)生了中央化的一個事件處理器，然后就有不斷循環(huán)該事件周 ? 期，使得逐層上報機制付諸實現(xiàn)，只要在容器層面定義就可以。 ? ul id=39。actions39。 ? li id=39。btnedit39。/li ? li id=39。btndelete39。/li ? li id=39。btncancel39。/li ? /ul ? 我們想實現(xiàn) ,點擊不同的 li,產(chǎn)生不同的效果 .為此我們可能會這么做 . ? (?btnedit?).on(?click, function(e,t) {// 執(zhí)行事件具體過程 A})。 ? Ext. get(?btndelete?).on(?click, function(e,t) {// 執(zhí)行事件具體過程 B})。 ? Ext. get(?btncancel?).on(?click, function(e,t) {// 執(zhí)行事件具體過程 C})。 Ext入門基礎 高級事件 ? 使用 事件委托的方式代替 ，在容器身上登記一個事件處理器，按照依 ? 附的邏輯選擇： ? (?actions?).on(?click, function(e,t) {//在 div上登記一個事件 ? switch() { ? case 39。39。btnedit39。: ? // 處理特定元素的事件具體過程 A ? break。 ? case 39。btndelete39。: ? // 處理特定元素的事件具體過程 B ? break。 ? case 39。btncancel39。: ? // 處理特定元素的事件具體過程 C ? break。 ? } ? })。 ? 基于 dom各層經(jīng)過逐層上報的原因，可以說，我們登記了的“ actions”的 div一定會被訪問得到。這時就是執(zhí)行我們所指定的 switch指令，跳到對應匹配的元素那部分代碼。這樣方法具備可伸縮性，因為我們 只要維護一個函數(shù)就可以控制那么多的元素的事件 。 Ext入門基礎 高級事件 ? 是否一次性觸發(fā) single ? 在登記事件的處理器的時候可以加入配置這個選項。 true代表為事件觸發(fā)后加入一個下次移除本身的處理函數(shù)。 ? (39。click39。, function(e,t) { ? // 執(zhí)行事件具體過程 ? }, this, { ? single: true // 觸發(fā)一次后不會再執(zhí)行事件了 ? })。 ? 延時 delay ? 你在登記事件的處理器的時候可以加入配置這個選項。制定觸發(fā)事件后 ? 處理函數(shù)延時執(zhí)行的時間。 ? (39。click39。, function(e,t) { ? // 執(zhí)行事件具體過程 ? }, this, { ? delay: 1000// 延遲事件，響應事件后開始計時（這里一秒） ? })。 ? 緩沖 buffer ? 將上面代碼的 delay換成 buffer//在緩沖時間內(nèi)觸發(fā)事件 無效 . ? 移除事件句柄 removeAllListeners ? ()。//在該元素身上移除所有已加入的偵聽器 (事件 )。 Ext入門基礎 類編程 繼承與重寫 ? JavaScript本身是基于原型的，這與普通基于類的編程語言相比，在實現(xiàn)繼承的機制上有較大的出入。 JavaScript中創(chuàng)建一個新類那便是修改了某個對象原型（ prototype）的結果。 Ext提供了許多簡化這方面工作的函數(shù)。 ? Ext支持以下類風格的編程行為：繼承擴展（ extend），重寫（ overrride） /直接覆蓋。這意味著開發(fā)者可以根據(jù)需求加入自己的行為，創(chuàng)建自己的類，或者修改某些函數(shù)讓其更加合適。 ? extend與 override ? 。第一個參數(shù)是父類，第二個參數(shù)是屬性 /函數(shù)的列表。第二個參數(shù)加入到對象的 prototype中 extend過后， superclass的引用。 Ext入門基礎 Person = (Object, { constructor: function(first, last){ = first。 = last。 }, getName: function(){ return + 39。 39。 + 。 } })。 Developer = (Person, { getName: function(){ if(){ return 39。Go Away!39。 }else{ // 訪問父類的方法 return (this)。 } } })。 var p = new Person(39。John39。, 39。Smith39。)。 var d = new Developer(39。John39。, 39。Smith39。)。 alert(())。//John Smith alert(())。//John Smith 類編程 繼承與重寫 ? override ? override方法也編輯、修改類的其中一種途徑，不過本方法不會創(chuàng)建一個新類，而是對現(xiàn)有類予以修改其行為，第一個參數(shù)是要覆蓋的類，第二個參數(shù)就是覆蓋列表。 override方法實際是修改類 prototype的屬性。 ? // 我們已聲明的 Person類 ? (Person, { ? getName: function(){ ? // 覆蓋了舊行為，這次 last name排頭 ? return + 39。 39。 + 。 ? } ? })。 ? var p = new Person(39。John39。, 39。Smith39。)。 ? alert(())。//Smith John // 覆蓋了舊行為，這次 last name排頭 Ext入門基礎 類編程 單例 (Singletons) ? 單例另一種較常見的說法是“模塊設計模式”，如果某一個類靜態(tài)方法較多，或者該類只須要實例化一次，那么采用單例的模式就很不錯了。 JavaScript的單例模式中，我們常常會創(chuàng)建私有 JavaScript變量或通過高明的 閉包 手法建立私有的方法，以一段程序入口的范例代碼就能說明多少問題。 ? MyApp = function(){ ? var data。 //外部無法訪問 data，這是的私有成員 ? return { ? init: function(){ ? // 初始化程序 ? }, ? getData: function(){ ? re