【導(dǎo)讀】XX項(xiàng)目業(yè)務(wù)需求說明書。要使用ExtJS，那么首先要得到ExtJS庫文件，該框架是一個開源的，可以直接從官方。網(wǎng)站下載，網(wǎng)址把下載得到的ZIP壓縮文件解壓可以看到。resources/css/，extjs的js庫文件主要包含兩個，adapter/ext/及。，其中表示框架基礎(chǔ)庫，是extjs的核心庫。在ExtJS庫文件及頁面內(nèi)容加載完后，ExtJS會執(zhí)行中指定的函數(shù)，因此可以用，一般情況。下每一個用戶的ExtJS應(yīng)用都是從開始的，使用ExtJS應(yīng)用程序的代碼大致如下：。fn也可以寫成一個匿名函數(shù)的形式，因此上面的代碼可以改成下面的形式：

　　

【正文】 動畫樣式過渡 (39。elId39。).setOpacity(.5, {duration: .35, easing: 39。easeIn39。})。 clearOpacity：清除 element 的 Opacity 設(shè)置，其使用方法請看下面的代碼。 (39。elId39。).clearOpacity()。 DOM 操作 在 DOM 操作中會經(jīng)常使用到 對象，因此在介紹 DOM 操作之前我們需要先了解一下 對象。 是一個用來生成 HTML 片段的類，它主要通過定義一個 JSON 格式的數(shù)據(jù)生成 HTML 片段，對開發(fā)人員來說，非常靈活方便。它的數(shù)據(jù)結(jié)構(gòu)主要包括以下 4 個屬性： tag：元素的標(biāo)簽，例如 div、 span 之類。 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 31 頁 共 16 頁 children：由元素的子元素組成的數(shù)組，可以通過該屬性不斷增加子元素。 cls： 元素的 CSS 類名。 html：元素的 innerHTML 屬性，如果不想使用 children 屬性定義元素的內(nèi)部 HTML 內(nèi)容， 可使用該屬性代替。 譬如要生成以下的 HTML 片段： ul id=39。itemList39。 class=39。list39。 li1/li li2/li li3/li /ul 其數(shù)據(jù)定義如下： var list={ id: 39。itemList39。, tag: 39。ul39。, cls: 39。list39。, children:[ {tag: 39。li39。,html: 39。139。}, {tag: 39。li39。,html: 39。239。}, {tag: 39。li39。,html: 39。339。} ] } 當(dāng)然了，如果你不喜歡使用 children 屬性，也可以定義如下： var list={ id: 39。itemList39。, tag: 39。ul39。, cls: 39。list39。, html: 39。li1/lili2/lili3/li39。 } 注意 在目前版本的 Ext Core 中不支持 createTemplate 方法，因此使用 DomHelper 的模板功 能，需要加載 Ext 3 完整包中的 文件。 如果需要添加元素的其他屬性，例如 id、 target 等，可以直接將屬性名稱作為 JSON 數(shù)據(jù)的標(biāo)記附加到數(shù)據(jù)結(jié)構(gòu)上，請看下面這段 JSON 數(shù)據(jù)代碼： { id: 39。link139。, tag: 39。a39。, href: 39。url39。, target: 39。_blank39。, html: 39。鏈接 39。 } 該段代碼將會生成以下的 HTML 代碼： a target=39。_blank39。 href=39。url39。 id=39。link139。鏈接 /a 從上面的例子可以看到，使用 的優(yōu)點(diǎn)是代碼簡單明了、容易維護(hù)，是使用 Ext XX 項(xiàng)目業(yè)務(wù)需求說明書 第 32 頁 共 16 頁 Core 必須掌握的知識。 下面將介紹 14 種 DOM 操作方法的功能及其使用方法。 appendChild：在當(dāng)前節(jié)點(diǎn)里追加子節(jié)點(diǎn)，其使用方法請看下面的代碼。 var el=(39。elId139。) (39。elId39。).appendChild(39。elId139。)。 //通過 id 追加 //與上一句作用一樣，通過 追加 (39。elId39。).appendChild(el)。 //通過數(shù)組追加 (39。elId39。).appendChild([39。elId139。, 39。elId239。])。 //通過 HTMLElement 追加 (39。elId39。).appendChild()。 //通過 CompositeElement 追加 (39。elId39。).appendChild((39。div39。))。 ? appendTo：將當(dāng)前節(jié)點(diǎn)追加到某個節(jié)點(diǎn)。其使用方法請看下面的代碼。 var el=(39。elId139。) (39。elId39。).appendTo(39。elId139。)。 //通過 id 追加 //與上一句作用一樣，通過 追加 (39。elId39。).appendChild(el)。 insertBefore：將當(dāng)前節(jié)點(diǎn)插入某個節(jié)點(diǎn)之前。其使用方法可參考 appendTo 方法。 insertAfter：將當(dāng)前節(jié)點(diǎn)插入某個節(jié)點(diǎn)之后。其使用方法可參考 appendTo 方法。 insertFirst：在當(dāng)前節(jié)點(diǎn)中插入 1 個子節(jié)點(diǎn)并作為當(dāng)前節(jié)點(diǎn)的第一個子節(jié)點(diǎn)。其使用方法請看下面的代碼。 var el=(39。elId139。) (39。elId39。).insertFirst(39。elId139。)。 //通過 id 添加 //與上一句作用一樣，通過 添加 (39。elId39。).insertFirst(el)。 //通過 DomHelper 添加 (39。elId39。).insertFirst({ tag: 39。div39。, cls: 39。box39。, html: 39。hello39。 }) replace：使用當(dāng)前節(jié)點(diǎn)替換某個節(jié)點(diǎn)。其使用方法可參考 appendTo 方法。 replaceWith：將當(dāng)前節(jié)點(diǎn)替 換為某個已存在節(jié)點(diǎn)或新節(jié)點(diǎn)。其使用方法可參考 insertFirst 方法。 createChild：在當(dāng)前節(jié)點(diǎn)追加或在指定的節(jié)點(diǎn)前插入 1 個由 DomHelper 定義的新節(jié)點(diǎn)，其使 用方法請看下面的代碼。 var el= (39。elId39。)。 var c={ tag: 39。div39。, cls: 39。box39。, html: 39。hello39。 }。 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 33 頁 共 16 頁 //追加 1 個子節(jié)點(diǎn) (c)。 //在第一個子節(jié)點(diǎn)之前插入 (c,())。 wrap： 在當(dāng)前節(jié)點(diǎn)外綁定一個由 DomHelper 創(chuàng) 建的父節(jié)點(diǎn)。其使用方法請看下面的代碼。 //假設(shè) elid 的 html 代碼為 ： div id=39。elId39。test/div (39。elId39。).wrap()。 //執(zhí)行上面代碼后， html 代碼變成： //div id=隨機(jī)創(chuàng)建的 iddiv id=t1test /div/div (39。elId39。).wrap({ tag: 39。p39。, id: 39。elId139。 html: 39。new test39。 })。 //執(zhí)行后 html 代碼變成： // p id=39。elId139。new test div id=39。elId39。test/div/p insertHTML：在當(dāng)前節(jié)點(diǎn)插入 HTML 代碼。該方法需要指定插入位置（ beforeBegin、 beforeEnd、 afterBegin 和 afterEnd）。該方法默認(rèn)返回 HTMLElement 對象，如果需要返回 對象，需要設(shè)置第 3 個參數(shù)為 true。其使用方法及插入位置請看下面的介紹。 假設(shè)當(dāng)前的 html 代碼如下： ul id=39。elId39。 li1/li li2/li li3/li /ul 執(zhí)行以下代碼（位置是“ beforeBegin”）： (39。elId39。).insertHtml(39。beforeBegin39。, 39。p插入的代碼 /p39。)。 則結(jié)果將是以下代碼： p插入的代碼 /p ul id=39。elId39。 li1/li li2/li li3/li /ul 如果執(zhí)行以下代碼（位置是“ afterBegin”）： (39。elId39。).insertHtml(39。afterBegin39。, 39。p插入的代碼 /p39。)。 則結(jié)果將是以下代碼： ul id=39。elId39。 p插入的代碼 /p li1/li li2/li li3/li /ul XX 項(xiàng)目業(yè)務(wù)需求說明書 第 34 頁 共 16 頁 如果執(zhí)行以下代碼（位置是“ beforeEnd”）： (39。elId39。).insertHtml(39。beforeEnd39。, 39。p插入的代碼 /p39。)。 則結(jié)果將是以下代碼： ul id=39。elId39。 li1/li li2/li li3/li p插入的代碼 /p /ul 如果執(zhí)行以下代碼（位置是“ afterEnd”）： (39。elId39。).insertHtml(39。afterEnd39。, 39。p插入的代碼 /p39。)。 則結(jié)果將是以下代碼： ul id=39。elId39。 li1/li li2/li li3/li /ul p插入的代碼 /p remove：刪除當(dāng)前節(jié)點(diǎn)。其使用方法請看下面的代碼。 (39。elId39。).remove()。 removeNode：在 DOM 樹中刪除一個節(jié)點(diǎn)。其使 用方法如下面的代碼所示。 (node)。//node 為 HTMLElement 對象 load：使用 Ajax 調(diào)用遠(yuǎn)程數(shù)據(jù)更新節(jié)點(diǎn)內(nèi)容。其使用方法如下面的代碼所示。 (39。elId39。).load({url: 39。39。}) getUpdater：返回當(dāng)前節(jié)點(diǎn)的 對象。其使用方法如下面的代碼所示。 var u= (39。elId39。).getUpdater()。 //通過 update 方法更新節(jié)點(diǎn)內(nèi)容 ({ url: 39。39。 })。 Ajax 介紹 Ajax 功能是 Ext Core 的一個核心功能，其使用非常簡單，主要有兩種使用方式（使用不同回調(diào)方式），具體請看下面的例子。 //使用 success 屬性和 failure 作為回調(diào)函數(shù) ({ url: 39。39。, success:function(response,opts){}, failure:function(response,opts){}, params:{page:1} })。 //使用 callback 屬性作為回調(diào)函數(shù) XX 項(xiàng)目業(yè)務(wù)需求說明書 第 35 頁 共 16 頁 ({ url: 39。39。, callback:function(opts,success,response){}, params:{page:1} })。 兩種方式的主要區(qū)別在于， callback 方式需要自己根據(jù) success 參數(shù)判斷請求是否成功，而使用 success 和 failure 方式則不需要做這一步。具體選擇哪種方式主要還是根據(jù)自己喜好，而且最好是選擇一種方式后，就保持這種方式，不要混合使用。 無論 success、 failure 或 callback 方式，都會返回 XMLHttpRequest 對象，要訪問返回的數(shù)據(jù)， 需要使用該對象的 responseText 屬性。如果返回的 JSON 數(shù)據(jù)需要使用 Ext 的 decode 方法解碼，其使用方法請看下面的代碼。 var datas = ()。 在使用 Ajax 時(shí)，通常會使用以下幾個屬性： url：要訪問的地址。 params：由 JSON 數(shù)據(jù)格式組成的提交參數(shù)。 method：默認(rèn)使用 post 方 式，如果需要，可以設(shè)置為“ GET”，使用 get 方式提交。 timeout：請求時(shí)超時(shí)的時(shí)間（單位是秒），默認(rèn)是 30 秒。 form： form 元素的 id，通常在 form 提交時(shí)使用。 disableCaching：如果設(shè)置為 true，在請求時(shí)會增加一個唯一的緩存參數(shù)，以防止返回緩存 數(shù)據(jù)。 在 Ext 的 Ajax 中，有 3 個事件可以讓用戶處理請求過程。具體請看下面介紹。 beforerequest：在請求發(fā)送前會觸發(fā)該事件。 requestplete：請求發(fā)送成功時(shí)觸發(fā)該事件。 requestexception：服務(wù)器返回 HTTP 狀態(tài)錯誤代碼時(shí)觸發(fā)該事件。