extjs實(shí)用開(kāi)發(fā)指南_第1頁(yè)
extjs實(shí)用開(kāi)發(fā)指南_第2頁(yè)
extjs實(shí)用開(kāi)發(fā)指南_第3頁(yè)
extjs實(shí)用開(kāi)發(fā)指南_第4頁(yè)
extjs實(shí)用開(kāi)發(fā)指南_第5頁(yè)
已閱讀5頁(yè)，還剩62頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、extjs 實(shí)用簡(jiǎn)明教程收集整理:龔辟愚、qq 群：19274175序言extjs 是一個(gè)很不錯(cuò)的 ajax 框架，可以用來(lái)開(kāi)發(fā)帶有華麗外觀的富客戶端應(yīng)用，使得我 們的 b/s 應(yīng)用更加具有活力及生命力。extjs 是一個(gè)用 javascript 編寫，與后臺(tái)技術(shù)無(wú)關(guān)的前 端 ajax 框架。因此，可以把 extjs 用在.net、java、php 等各種開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的應(yīng)用中。 最近我們?cè)趲讉€(gè)應(yīng)用都使用到了 extjs，對(duì)公司以前開(kāi)發(fā)的一個(gè) oa 系統(tǒng)也正在使用 extjs2.0 進(jìn)行改造，使得整個(gè)系統(tǒng)在用戶體驗(yàn)上有了非常大的變化。本教程記錄了前段時(shí)間本人學(xué)習(xí) extjs 的一些心得及小結(jié)，希

2、望能幫助正在學(xué)習(xí)或準(zhǔn)備學(xué)習(xí) extjs 的朋友們快速走進(jìn) extjs2.0 的精彩世界。教程包括 extjs 的新手入門、組件體系結(jié)構(gòu)及使用、extjs 中各控件的使用方法及示例 應(yīng)用等，是一個(gè)非常適合新手的 extjs 入門教程。本教程主要是針對(duì) extjs2.0 進(jìn)行介紹，全 部代碼、截圖等都是基于 extjs2.0。在學(xué)習(xí)了本教程后，可以下載 這個(gè)基于 extjs2.0 開(kāi)發(fā)的單用戶 blog 系統(tǒng) 的源代碼，這個(gè)系統(tǒng)是我們團(tuán)隊(duì)中的 williamraym 與大峽等人開(kāi)發(fā)的一個(gè)演示系統(tǒng)，系統(tǒng)源 碼整體質(zhì)量比較高，通過(guò)學(xué)習(xí)這套源代碼相鄰一定能提高您 extjs 的綜合水平。本 教 程 比

3、較 適 合 extjs 的 新 手 作 為 入 門 教 程 及 手 冊(cè) 使 用 ， 并 在 我 的 博 客 我還編寫了比本教程更為詳細(xì)的extjs 實(shí)用開(kāi)發(fā)指南，包含詳細(xì)的 extjs 框架使用方法、 各個(gè)控件詳細(xì)配置參數(shù)、屬性、方法及事件介紹，與服務(wù)器端集成及一個(gè)完整的示例應(yīng)用系 統(tǒng)介紹等內(nèi)容，適合想深入學(xué)習(xí) extjs 或正在使用 extjs 進(jìn)行開(kāi)發(fā)朋友們使用。該指南 當(dāng)前在 作為 vip 文檔發(fā)布，供該站的 vip 用戶閱讀及下載。凡是購(gòu)買了extjs 實(shí)用開(kāi)發(fā)指南文檔的 vip 用戶，都可以在該指南印刷版出版后均會(huì)免費(fèi)得到相應(yīng)的印刷 版本。最后，希望廣大網(wǎng)友把閱讀本教程中的發(fā)現(xiàn)的錯(cuò)誤

4、、不足及建議等反饋給我們，讓我們 一起共同學(xué)習(xí)、共同進(jìn)步，下面讓我們一起進(jìn)入精彩的 extjs 世界吧。- 19 -第一章、extjs簡(jiǎn)介extjs是一個(gè)ajax框架，是一個(gè)用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用 程序界面。extjs可以用來(lái)開(kāi)發(fā)ria也即富客戶端的ajax應(yīng)用，下面是一些使用extjs開(kāi)發(fā)的 應(yīng)用程序截圖：(wlr的blog應(yīng)用)(extjs的表格控件)(不同主題的extjs彈出框效果) extjs是一個(gè)用javascript寫的，主要用于創(chuàng)建前端用戶界面，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端ajax框架。因此，可以把extjs用在.net、java、php等

5、各種開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的應(yīng)用中。extjs 最開(kāi)始基于 yui 技術(shù)，由開(kāi)發(fā)人員 jack slocum 開(kāi)發(fā)，通過(guò)參考 java swing 等機(jī)制來(lái)組織可視化組件，無(wú)論從 ui 界面上 css 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理， 都可算是一款不可多得的 javascript 客戶端技術(shù)的精品。第二章、開(kāi)始 extjs2.1 獲得 extjs要使用 extjs，那么首先要得到 extjs 庫(kù)文件，該框架是一個(gè)開(kāi)源的，可以直接從官方 網(wǎng)站下載，網(wǎng)址 xxx 所示的內(nèi)容 ， 可以選擇選擇 1.1 或 2.0 版本，本教程使用的 2.0 版本。圖 1-1 extjs 不同版本下載選擇頁(yè)面單擊上圖中的【

6、download ext-2.0.zip】超鏈接進(jìn)行下載，把下載得到的 zip 壓縮文件解 壓縮到【d:extcode】目錄下，可以得到如如圖 1-2 所示的內(nèi)容。圖 1-2 extjs 發(fā)布包目錄adapter：負(fù)責(zé)將里面提供第三方底層庫(kù)（包括 ext 自帶的底層庫(kù)）映射為 ext 所支持 的底層庫(kù)。build： 壓縮后的 ext 全部源碼(里面分類存放)。docs： api 幫助文檔。exmaples：提供使用 extjs 技術(shù)做出的小實(shí)例。resources：ext ui 資源文件目錄，如 css、圖片文件都存放在這里面。source： 無(wú)壓縮 ext 全部的源碼(里面分類存放) 遵從

7、lesser gnu （lgpl） 開(kāi)源的 協(xié)議。ext-all.js：壓縮后的 ext 全部源碼。ext-all-debug.js：無(wú)壓縮的 ext 全部的源碼(用于調(diào)試)。ext-core.js：壓縮后的 ext 的核心組件，包括 sources/core 下的所有類。ext-core-debug.js：無(wú)壓縮 ext 的核心組件，包括 sources/core 下的所有類。2.2、應(yīng)用 extjs應(yīng)用 extjs 需要在頁(yè)面中引入 extjs 的樣式及 extjs 庫(kù)文件，樣式文件為 resources/css/ext- all.css，extjs 的 js 庫(kù)文件主要包含兩個(gè)，adap

8、ter/ext/ext-base.js 及 ext-all.js，其中 ext-base.js 表示框架基礎(chǔ)庫(kù)，ext-all.js 是 extjs 的核心庫(kù)。adapter 表示適配器，也就是說(shuō)可以有多種適 配 器 ， 因 此 ， 可 以 把 adapter/ext/ext-base.js 換 成 adapter/jquery/ext-jquery-adapter.js ， 或 adapter/prototype/ext-prototype-adapter.js 等。因此，要使用 extjs 框架的頁(yè)面中一般包括下面 幾句：<script type="text/javascr

9、ipt" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script>在 extjs 庫(kù)文件及頁(yè)面內(nèi)容加載完后，extjs 會(huì)執(zhí)行 ext.onready 中指定的函數(shù)，因此可以用，一般情況下每一個(gè)用戶的 extjs 應(yīng)用都是從 ext.onready 開(kāi)始的，使用 extjs 應(yīng)用 程序的代碼大致如下：<script>

10、;function fn()alert(extjs庫(kù)已加);ext.onready(fn);</script>fn 也可以寫成一個(gè)匿名函數(shù)的形式，因此上面的代碼可以改成下面的形式：<script>function fn()alert(extjs庫(kù)已加載!);ext.onready(function ()alert(extjs庫(kù)已加載!););</script>2.3、extjs 版的 helloworld下面我們寫一個(gè)最簡(jiǎn)單的 extjs 應(yīng)用，在 hello.html 文件中輸入下面的代碼：<head><meta http-equiv=&

11、quot;content-type" content="text/html; charset=utf-8" /><title>extjs</title><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /><script type="text/javascript" src="extjs/adapter/ext/ext-ba

12、se.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script><script> ext.onready(function();</script></head><body></body></html>ext.messagebox.alert("hello","hello,easyjf open source&q

13、uot;);圖1-11 hello.html頁(yè)面效果進(jìn)一步，我們可以在頁(yè)面上顯示一個(gè)窗口，代碼如下：<script> ext.onready(function()var win=new ext.window(title:"hello",width:300,height:200,html:'<h1>hello,easyjf open source</h1>');win.show(););</script>在瀏覽 hello.html，即可得在屏幕上顯示一個(gè)窗口，如圖 xxx 所示。第三章 ext 框架基礎(chǔ)及核心簡(jiǎn)

14、介3.1、ext 類庫(kù)簡(jiǎn)介extjs 由一系列的類庫(kù)組成，一旦頁(yè)面成功加載了 extjs 庫(kù)后，我們就可以在頁(yè)面中通 過(guò) javascript 調(diào)用 extjs 的類及控件來(lái)實(shí)現(xiàn)需要的功能。extjs 的類庫(kù)由以下幾部分組成：底層 api(core)：底層 api 中提供了對(duì) dom 操作、查詢的封裝、事件處理、dom 查詢器等基礎(chǔ)的功能。其它控件都是建立在這些底層 api 的基礎(chǔ)上，底層 api 位于源代碼目錄的core 子目錄中，包括 domhelper.js、element.js 等文件，如圖 xx 所示?？丶?widgets)：控件是指可以直接在頁(yè)面中創(chuàng)建的可視化組件，比如面板、選項(xiàng)板

15、、 表格、樹(shù)、窗口、菜單、工具欄、按鈕等等，在我們的應(yīng)用程序中可以直接通過(guò)應(yīng)用這些控 件來(lái)實(shí)現(xiàn)友好、交互性強(qiáng)的應(yīng)用程序的 ui?？丶挥谠创a目錄的 widgets 子目錄中，包含 如圖 xx 所示。實(shí)用工具 utils：ext 提供了很多的實(shí)用工具，可以方便我們實(shí)現(xiàn)如數(shù)據(jù)內(nèi)容格式化、json數(shù)據(jù)解碼或反解碼、對(duì) date、array、發(fā)送 ajax 請(qǐng)求、cookie 管理、css 管理等擴(kuò)展等功 能，如圖所示：3.2、ext 的組件ext2.0 對(duì)框架進(jìn)行了非常大的重構(gòu)，其中最重要的就是形成了一個(gè)結(jié)構(gòu)及層次分明的組 件體系，由這些組件形成了 ext 的控件，ext 組件是由 compone

16、nt 類定義，每一種組件都有 一個(gè)指定的 xtype 屬性值，通過(guò)該值可以得到一個(gè)組件的類型或者是定義一個(gè)指定類型的組 件。extjs 中的組件體系由下圖所示：組件大致可以分成三大類，即基本組件、工具欄組件、表單及元素組件?；窘M件有：xtypeclassboxext.boxcomponent 具有邊框?qū)傩缘慕M件buttonext.button按鈕colorpaletteext.colorpalette 調(diào)色板componentext.component組件containerext.container容器cycleext.cyclebuttondataviewext.dataview 數(shù)據(jù)顯示

17、視圖datepickerext.datepicker 日期選擇面板e(cuò)ditorext.editor編輯器editorgridext.grid.editorgridpanel 可編輯的表格gridext.grid.gridpanel 表格pagingext.pagingtoolbar 工具欄中的間隔panelext.panel面板progressext.progressbar 進(jìn)度條splitbuttonext.splitbutton 可分裂的按鈕tabpanelext.tabpanel選項(xiàng)面板treepanelext.tree.treepanel 樹(shù)viewportext.viewport 視

18、圖windowext.window窗口工具欄組件有toolbarext.toolbar工具欄tbbuttonext.toolbar.button按鈕tbfillext.toolbar.fill文件tbitemext.toolbar.item工具條項(xiàng)目tbseparatorext.toolbar.separator工具欄分隔符tbspacerext.toolbar.spacer工具欄空白tbsplitext.toolbar.splitbutton 工具欄分隔按鈕tbtextext.toolbar.textitem工具欄文本項(xiàng)表單及字段組件包含formext.formpanelform 面板che

19、ckboxext.form.checkboxcheckbox 錄入框comboext.form.comboboxcombo 選擇項(xiàng)datefieldext.form.datefield日期選擇項(xiàng)fieldext.form.field表單字段fieldsetext.form.fieldset表單字段組hiddenext.form.hidden 表單隱藏域htmleditorext.form.htmleditorhtml 編輯器numberfieldext.form.numberfield數(shù)字編輯器radioext.form.radio單選按鈕textareaext.form.textarea區(qū)域

20、文本框textfieldext.form.textfield表單文本框timefieldext.form.timefield時(shí)間錄入項(xiàng)triggerext.form.triggerfield觸發(fā)錄入項(xiàng)3.3、組件的使用組件可以直接通過(guò) new 關(guān)鍵子來(lái)創(chuàng)建，比如控件一個(gè)窗口，使用 new ext.window()， 創(chuàng)建一個(gè)表格則使用 new ext.gridpanel()。當(dāng)然，除了一些普通的組件以外，一般都會(huì)在構(gòu) 造函數(shù)中通過(guò)傳遞構(gòu)造參數(shù)來(lái)創(chuàng)建組件。組件的構(gòu)造函數(shù)中一般都可以包含一個(gè)對(duì)象，這個(gè)對(duì)象包含創(chuàng)建組件所需要的配置屬性 及值，組件根據(jù)構(gòu)造函數(shù)中的參數(shù)屬性值來(lái)初始化組件。比如下面的例子

21、：var obj=title:"hello",width:300,height:200,html:'hello,easyjf open source'var panel=new ext.panel(obj); panel.render("hello");<div id="hello">&nbsp;</div>運(yùn)行上面的代碼可以實(shí)現(xiàn)如下圖所示的結(jié)果：可以省掉變量 obj，直接寫成如下的形式：var panel=new ext.panel(title:"hello",wi

22、dth:300,height:200,html:'<h1>hello,easyjf open source</h1>');panel.render("hello");render 方法后面的參數(shù)表示頁(yè)面上的 div 元素 id，也可以直接在參數(shù)中通過(guò) renderto 參數(shù)來(lái)省略手動(dòng)讞用 render 方法，只需要在構(gòu)造函數(shù)的參數(shù)中添加一個(gè) renderto 屬性即可， 如下：new ext.panel(renderto:"hello",title:"hello",width:300,heigh

23、t:200,html:'<h1>hello,easyjf open source</h1>');對(duì)于容器中的子元素組件，都支持延遲加載的方式創(chuàng)建控件，此時(shí)可以直接通過(guò)在需要父組件的構(gòu)造函數(shù)中，通過(guò)給屬性 items 傳遞數(shù)組方式實(shí)現(xiàn)構(gòu)造。如下面的代碼：var panel=new ext.tabpanel(width:300,height:200,items:title:"面板1",height:30,title:"面板2",height:30,title:"面板3",height:30);pan

24、el.render("hello");注意中括號(hào)中加粗部份的代碼，這些代碼定義了 tabpanel 這個(gè)容器控件中的子元素，這里包括三個(gè)面板。上面的代碼與下面的代碼等價(jià)：var panel=new ext.tabpanel(width:300,height:200,items:new ext.panel( title:"面板1",height:30),newext.panel(title:"面板2",height:30),new ext.panel(title:"面板3",height:30);panel.rend

25、er("hello");前者不但省略掉了 new ext.panel 這個(gè)構(gòu)造函數(shù)，最重要前者只有在初始化 tabpanel 的時(shí)候，才會(huì)創(chuàng)建子面板，而第二種方式則在程序一開(kāi)始就會(huì)創(chuàng)建子面板。也就是說(shuō)，前者實(shí) 現(xiàn)的延遲加載。3.4、組件的配置屬性在 extjs 中，除了一些特殊的組件或類以外，所有的組件在初始化的時(shí)候都可以在構(gòu)造 函數(shù)使用一個(gè)包含屬性名稱及值的對(duì)象，該對(duì)象中的信息也就是指組件的配置屬性。 比如配置一個(gè)面板：new ext.panel( title:"面板", html"面板內(nèi)容",height:100);再比如創(chuàng)建一個(gè)

26、按鈕：var b=new ext.button( text:"添加", pressed:true,heigth:30, handler:ext.emptyfn);再比如創(chuàng)建一個(gè) viewport 及其中的內(nèi)容：new ext.viewport( layout:"border", items:region:"north",title:"面板",html:"面板內(nèi)容", height:100,region:"center", xtype:"grid",titl

27、e:"學(xué)生信息管理",store:troe, cm:colm, store:store,autoexpandcolumn:3);每一個(gè)組件除了繼承基類中的配置屬性以外，還會(huì)根據(jù)需要增加自己的配置屬性，另外子類中有的時(shí)候還會(huì)把父類的一些配置屬性的含義及用途重新定 義。學(xué)習(xí)及使用 extjs， 其中最關(guān)鍵的是掌握 extjs 中的各個(gè)組件的配置屬性及具體的含義，這些配置屬性在下載下 來(lái)的 extjs 源碼文檔中都有詳細(xì)的 說(shuō)明，可以通過(guò)這個(gè)文檔詳細(xì)了解每一個(gè)組件的特性， 如下圖所示：由于所有的組件都繼承自 ext.component，因此在這里我們列出組件基類 componen

28、t 中的配置屬性簡(jiǎn)單介紹。配 置 屬性名稱類型簡(jiǎn)介allowdommoveboolean當(dāng)渲染這個(gè)組件時(shí)是否允許移動(dòng)dom節(jié)點(diǎn)（默認(rèn)值為true）。applytomixed混 合參數(shù)，表示把該組件應(yīng)用指定的對(duì)象。參數(shù)可以是節(jié)點(diǎn)的id，一個(gè)dom節(jié)點(diǎn)或一個(gè)存在的元素或與之相對(duì)應(yīng)的在document中已出現(xiàn) 的id。當(dāng)使用 applyto，也可以提供一個(gè)id或css的class名稱，如果子組 件允許它將嘗試創(chuàng)建一個(gè)。如果指寫applyto選項(xiàng)，所有傳遞到 renderto 方法的值將被忽略，并且目標(biāo)元素的父節(jié)點(diǎn)將自動(dòng)指定為這個(gè)組件的容 器。使用applyto選項(xiàng)后，則不需要再調(diào)用render()方

29、法來(lái) 渲染組件。autoshowboolean自動(dòng)顯示，如為true，則組件將檢查所有隱藏類型的c la ss（如：x-hidden或x-hide-display并在渲染時(shí)移除(默認(rèn)為false)。clsstring給組件添加額外的樣式信息，（默認(rèn)值為''），如果想自定義組件或它的子組件的樣式，這個(gè)選項(xiàng)是非常有用的。ctclsstring給組件的容器添加額外的樣式信息，默認(rèn)值為'')。disabledclassstring給被禁用的組件添加額外的css樣式信息，（默認(rèn)為"x-item-disabled"）。hidemo destring組 件

30、 的 隱 藏 方 式 ， 支 持 的 值 有 visibility ， 也 就 是 css 里 的visibility，offsets負(fù)數(shù)偏移位置的值和display也就是css里的display， 默認(rèn)值為display。hideparentboolean是否隱藏父容器，該值為true時(shí)將會(huì)顯示或隱藏組件的容器，false時(shí)則只隱藏和顯示組件本身（默認(rèn)值為false）。idstring組件的id，默認(rèn)為一個(gè)自動(dòng)分配置的id。listenersobject給對(duì)象配置多個(gè)事件監(jiān)聽(tīng)器，在對(duì)象初始化會(huì)初始化這些監(jiān)聽(tīng)器。pluginsobject/一 個(gè)對(duì)象或數(shù)組，將用于增加組件的自定義功能。一個(gè)有效

31、的組件插array件必須包含一個(gè)init方法，該方法可以帶一個(gè)ext.component類型參數(shù)。當(dāng)組件 建立后，如果該組件包含有效的插件，將調(diào)用每一個(gè)插件的init 方法，把組件傳遞給插件，插件就能夠?qū)崿F(xiàn)對(duì)組件的方法調(diào)用及事件應(yīng) 用等，從而實(shí)現(xiàn)對(duì)組件功 能的擴(kuò)充。rendertomixed混合數(shù)據(jù)參數(shù)，指定要渲染到節(jié)點(diǎn)的id，一個(gè)dom的節(jié)點(diǎn)或一個(gè)已存在的容器。如果使用了這個(gè)配置選項(xiàng)，則組件的render()就不是必需的 了。stateeve ntsarray定義需要保存組件狀態(tài)信息的事件。當(dāng)指定的事件發(fā)生時(shí)，組件會(huì)保存它的狀態(tài)（默認(rèn)為none），其值為這個(gè)組件支持的任意event類型，包含

32、 組件自身的或自定義事件。（例如：click,customerchange）。stateidstring組件的狀態(tài)id，狀態(tài)管理器使用該id來(lái)管理組件的狀態(tài)信息，默認(rèn)值為組件的id。stylestring給 該 組 件 的 元 素 指 定 特 定 的 樣 式 信 息 ， 有 效 的 參 數(shù) 為ext.element.applystyles中的值。xtypestring指定所要?jiǎng)?chuàng)建組件的xtype，用于構(gòu)造函數(shù)中沒(méi)有意義。該參數(shù)用于在容器組件中創(chuàng)建創(chuàng)建子組件并延遲實(shí)例化和渲染時(shí)使用。如果是自定義 的組件，則需要用ext.componentmgr.registertype來(lái)進(jìn)行注冊(cè)，才會(huì)支 持延遲

33、實(shí)例化和渲染。elmixed相當(dāng)于applyto關(guān)于 extjs 中組件的詳細(xì)使用說(shuō)明，包括 component 的屬性 properties、方法及事件詳細(xì)，請(qǐng)參考 中的 vip 文檔extjs 組件 component 詳解(1)、(2)。3.5、extjs 組件的事件處理extjs 提供了一套強(qiáng)大的事件處理機(jī)制，通過(guò)這些事件處理機(jī)制來(lái)響應(yīng)用戶的動(dòng)作、監(jiān) 控 控 件 狀 態(tài) 變 化 、 更 新 控 件 視 圖 信 息 、 與 服 務(wù) 器 進(jìn) 行 交 互 等 等 。 事 件 統(tǒng) 一 由 ext.eventmanager 對(duì)象管理，與瀏覽器 w3c 標(biāo)準(zhǔn)事件對(duì)象 event 相對(duì) 應(yīng)，ext

34、封裝了一個(gè) ext.eventobject 事件對(duì)象。支持事件處理的類(或接口)為 ext.util.observable，凡是繼承該類 的組 件或類都支持往對(duì)象中添加事件處理及響應(yīng)功能。首先我們來(lái)看標(biāo)準(zhǔn) html 中的事件處理，看下面的 html 代碼：<script>function a()alert('some thing');</script><input id="btnalert" type="button" onclick="a();" value="alert框&q

35、uot; />點(diǎn)擊這個(gè)按鈕則會(huì)觸發(fā) onclick 事件，并執(zhí)行 onclick 事件處理函數(shù)中指定的代碼，這里直接執(zhí)行函數(shù) a 中的代碼，也即彈出一個(gè)簡(jiǎn)單的信息提示框。再簡(jiǎn)單修改一下上面的代碼， 內(nèi)容如下：<script>function a()alert('some thing');window.onload=function()document.getelementbyid("btnalert").onclick=a;</script><input id="btnalert" type="

36、;button" value="alert框" />上面的代碼在文檔加載的時(shí)候，就直接對(duì) btnalert 的 onclick 賦值，非常清晰的指明了按鈕 btnalert 的 onclick 事件響應(yīng)函數(shù)為 a，注意這里 a 后面不能使用括號(hào)“()”。extjs 中組件的事件處理跟上面相似，看下面的代碼：<script>function a()alert('some thing'); ext.onready(function()ext.get("btnalert").addlistener("cli

37、ck",a););</script><input id="btnalert" type="button" value="alert框" />ext.get("btnalert")得到一個(gè)與頁(yè)面中按鈕 btnalert 關(guān)聯(lián)的 ext.element 對(duì)象，可以直接調(diào)用該對(duì)象上的 addlistener 方法來(lái)給對(duì)象添加事件，同樣實(shí)現(xiàn)前面的效果。在調(diào)用 addlistener 方法的代碼中，第一個(gè)參數(shù)表示事件名稱，第二個(gè)參數(shù)表示事件處理器或整個(gè)響應(yīng)函數(shù)。 extjs 支持事件隊(duì)列，可

38、以往對(duì)象的某一個(gè)事件中添加多個(gè)事件響應(yīng)函數(shù)，看下面的代碼：ext.onready(function() ext.get("btnalert").on("click",a);ext.get("btnalert").on("click",a););addlinster 方法的另外一個(gè)簡(jiǎn)寫形式是 on，由于調(diào)用了兩次 addlistener 方法，因此當(dāng)點(diǎn)擊按鈕的時(shí)候會(huì)彈出兩次信息。當(dāng)然，extjs 還支持事件延遲處理或事件處理緩存等功能，比如下面的代碼：ext.onready(function()ext.get(&qu

39、ot;btnalert").on("click",a,this,delay:2000););由于在調(diào)用 addlistener 的時(shí)候傳遞指定的 delay 為 2000，因此當(dāng)用戶點(diǎn)擊按鈕的時(shí)候，不會(huì)馬上執(zhí)行事件響應(yīng)函數(shù)，而是在 2000 毫秒，也就是兩秒后才會(huì)彈出提示信息框。當(dāng)然，在使用 ext 的事件時(shí)，我們一般是直接在控件上事件，每一個(gè)控件包含哪些事件 ， 在什么時(shí)候觸發(fā)，觸發(fā)時(shí)傳遞的參數(shù)等，在 extjs 項(xiàng)目的文檔中 都有較為詳細(xì)的說(shuō)明。比 如對(duì)于所有的組件 component，都包含一個(gè) beforedestroy 事件，該事件會(huì)在 ext 銷毀這一

40、個(gè) 組件時(shí)觸發(fā)，如果事 件響應(yīng)函數(shù)返回 false，則會(huì)取消組件的銷毀操作。ext.onready(function()var win=new ext.window(title:"不能關(guān)閉的窗口",height:200, width:300);win.on("beforedestroy",function(obj) alert("想關(guān)閉我，這是不可能的!"); obj.show();return false;);win.show(););由于在窗口對(duì)象的 beforedestroy 事件響應(yīng)函數(shù)返回值為 false，因此執(zhí)行這段程序，

41、你會(huì)發(fā)現(xiàn)這個(gè)窗口將無(wú)法關(guān)閉。組件的事件監(jiān)聽(tīng)器可以直接在組件的配置屬性中直接聲明，如 下面的代碼與前面實(shí)現(xiàn)的功能一樣：ext.onready(function()var win=new ext.window( title:"不能關(guān)閉的窗口", height:200, width:300, listeners:"beforedestroy":function(obj)alert("想關(guān)閉我，這是不可能的!");obj.show();return false;);win.show(););了解了 extjs 中的基本事件處理及使用方法，就可

42、以在你的應(yīng)用中隨心所欲的進(jìn)行事件相關(guān)處理操作了。關(guān)于 extjs 中事件處理中作用域、事件處理原理、給自定義的組件添加事件、處理相關(guān)的 ext.util.observable及 ext.eventmanager 類詳細(xì)介紹，請(qǐng)參考 中的 vip 文檔extjs 中的事件處理詳解。第四章、使用面板4.1、panel面板 panel 是 extjs 控件的基礎(chǔ)，很高級(jí)控件都是在面板的基礎(chǔ)上擴(kuò)展的，還有其它大 多數(shù)控件也都直接或間接有關(guān)系。應(yīng)用程序的界面一般情況下是由一個(gè)一個(gè)的面板通過(guò)不同 組織方式形成。面板由以下幾個(gè)部分組成，一個(gè)頂部工具欄、一個(gè)底部工具欄、面板頭部、面板尾部、 面板主區(qū)域幾個(gè)部分

43、組件。面板類中還內(nèi)置了面板展開(kāi)、關(guān)閉等功能，并 提供一系列可重 用的工具按鈕使得我們可以輕松實(shí)現(xiàn)自定義的行為，面板可以放入其它任何容器中，面板本 身是一個(gè)容器，他里面又可以包含各種其它組件。面板的類名為 ext.panel，其 xtype 為 panel，下面的代碼可以顯示出面板的各個(gè)組成部 分：ext.onready(function()new ext.panel( renderto:"hello", title:"面板頭部header", width:300,height:200, html:'<h1>面板主區(qū)域</h1&g

44、t;', tbar:text:'頂部工具欄toptoolbar', bbar:text:'底部工具欄bottomtoolbar', buttons:text:"按鈕位于footer"););運(yùn)行該代碼，可以得到如圖 xx 所示的輸出結(jié)果，清楚的表示出了面板的各個(gè)組成部分。一般情況下，頂部工具欄或底部工具欄只需要一個(gè)，而面板中一般也很少直接包含按鈕 ， 一般會(huì)把面板上的按鈕直接放到工具欄上面。比如下面的代碼：ext.onready(function()new ext.panel(- 29 -););renderto:"hell

45、o", title:"hello", width:300, height:200,html:'<h1>hello,easyjf open source!</h1>', tbar:pressed:true,text:'刷新'可以得到如圖xx所示的效果，該面板包含面板header，一個(gè)頂部工具欄及面板區(qū)域三個(gè)部分。4.2、工具欄面板中可以有工具欄，工具欄可以位于面板頂部或底部，ext 中工具欄是由 ext.toolbar類表示。工具欄上可以存放按鈕、文本、分隔符等內(nèi)容。面板對(duì)象中內(nèi)置了很多實(shí)用的工具 欄，可以直接

46、通過(guò)面板的 tools 配置選項(xiàng)往面板頭部加入預(yù)定義的工具欄選項(xiàng)。比如下面的 代碼：ext.onready(function()new ext.panel( renderto:"hello", title:"hello", width:300, height:200,html:'<h1>hello,easyjf open source!</h1>',tools:id:"save",id:"help",handler:function()ext.msg.alert('h

47、elp','please help me!');,););id:"close", tbar:pressed:true,text:'刷新'注意我們?cè)趐anel的構(gòu)造函數(shù)中設(shè)置了tools屬性的值，表示在面板頭部顯示三個(gè)工具欄選項(xiàng)按鈕，分別是保存"save"、"help"、"close"三種。代碼運(yùn)行的效果圖如下：點(diǎn)擊help按鈕會(huì)執(zhí)行handler中的函數(shù)，顯示一個(gè)彈出對(duì)話框，而點(diǎn)擊其它的按鈕不會(huì)有任何行為產(chǎn)生，因?yàn)闆](méi)有定義他們的heanlder。除了在面板頭部加入這些已經(jīng)定義

48、好的工具欄選擇按鈕以外，還可以在頂部或底工具欄 中加入各種工具欄選項(xiàng)。這些工具欄選項(xiàng)主要包括按鈕、文本、空白、填充條、分隔符等。 代碼：ext.onready(function()new ext.panel( renderto:"hello", title:"hello", width:300, height:200,html:'<h1>hello,easyjf open source!</h1>', tbar:new ext.toolbar.textitem('工具欄:'),xtype:"

49、;tbfill",pressed:true,text:'添加',xtype:"tbseparator",pressed:true,text:'保存'););將會(huì)得到如圖xx所示的結(jié)果：ext中的工具欄項(xiàng)目主要包含下面的類：ext.toolbar.button按鈕，xtype為tbbuttontextitem ext.toolbar.fill separator spacer splitbutton4.3、選項(xiàng)面板的 tabpanel在前面的示例中，為了顯示一個(gè)面板，我們需要在頁(yè)面上添加一個(gè)，然后把 ext 控件 渲染到這個(gè) div

50、上。veiwport 代表整個(gè)瀏覽器顯示區(qū)域，該對(duì)象渲染到頁(yè)面的 body 區(qū) 域 ， 并會(huì)隨著瀏覽器顯示區(qū)域的大小自動(dòng)改變，一個(gè) 頁(yè)面中只能有一個(gè) viewport 實(shí)例?？聪旅?的代碼：ext.onready(function() new ext.viewport( enabletabscroll:true, layout:"fit",items:title:"面板",html:"", bbar:text:"按鈕1",text:"按鈕2"););運(yùn)行上面的代碼會(huì)得到如圖 xxx 所示的輸出結(jié)

51、果。viewport 不需要再指定 renderto，而我們也看到 viewport 確實(shí)填充了整個(gè)瀏覽器顯示區(qū)域，并會(huì)隨著瀏覽器顯示區(qū)域大小的改變而改改。viewport 主要用于應(yīng)用程序的主界面，可以通過(guò)使用不同的布局來(lái)搭建出不同風(fēng)格的應(yīng) 用程序主界面。在 viewport 上常用的布局有 fit、border 等，當(dāng)然在需要的時(shí)候其它布局也 會(huì)常用。看下面的代碼：ext.onready(function() new ext.viewport( enabletabscroll:true, layout:"border",items:title:"面板"

52、;,region:"north", height:50, html:"<h1>網(wǎng)站后臺(tái)管理系統(tǒng)!</h1>",title:"菜單", region:"west", width:200, collapsible:true, html:"菜單欄", xtype:"tabpanel", region:"center",items:title:"面板1",title:"面板2"););運(yùn)行上面的程序會(huì)

53、得如圖 xx 所示的效果。第五章、窗口及對(duì)話框5.1、窗口基本應(yīng)用extjs 中窗口是由 ext.window 類定義，該類繼承自 panel，因此窗口其實(shí)是一種特殊的 面板 panel。窗口包含了浮動(dòng)、可拖動(dòng)、可關(guān)閉、最大化、最小化等特性?？聪旅娴拇a：var i=0;function newwin()var win=new ext.window(title:"窗口"+i+, width:400,height:300, maximizable:true);win.show();ext.onready(function() ext.get("btn").

54、on("click",newwin););頁(yè)面中的 html 內(nèi)容：<input id="btn" type="button" name="add" value="新窗口" />執(zhí)行上面的代碼，當(dāng)點(diǎn)擊按鈕“新窗口”的時(shí)候，會(huì)在頁(yè)面中顯示一個(gè)窗口，窗口標(biāo)題為“窗口 x”，窗口可以關(guān)閉，可以最大化，點(diǎn)擊最大化按鈕會(huì)最大化窗口，最大化的窗口可以 還原，如圖 xxx 所示。5.2、窗口分組窗口是分組進(jìn)行管理的，可以對(duì)一組窗口進(jìn)行操作，默認(rèn)情況下的窗口都在默認(rèn)的組 ext.windowmgr

55、中。窗口分組由類 ext.windowgroup 定義，該類包括 bringtofront、getactive、 hideall、sendtoback 等方法用來(lái)對(duì)分組中的窗口進(jìn)行操作?？聪旅娴拇a：var i=0,mygroup;function newwin()var win=new ext.window(title:"窗口"+i+,width:400, height:300,maximizable:true, manager:mygroup); win.show();function toback()mygroup.sendtoback(mygroup.getacti

56、ve();function hideall()mygroup.hideall();ext.oreay(function()mygroup=new ext.windowgroup(); ext.get("btn").on("click",newwin);ext.get("btntoback").on("click",toback); ext.get("btnhide").on("click",hideall););頁(yè)面中的 html 代碼<input id="b

57、tn" type="button" name="add" value="新窗口" /><input id="btntoback" type="button" name="add" value="放到后臺(tái)" /><input id="btnhide" type="button" name="add" value="隱藏所有" />執(zhí)行上面的

58、代碼，先點(diǎn)擊幾次“新窗口”按鈕，可以在頁(yè)面中顯示幾個(gè)容器，然后拖動(dòng)這些窗口，讓他們?cè)谄聊恢胁煌奈恢?。然后點(diǎn)“放到后臺(tái)”按鈕，可以實(shí)現(xiàn)把最前面的窗口移 動(dòng)該組窗口的最后面去，點(diǎn)擊“隱藏所有”按鈕，可以隱藏當(dāng)前打開(kāi)的所有窗口。如下圖所示 ：5.3、對(duì)話框由于傳統(tǒng)使用 alert、confirm 等方法產(chǎn)生的對(duì)話框非常古板，不好看。因此，extjs 提供 了一套非常漂亮的對(duì)話框，可以使用這些對(duì)話框代替?zhèn)鹘y(tǒng)的 alert、confirm 等，實(shí)現(xiàn)華麗的 應(yīng)用程序界面。ext 的對(duì)話框都封裝在 ext.messagebox 類，該類還有一個(gè)簡(jiǎn)寫形式即 ext.msg，可以直 接通過(guò) ext.messagebox 或 ext.msg 來(lái)直接調(diào)用相應(yīng)的對(duì)話框方法來(lái)顯示 ext 對(duì)話框?？聪?面的代碼：ext.onready(function() ext.get("btnalert").on("click",function(

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論