手冊(cè)jqueryextjs

1、尚學(xué)堂 Ext JS4.0講師：oiYc版權(quán)所有：尚學(xué)堂科技尚學(xué)堂版權(quán)所有：尚學(xué)堂科技前言ExtJS的前身是YUI(Yahoo User Interface)。經(jīng)過(guò)不斷的發(fā)展與改進(jìn)， ExtJS現(xiàn)在已經(jīng)成功發(fā)布到了ExtJS4.0版本，并且成為構(gòu)建RIA WEB應(yīng)用的一套最完整、最成熟的javascript基礎(chǔ)庫(kù)。利用ExtJS構(gòu)建的RIA WEB應(yīng)用具有與桌面程序一樣的標(biāo)準(zhǔn)用戶界面和操作方式，并能夠跨不同的瀏覽器平臺(tái)使用。目前，大多數(shù)企業(yè)中已經(jīng)選擇ExtJS作為項(xiàng)目開(kāi)發(fā)、克敵制勝的，因?yàn)樗麄兛梢韵硎蹺xtJS帶來(lái)的類(lèi)似于WIN32編程的 原

2、生態(tài)快樂(lè)。就目前的市場(chǎng)趨勢(shì)，現(xiàn)在用戶對(duì)體驗(yàn)的要求越來(lái)越高。涌現(xiàn)出很多優(yōu)秀的前臺(tái)javascript框架，如Prototype、JQuery、ExtJS等等，當(dāng)然我們今天開(kāi)始要學(xué)習(xí)的ExtJS無(wú)疑是其中優(yōu)秀的解決方案之一。它能夠幫助開(kāi) 發(fā)者快速實(shí)現(xiàn)良好的用戶界面開(kāi)發(fā)，在加上ExtJS又是開(kāi)源的，所以ExtJS的生命力極強(qiáng)，作為web開(kāi)發(fā)人員來(lái)說(shuō)，我們一定要掌握這個(gè)優(yōu)秀 的技術(shù)。尚學(xué)堂EXTJS課程大綱（一） 第一講：ExtJS初步 第二講：ExtJS基本功能 第三講：ExtJS的基礎(chǔ)架構(gòu) 第四講：ExtJS_Core包(操作DOM) 第五講：ExtJS_util包(常用

3、工具類(lèi)) 第六講：ExtJS開(kāi)始響應(yīng) 第七講：ExtJS對(duì)Ajax的支持 第八講：數(shù)據(jù)模型(一)初步 第九講：數(shù)據(jù)模型(二)數(shù)據(jù) 第十講：數(shù)據(jù)模型(三)讀寫(xiě)器、數(shù)據(jù)集store版權(quán)所有：尚學(xué)堂科技尚學(xué)堂版權(quán)所有：尚學(xué)堂科技EXTJS課程大綱（二） 第十一講：用表常單form 第十二講：頁(yè)面布局 第十三講：Grid組件 第十四講：Tree組件 第十五講：ExtJS與服務(wù)器端框架的整合 第十六講：主題 第十七講：Ext.Direct 第十八講：Draw圖形 第十九講：Chart圖表尚學(xué)堂版權(quán)所有：尚學(xué)堂科技第一講：ExtJS初步 認(rèn)識(shí)ExtJS的

4、開(kāi)發(fā)包 Hello World ExtJS的基本概念 Spket開(kāi)發(fā)插件尚學(xué)堂版權(quán)所有：尚學(xué)堂科技01ExtJS的開(kāi)發(fā)包要開(kāi)始Ext之旅的第一步就是要獲得開(kāi)發(fā)包，我們可以從官方網(wǎng)站里進(jìn)行下載: /products/extjs/download包結(jié)構(gòu)說(shuō)明：builds目錄為ExtJS壓縮后的代碼docs目錄為ExtJS的文檔examples目錄中是官方的演示示例locale是多國(guó)語(yǔ)言的資源文件,其中ext-lang-zh_CN.js是簡(jiǎn)體中文overview是ExtJS的功能概述pkgs中是ExtJS各部分功能的打包文件resou

5、rce中書(shū)ExtJS要用到的圖片文件與樣式表文件src目錄是未壓縮的源碼bootstrap.js是ExtJS庫(kù)的引導(dǎo)文件,通過(guò)參數(shù)可以自動(dòng)切換ext-all.js和ext- debug.jsext-all.js文件是ExtJS的核心庫(kù),是必須要引入的ext-all-debug.js文件是-all.extjs的調(diào)試版,在調(diào)試的時(shí)候可能需要使用尚學(xué)堂版權(quán)所有：尚學(xué)堂科技02 Spket開(kāi)發(fā)插件 對(duì)于軟件開(kāi)發(fā)而言，有好的開(kāi)發(fā)工具往往能事半功倍。尤其是對(duì)于前臺(tái)javascript這種解釋執(zhí)行的腳本語(yǔ)言，開(kāi)發(fā)與調(diào)試過(guò)程往往非常困難，那么就必須要有好的工具加以支持。 Spket支

6、持javascript、XUL/XBL、Laszlo、SVG等新產(chǎn)品。具有代碼自動(dòng)完成，語(yǔ)法高亮等等功能特點(diǎn)。因此我們可以借助spket高效的開(kāi)發(fā)ExtJS下載地址：/(當(dāng)前最新版本：spket-1.6.18.zip)安裝插件小提示： 解壓spket-1.6.18.zip，之后展開(kāi)目錄，分別將plugins目錄與features 目錄分別復(fù)制到Eclipse的安裝目錄下，Eclipse3.2及以上版本都可以。尚學(xué)堂版權(quán)所有：尚學(xué)堂科技03 Hello World我們需要導(dǎo)入以下3個(gè)包，才能完成第一個(gè)HelloWorld.html:

7、 關(guān)于bootstrap.js的說(shuō)明，很明顯這里與Ext2、Ext3加載不同尚學(xué)堂版權(quán)所有：尚學(xué)堂科技04 ExtJS的基本概念（一）Ext.onReady關(guān)于字體屬性layout：設(shè)置布局 可以為對(duì)象，也可以為字符串屬性items：其屬性為數(shù)組,可以在里面定義當(dāng)前控件的子控件關(guān)于xtype：在ExtJS應(yīng)用中，很多時(shí)候通過(guò)xtype指定該位置使用什么組件，如果沒(méi)有此屬性那么就得用一個(gè)變量去指向一個(gè)組件，然后將其加入到父組件中，又或者使用一堆new關(guān)鍵字或Ext.create方法創(chuàng)建組件。這樣影響了編寫(xiě)代碼的效率和可讀性。尚學(xué)堂版權(quán)所有：尚學(xué)

8、堂科技05 ExtJS的基本概念（二） ExtJS與傳統(tǒng)的web開(kāi)發(fā)中多了幾個(gè)概念，如面板、布局、組件等；這有點(diǎn)回到了我們j2se中的AWT/SWING.沒(méi)錯(cuò)，ExtJS的這些基本上和j2se中的AWT/SWING比較類(lèi)似。 面板Panel:面板就是一塊區(qū)域，程序員可以在之上放置各種組件，從而形成用戶界面。 布局Layout:布局是指組件在一個(gè)容器中的擺放方式。組件Component:組件是指已經(jīng)預(yù)先實(shí)現(xiàn)好的特定功能，并能夠重用 到編程中的代碼段以及相關(guān)資源。渲染Render：渲染是指含有ExtJ程序的頁(yè)面下載完畢后在瀏覽器中完全展現(xiàn)出來(lái)的一個(gè)過(guò)程。窗口和對(duì)話框(window、dialog)：

9、ExtJS中的窗口本質(zhì)上為一個(gè)div 并利用css進(jìn)行格式化。尚學(xué)堂版權(quán)所有：尚學(xué)堂科技第二講：ExtJS基本功能 認(rèn)識(shí)JSON ExtJS組件配置方式介紹 Ext.window.MessageBox Ext.ProgressBar Ext.toolbar.Toolbar Ext.menu.Menu尚學(xué)堂版權(quán)所有：尚學(xué)堂科技01 認(rèn)識(shí)JSONJSON的全稱(chēng)為(javascript object notation).JSON是一種結(jié)構(gòu)化的、輕量級(jí)的、完全獨(dú)立于語(yǔ)言的、基于文本的數(shù)據(jù)傳輸格式、在很多場(chǎng)合下可以代替XML文件的信息。var pers

10、on = name :張三, age :30 , sex : 男 , books:name : 數(shù)學(xué) , price : 40,name : 語(yǔ)文 , price ; 45/ alert( + );尚學(xué)堂版權(quán)所有：尚學(xué)堂科技02 ExtJS組件配置方式介紹使用逗號(hào)分隔參數(shù)列表配置組件Ext.Msg.alert(提示信息,逗號(hào)分隔參數(shù)列表);使用JSON對(duì)象配置組件var config = / 定義配置對(duì)象title: 標(biāo)題名稱(chēng),msg：我的提示信息！Ext.Msg.show(config);尚學(xué)堂www.bjs

11、版權(quán)所有：尚學(xué)堂科技03 Ext.window.MessageBox (1)Ext.window.MessageBox是一個(gè)工具類(lèi)，它繼承自Ext.window.Window對(duì) 象，用來(lái)生成各種風(fēng)格的信息提示框.可以通過(guò)實(shí)例Ext.MessageBox或Ext.Msg進(jìn)行訪問(wèn)，其具有相同的效果提示:Ext.MessageBox只是引用了Ext.windo.MessageBox的實(shí)例對(duì)象，Ext.Msg.alert方法調(diào)用的是Ext.window.MessageBox實(shí)例對(duì)象的alert方法尚學(xué)堂版權(quán)所有：尚學(xué)堂科技04 Ext.window.Message

12、Box (2)Ext.MessageBox.alert警告框Ext.MessageBox.confirm確認(rèn)框Ext.MessageBmpt輸入框Ext.MessageBox.wait等待框Ext.MessageBox.show(config)自定義框，可以根據(jù)自己的需求進(jìn)行相應(yīng)的配置常見(jiàn)配置項(xiàng)列表：title、msg、width、closable、modal、fn、buttons、progress、progressText、wait、prompt、multiline、value、icon等等尚學(xué)堂版權(quán)所有：尚學(xué)堂科技05 Ext.window.Messa

13、geBox (3)用Ext.Message.show方法實(shí)現(xiàn)自己的進(jìn)度條updateProgress(Number value , String progressText ,String msg)value：01的數(shù)字 默認(rèn)為0progressText：進(jìn)度條上的文字msg：顯示的信息內(nèi)容尚學(xué)堂版權(quán)所有：尚學(xué)堂科技06 Ext.ProgressBar進(jìn)度條組件我們剛剛學(xué)習(xí)提示信息組件的時(shí)候已經(jīng)接觸到了進(jìn)度條的實(shí)現(xiàn)，它的效果非常完美。完全可以和桌面程序一較高下，在項(xiàng)目中我們也經(jīng)常會(huì)使用進(jìn)度條。Ext.ProgressBar繼承自Ext.Component，該組件具有兩種

14、模式：手工模式和自動(dòng)模式。組件常用配置項(xiàng)配置類(lèi)型說(shuō)明renderToString指定一個(gè)頁(yè)面上已經(jīng)存在的元素或元素id，該元素將會(huì)成為新組件的容器heightNumber組件高度widthNumber組件寬度clsString可選樣式表，用于組件元素尚學(xué)堂版權(quán)所有：尚學(xué)堂科技07 手工模式var config = width : 300 , renderTo : pb;var ProgressBar = new Ext.ProgressBar(config); var count = 0 , percentage = 0 , progressText = ; Ext.

15、TaskManager.start(run:function()count+ ;if(count= 100)ProgressBar.hide(); percentage = count/100 ;progressText = Ext.Number.toFixed(percentage*100,0) + %; ProgressBar.updateProgress(percentage , progressText , true );,interval: 100 ,repeat:20);尚學(xué)堂08 自動(dòng)模式自動(dòng)模式的進(jìn)度條，只要調(diào)用wait()方法并進(jìn)行必要的配置即可。配

16、置項(xiàng)（類(lèi)型）說(shuō)明定進(jìn)度條在被重置之前要運(yùn)行的時(shí)間長(zhǎng)度，單位為毫秒，如果忽略該項(xiàng)則進(jìn)度條會(huì)持續(xù)更新直法為止。duration(Number)更新時(shí)間間隔。interval(Number)是否啟用動(dòng)畫(huà)效果。animate(Boolean)進(jìn)度條的分段數(shù)量，也就是進(jìn)度條分多少次更新完，默認(rèn)為10，如果實(shí)際更新次數(shù)超過(guò)這個(gè)值則進(jìn)度條會(huì)回到開(kāi)始位置。increment(Number)顯示在進(jìn)度條上的文字text(String)在進(jìn)度條更新完畢后被調(diào)用，該回調(diào)函數(shù)沒(méi)參數(shù)當(dāng)，duration配置項(xiàng)不存在時(shí)，回調(diào)函數(shù)會(huì)被忽略fn(Function)回調(diào)函數(shù)的執(zhí)行范圍。scope(Object)版權(quán)所有：尚學(xué)堂

17、科技尚學(xué)堂版權(quán)所有：尚學(xué)堂科技09 自動(dòng)模式var config = text: loading. , width: 300 , renderTo: pb; var ProgressBar = new Ext.ProgressBar(config); ProgressBar.wait(duration: 10000 ,/進(jìn)度條持續(xù)更新10秒鐘interval: 100 ,/每100毫秒更新1次increment:100 ,/進(jìn)度條分10次更新完畢text: waiting ,/進(jìn)度條上的文字scope: this ,/回調(diào)函數(shù)的執(zhí)行范圍fn: function()al

18、ert(執(zhí)行完畢););尚學(xué)堂版權(quán)所有：尚學(xué)堂科技10Ext.toolbar.ToolbarExt.toolbar.Toolbar是工具欄的基礎(chǔ)組件，它相當(dāng)于容器，其中可以放置各種工具欄元素。包括按鈕、文字、菜單組件等。工具欄元素名稱(chēng)說(shuō)明Ext.button.Button可以加入到工具欄中的按鈕組件Ext.toolbar.Fill用于充滿工具條的空白元素Ext.toolbar.Item基類(lèi)，為其子類(lèi)提供工具欄的基本功能支持Ext.toolbar.Separator工具欄分隔符Ext.toolbar.Spacer工具欄元素之間的空白空間，默認(rèn)2pxExt.toolbar

19、.TextItem文本元素尚學(xué)堂版權(quán)所有：尚學(xué)堂科技11工具欄常用方法add方法 其參數(shù)類(lèi)型：Mixed arg1,Mixed arg2,Mixed etc該方法用于向工具欄中添加元素，它支持一個(gè)變長(zhǎng)的參數(shù)列表，可以一次性加入多個(gè)工具欄元素支持的有效類(lèi)包括：Ext.button.Button： 一個(gè)有效的按鈕配置對(duì)象HtmlElement： 標(biāo) 準(zhǔn) 的 HTML 元 素 Field：表單字段Item： Ext.toolbar.Item 的 任 何 子 類(lèi)String：普通字符串，注意有些特殊的字符串進(jìn)行了不同的解釋?zhuān)喝纾? 創(chuàng)建一個(gè)工具分割元素 創(chuàng)建一個(gè)工具欄空白元素

20、-創(chuàng)建一個(gè)工具欄的Fill元素，填充工具欄空白區(qū)域尚學(xué)堂版權(quán)所有：尚學(xué)堂科技12 Ext.button.Button可能的參數(shù)形式如下：?jiǎn)闻渲脤?duì)象：text:新建,handler:onButtonClick,iconCls:newIcon配置對(duì)象數(shù)組：text:新建,text:修改配置項(xiàng)類(lèi)型說(shuō)明handlerFunction一個(gè)函數(shù)，在按鈕唄單擊之后調(diào)用iconClsString一個(gè)樣式類(lèi)，提供在按鈕上顯示的圖標(biāo)menuMixed參數(shù)可以是一個(gè)菜單對(duì)象或者是菜單對(duì)象的id，也可以是一個(gè)有效的菜單配置對(duì)象textString按鈕上顯示的文字尚學(xué)堂www.bjsxt.co

21、m版權(quán)所有：尚學(xué)堂科技13 Ext.menu.Menu菜單組件相當(dāng)于菜單單項(xiàng)的容器,菜單組件中不但可以容納Ext.menu.Item菜單單項(xiàng)也可以容納普通組件。配置項(xiàng)參數(shù)類(lèi)型說(shuō)明itemsMixed一個(gè)有效菜單項(xiàng)的數(shù)組ignoreParentClicksBoolean忽略任何作為父菜單的菜單項(xiàng)的單擊 ，默認(rèn)為falseplainBoolean是否移除菜單左側(cè)的豎線，默認(rèn)為false菜單項(xiàng)主要類(lèi)型：Ext.menu.Item菜單項(xiàng)基類(lèi)Ext.menu.Separator菜單分隔符Ext.menu.CheckItem包含選擇框的菜單，也可是一個(gè)單選組Ext.menu.ColorPicker顏色選擇

22、器Exr.menu.DatePicker日期選擇器尚學(xué)堂版權(quán)所有：尚學(xué)堂科技第三講：ExtJS基礎(chǔ)架構(gòu) ext.jsExt-more.js ExtJS的靜態(tài)方法 ExtJS的支持類(lèi)、創(chuàng)建與管理 ExtJS的及其管理尚學(xué)堂版權(quán)所有：尚學(xué)堂科技01 Ext基礎(chǔ)架構(gòu)Ext是ExtJS的命名空間，在ExtJS框架中提供了唯一一個(gè)全局對(duì)象。這樣不僅便于代碼的維護(hù)，更是避免了與其他代碼發(fā)生沖突。在任何編程語(yǔ)言里都不提倡使用全局變量，尤其是在Javascript里更是如此，因?yàn)槿謱?duì)象在每一層的作用域鏈里都搜索不到時(shí)，才會(huì)在全局作用域鏈里搜索，因此其效率相

23、當(dāng)之低。因此Javascript不僅不提倡使用全局變量，而且建議當(dāng)有一個(gè)變量不是在當(dāng)前作用域定義時(shí)或無(wú)法定義時(shí)， 并要多次使用時(shí)，建議將該變量保存在局部變量中，使用局部變量來(lái)進(jìn)行操作，這樣同事對(duì)變量的安全性和搜索對(duì)象的效率給予保證。Ext的定義包含Ext.js和Ext-more.js兩個(gè)文件。這兩個(gè)文件里包含了ExtJS的一些基礎(chǔ)定義、基本的屬性和方法。其中有四個(gè)方法比較重要，分別為apply、applyIf、override、extend尚學(xué)堂版權(quán)所有：尚學(xué)堂科技02 Ext.js重要方法Ext.apply(Object object , Object config

24、 , Object defaults)目標(biāo)拷貝對(duì)象源拷貝對(duì)象屬性集默認(rèn)屬性值Ext.applyIf(Object object, Object config , Object defaults);Ext.override(Class class , Object override);函數(shù)要覆蓋的方法(對(duì)象集合表示)Ext.extend(Object sub , Object sup ,Object override );子類(lèi)對(duì)象父類(lèi)對(duì)象要覆蓋的方法(對(duì)象集合表示)尚學(xué)堂版權(quán)所有：尚學(xué)堂科技03 Ext.apply & Ext.applyIfvar target = ,

25、src= ; = 張 三 ; src.age = 25 ;src.sex = 男 ; = 李四; Ext.apply(target,src);/Ext.applyIf(target,src);Ext.Msg.alert(個(gè)人信息,+n+target.age+n+target.sex);尚學(xué)堂版權(quán)所有：尚學(xué)堂科技08 Ext-more.js的基礎(chǔ)方法Ext.getBody(); 返回當(dāng)前document對(duì)象的body元素。Ext.getHead();返回document對(duì)象的head元素。Ext.getDoc

26、();返回document對(duì)象。Ext.getCmp(id);獲取組件對(duì)象。Ext.getDom(id);獲取document對(duì)象Ext.destroy(obj1,obj2.objn);刪除對(duì)象及其。Ext.destroyMembers(obj,field1,field2.fieldn);刪除對(duì)象的成員。Ext.copyTo(dest , src ,namesuerPrototypeKeys); 復(fù)制對(duì)象屬性到目標(biāo)對(duì)象尚學(xué)堂版權(quán)所有：尚學(xué)堂科技04 Ext.overrideExt.define(MyOver, sayHi: function() alert(Hi!);

27、,constructor: function(config)this.initConfig(config); return this;);Ext.override(MyOver, sayHi: function() alert(About to say.);/this.callOverridden(););var over = new MyOver();over.sayHi();/ alerts About to say./ alerts Hi!尚學(xué)堂版權(quán)所有：尚學(xué)堂科技05 Ext.extendfunction Animal(name , tail) this.na

28、me = name , this.tail = tailAtotype = happy:function()alert(搖尾巴),run:function()alert(動(dòng)物在跑) Atotype.constructor = Animal; function Person(name , tail)Animal.call(this,name , tail); Ext.extend(Person , Animal ,happy:function()alert(微笑);,run:function()alert(人在跑);尚學(xué)堂版權(quán)所有：尚

29、學(xué)堂科技06 Ext.js 檢驗(yàn)數(shù)據(jù)的方法(自學(xué)內(nèi)容)Ext.typeof(var);Ext.isEmpty(var , EmptyString);Ext.isObject(var);Ext.isiterable(var);Ext.isFunction(var);Ext.isArray(var);Ext.isDate(var);Ext.isPrimitive(var);Ext.isNumber檢查的是數(shù)據(jù)值/Ext.isNumberic檢查的是數(shù)據(jù)類(lèi)型Ext.isStringExt.isBooleanExt.isElementExt.isTextNodeExt.isDefined尚學(xué)堂www.

30、版權(quán)所有：尚學(xué)堂科技07 Ext.js的其他基礎(chǔ)方法Ext.iterate(object,fn,scope);對(duì)數(shù)組或?qū)ο筮M(jìn)行迭代。Ext.clone(item); 可以克隆數(shù)組、對(duì)象、Dom節(jié)點(diǎn)和日期等數(shù)據(jù)。Espace 聲明命名空間尚學(xué)堂版權(quán)所有：尚學(xué)堂科技09 ExtJS中的靜態(tài)方法 為了擴(kuò)展Javascript，Ext提供了對(duì)7個(gè)javascript原生態(tài)對(duì)象的擴(kuò)展，我們主要講解Object,Function,Array中的靜態(tài)方法，其余對(duì)象比較簡(jiǎn)單留給大家作為自學(xué)內(nèi)容Ext.ObjectExt.FunctionExt.Arra

31、yExt.StringExt.NumberExt.DateExt.Error尚學(xué)堂版權(quán)所有：尚學(xué)堂科技10 Ext.Object中靜態(tài)方法Ext.Object.each(object,fn,scope) 枚舉對(duì)象的回調(diào)函數(shù)。Ext.Object.merge(sourcep obj1,obj2 .objn) 合并任何數(shù)量的對(duì)象。Ext.Object.toQueryObjects(name,object recusive)將對(duì)象轉(zhuǎn)為數(shù)組Ext.Object.toQueryString(object, recusive)將對(duì)象轉(zhuǎn)換為編碼字符串Ext.Object.fromQ

32、ueryString(string,recusive)將字符串解碼轉(zhuǎn)為對(duì)象以下方法比較簡(jiǎn)單，作為自學(xué)內(nèi)容Ext.Object.getValues 獲取對(duì)象內(nèi)所有的值，以數(shù)組形式返回Ext.Object.getKeys 獲取對(duì)象內(nèi)所有的key，以數(shù)組形式返回Ext,Object.getKey 在對(duì)象內(nèi)感覺(jué)指定的值返回其關(guān)鍵字Ext.Object.getSize 返回對(duì)象的關(guān)鍵字的數(shù)量尚學(xué)堂版權(quán)所有：尚學(xué)堂科技11 Ext.Function中靜態(tài)方法（一）Ext.Function.pass(fn ,args scope) 主要用于創(chuàng)建回調(diào)函數(shù)Ext.Function.al

33、ias(object,methodName) 給函數(shù)起別名創(chuàng)建一個(gè)延時(shí)執(zhí)行的回調(diào)函數(shù)Ext.Function.createDelayed(fn,delay scope,args , appends)在指定時(shí)間后執(zhí)行函數(shù)Ext.Function.defer(fn,delay scope,args , appends)創(chuàng)建一個(gè)函數(shù)，在執(zhí)行原始函數(shù)之后執(zhí)行指定的函數(shù)Ext.Function.createSequence(fn,delay scope)創(chuàng)建一個(gè)緩沖函數(shù)Ext.Function.createBuffered(fn,buffer,scope,args)尚學(xué)堂版權(quán)所

34、有：尚學(xué)堂科技12 Ext.Function中靜態(tài)方法（二）創(chuàng)建攔截函數(shù)，其作用為調(diào)用原始函數(shù)時(shí)先使用攔截函數(shù)檢查數(shù)據(jù)Ext.Function.createInterceptor(orifn,newfn, scope returnvalue);在函數(shù)的原始操作之前執(zhí)行一個(gè)指定操作(4.1版本)Ext.FerceptBefore(object,methodName,fn, scope);在函數(shù)的原始操作之后執(zhí)行一個(gè)指定操作(4.1版本)Ext.FerceptAfter(object,methodName,fn, scope);尚學(xué)堂www.bjsxt.

35、com版權(quán)所有：尚學(xué)堂科技13 Ext.Array中靜態(tài)方法Ext.Array.each(array,fn scope) 枚舉數(shù)組遍歷一個(gè)數(shù)組，并用指定函數(shù)處理數(shù)組的每一個(gè)元素Ext.Array.forEach(array,fn scope)Ext.Array.toArray(iterable , start , end) 將可迭代的數(shù)據(jù)轉(zhuǎn)為數(shù)組根據(jù)指定屬性，獲取數(shù)組內(nèi)每個(gè)對(duì)象指定關(guān)鍵字的值Ext.Array.pluck(array,name)Ext.Array.from(value newTarget) 將一個(gè)值轉(zhuǎn)換為數(shù)組通過(guò)fn驗(yàn)證函數(shù),過(guò)濾數(shù)組.最后返回過(guò)濾后的數(shù)組Ext.Array.f

36、ilter(array,fn scope)尚學(xué)堂版權(quán)所有：尚學(xué)堂科技15 Ext.Array中靜態(tài)方法（自學(xué)內(nèi)容2） intersect將存在于所有數(shù)組的項(xiàng)組合成一個(gè)新數(shù)組 clone克隆數(shù)組 max返回?cái)?shù)組元素中最大值 min返回?cái)?shù)組元素中最小值 mean計(jì)算數(shù)組中所有項(xiàng)的平均值 sum計(jì)算數(shù)組中所有項(xiàng)之和 difference將數(shù)組B中不存在于數(shù)組A的項(xiàng)依次插入到A中 flatten使用遞歸方式將數(shù)組轉(zhuǎn)為一維數(shù)組尚學(xué)堂版權(quán)所有：尚學(xué)堂科技16 ExtJS類(lèi)的創(chuàng)建與使用ExtJS4.x中創(chuàng)建一個(gè)類(lèi)使用Ext.define 方法extend用

37、于要繼承的類(lèi)的名稱(chēng)config對(duì)于屬性的配置constructor構(gòu)造屬性一般用于初始化類(lèi)的配置項(xiàng)和調(diào)用其父類(lèi)的方法alias類(lèi)的別名alternateClassName類(lèi)的備用名(用法相當(dāng)于alias)requires需要使用到的類(lèi)名數(shù)組在動(dòng)態(tài)加載時(shí)會(huì)根據(jù)該屬性去加載類(lèi)mixins表示混合需要用到其他類(lèi)的時(shí)候可以采用混合方式實(shí)現(xiàn)多繼承statics定義靜態(tài)方法 (不能被子類(lèi)所繼承)inheritableStatics定義靜態(tài)方法 這里定義的屬性或方法可以被繼承那么創(chuàng)建這個(gè)類(lèi)的實(shí)例對(duì)象使用Ext.create方法尚學(xué)堂版權(quán)所有：尚學(xué)堂科技17 ExtJS類(lèi)的創(chuàng)建原理(

38、Ext.define)首先調(diào)用create方法，該方法創(chuàng)建了一個(gè)Class對(duì)象實(shí)例然后對(duì)于Class對(duì)象的初始化操作，添加構(gòu)造函數(shù)等等.最后返回接著繼續(xù)執(zhí)行代碼,主要是根據(jù)defaultPreprocessors、等等的默認(rèn)配置值循環(huán)調(diào)用函數(shù)對(duì)其類(lèi)繼續(xù)初始化。期間一個(gè)經(jīng)過(guò)了13個(gè)處理器，分別對(duì)className、loader、extend、static、inheritableStatic、config、mixins、xtype、alias、singleton.依次進(jìn)行處理，經(jīng)過(guò)這輪處理之后在注冊(cè)給ClassManager來(lái)管理我們的類(lèi)，現(xiàn)在我們的類(lèi)才算真正的創(chuàng)建完畢，雖然在性能上較Ext3的處

39、理過(guò)程要慢、復(fù)雜，但是在擴(kuò)展上基本涵蓋了Ext4所有的功能，從而非常的強(qiáng)大，當(dāng)然隨著瀏覽器的發(fā)展，這個(gè)性能問(wèn)題也不是關(guān)鍵性的問(wèn)題，Ext4對(duì)之前版本的代碼進(jìn)行了大量重構(gòu)，從而更加的優(yōu)秀當(dāng)然對(duì)于Ext Class包下底層代碼實(shí)現(xiàn)原理暫時(shí)沒(méi)必要去了解，由于實(shí)現(xiàn)相對(duì)比較復(fù)雜。尚學(xué)堂版權(quán)所有：尚學(xué)堂科技14 Ext.Array中靜態(tài)方法（自學(xué)內(nèi)容1） Ext.Array中還有很多簡(jiǎn)單方法： indexOf查詢?cè)卦跀?shù)組中的位置 contains檢查數(shù)組是否包含指定元素 map與forEach類(lèi)似，但有數(shù)組作為返回值 clean清除數(shù)組中的空值 unique清除數(shù)組中重復(fù)項(xiàng) s

40、ort數(shù)組排序 remove從數(shù)組中移除一個(gè)元素 include如果數(shù)組不包含指定元素，則加入元素到數(shù)組中尚學(xué)堂版權(quán)所有：尚學(xué)堂科技18 Ext /core / classBase.js所有類(lèi)的根基類(lèi)一些基本的方法,如初始化類(lèi)的配置參數(shù)Class.js創(chuàng)建類(lèi)的類(lèi)對(duì)于一些類(lèi)的創(chuàng)建初始化操作,ClassManager.js管理類(lèi)的類(lèi)類(lèi)的管理注冊(cè)，別名,備用名形成一張類(lèi)似于map的鍵值對(duì)對(duì)象等Loader.js實(shí)現(xiàn)動(dòng)態(tài)加載需要的類(lèi)主要用于類(lèi)的動(dòng)態(tài)加載機(jī)制尚學(xué)堂版權(quán)所有：尚學(xué)堂科技第四講：ExtJS_Core核心包、操作Dom Ext.core.El

41、ement Ext.core.DomQuery Ext.core.DomHelper尚學(xué)堂版權(quán)所有：尚學(xué)堂科技01 Ext.core.ElementExt.core.Element是所有組件及控件操作的基礎(chǔ)，是一個(gè)DOM對(duì)象的包裝，加入了對(duì)DOM的操作處理，并且可以根據(jù)不同的瀏覽器進(jìn)行處理， Ext.core.Element給我們提供了176個(gè)方法,可謂是相當(dāng)之豐富強(qiáng)大：根據(jù) 操作類(lèi)型基本分為查詢、DOM操作、樣式操作、對(duì)齊、尺寸大小、定位、拖放、滾動(dòng)、鍵盤(pán)、動(dòng)畫(huà)等等。下面我們來(lái)看一下操作Dom的最常用方法：根據(jù)id獲得頁(yè)面元素 Ext.core.Element.ge

42、t 可簡(jiǎn)寫(xiě)Ext.get(先去Ext.core.Element，再去頁(yè)面) Ext.core.Element.fly可簡(jiǎn)寫(xiě)Ext.fly (直接從頁(yè)面獲得) Ext.getDom 注意此方法為ext-more.js的方法根據(jù)組件id獲得頁(yè)面組件的對(duì)象 Ext.getCmp 注意此方法為ext-more.js的方法該方法返回Ext.Component管理的指定id的Component對(duì)象,其實(shí)際則是Ext,ComponentMgr.get(id)的包裝調(diào)用尚學(xué)堂版權(quán)所有：尚學(xué)堂科技02 查詢 -Ext.core.Element.queryExt.core.Element

43、.query ,他的真正實(shí)現(xiàn)是由Ext.DomQuery.select ,只是提供的一種快速調(diào)用，可以簡(jiǎn)寫(xiě)成Ext.queryExt.query(String path , Node root)第一個(gè)參數(shù)是匹配的選擇器(和jquery中的選擇器基本相同)第二個(gè)參數(shù)是可選的,指定從一個(gè)根節(jié)點(diǎn)開(kāi)始檢索，不指定則從document跟節(jié)點(diǎn)開(kāi)始選擇器用法類(lèi)型： id選擇器、類(lèi)選擇器、元素選擇器 屬性選擇器 偽類(lèi)選擇器 樣式選擇器尚學(xué)堂版權(quán)所有：尚學(xué)堂科技03Ext.core.DomQuery該類(lèi)是i一個(gè)單例的查詢選擇器.提供Element查詢、屬性查詢、偽類(lèi)查詢、CSS樣式表查

44、詢等.為Ext的Element及HTML的Element定位提供了非常 強(qiáng)大的支持.該類(lèi)的底層是通過(guò)形成正則表達(dá)式結(jié)合算法對(duì)DOM或HTML 中的元素進(jìn)行匹配的。常用方法:compile通過(guò)指定的選擇器動(dòng)態(tài)形成selector的查詢函數(shù),最終返回該函數(shù),該函數(shù)可重復(fù)使用。filter 節(jié)點(diǎn)過(guò)濾器(提供節(jié)點(diǎn)進(jìn)行過(guò)濾選擇)is用于查看指定的元素、節(jié)點(diǎn)或節(jié)點(diǎn)集合是否含有提供的選擇器selectNode返回root中第一個(gè)匹配selector選擇器的元素尚學(xué)堂版權(quán)所有：尚學(xué)堂科技04操作dom -Ext.core.ElementElement對(duì)象有以下常用操作DOM的方法：a

45、ppendChild：在當(dāng)前元素中追加元素createChild：在元素中插入由DomHelper對(duì)象創(chuàng)建的元素insertAfter：將元素插入到指定元素之后insertbefore：將元素插入到指定元素之前insertFirst：插入(或創(chuàng)建)一個(gè)元素作為當(dāng)前元素的第一個(gè)子元素insertSibling：在當(dāng)前元素前或后插入(或創(chuàng)建)元素(同級(jí)別).remove：移除當(dāng)前元素replace：使用當(dāng)前元素替換指定元素尚學(xué)堂版權(quán)所有：尚學(xué)堂科技05Ext.core.DomHelperDomHelper類(lèi)相當(dāng)于一個(gè)輔助HTML、DOM操作的類(lèi)。常用方法:append指定

46、節(jié)點(diǎn)后追加元素或文本內(nèi)容applyStyles給指定的元素節(jié)點(diǎn)應(yīng)用指定的css樣式insertAfter獲取指定的Element,將新節(jié)點(diǎn)對(duì)象追加在獲取的Element之后insertBefore獲取指定的Element,將新節(jié)點(diǎn)對(duì)象追加在獲取的Element之前insertFirst加入到指定節(jié)點(diǎn)下并成為第一個(gè)子節(jié)點(diǎn)insertHtml在給定的HTML Element中指定的位置插入HTMLoverwrite覆蓋指定的HTML 元素里的文本內(nèi)容createTemplate 通過(guò)指定的對(duì)象或字符串,創(chuàng)建Ext.Template模板尚學(xué)堂版權(quán)所有：尚學(xué)堂科技第五講： E

47、xtJS_util包(常用工具類(lèi)) Ext.util.CSS Ext.util.ClickRepeater Ext.util.DelayedTask Ext.util.Format Ext.util.JSON Ext.util.MixedCollection Ext.util.TaskRunner Ext.util.KeyMap尚學(xué)堂版權(quán)所有：尚學(xué)堂科技01Ext.util.CSSExt提供了對(duì)CSS的支持,即Ext.util.CSS類(lèi)我們一起了解此類(lèi)給我們提供的常用方法：createStyleSheet創(chuàng)建一個(gè)樣式getRule獲得樣式對(duì)象swapStyleShee

48、t切換樣式表文件removeStyleSheet移除樣式updateRule更新樣式尚學(xué)堂02 Ext.util.ClickRepeater該類(lèi)繼承自Ext.util.Observable, 可應(yīng)用與任何Element.它是一個(gè)click的轉(zhuǎn)發(fā)器,起到click時(shí)間的轉(zhuǎn)發(fā)和綁定作用.是所有綁定的原始類(lèi).實(shí)例化Ext.util.ClickRepeater類(lèi)的參數(shù)配置參數(shù)名稱(chēng)參數(shù)類(lèi)型說(shuō)明需要進(jìn)行click時(shí)間轉(zhuǎn)發(fā)的ElementelMixed當(dāng)?shù)谝淮吸c(diǎn)擊后,第二次自動(dòng)的重復(fù)點(diǎn)擊發(fā)生的間隔delayNumber當(dāng)發(fā)生第二次點(diǎn)擊后,以后的時(shí)間發(fā)生周期,如果不配置默認(rèn)為20秒intervalMixed設(shè)置發(fā)生mousedown時(shí)所應(yīng)用的css類(lèi)pressClassString設(shè)置是否自動(dòng)重復(fù)執(zhí)行click 此時(shí)delay和interval將無(wú)效accelerateBoolean設(shè)置是否阻止默認(rèn)：true阻止false不阻止preventDefaultBoolean設(shè)置是否可停止默認(rèn),true停止false不阻止stopDefaultBoolean版權(quán)所有：尚學(xué)堂科技尚學(xué)堂版權(quán)所有：尚學(xué)堂科技03 Ext.uti