extjs實用開發(fā)指南

1、序言extjs 是一個很不錯的 ajax 框架，可以用來開發(fā)帶有華麗外觀的富客戶端應(yīng)用，使得我 們的 b/s 應(yīng)用更加具有活力及生命力。extjs 是一個用 javascript 編寫，與后臺技術(shù)無關(guān)的前 端 ajax 框架。因此，可以把 extjs 用在.net、java、php 等各種開發(fā)語言開發(fā)的應(yīng)用中。 最近我們在幾個應(yīng)用都使用到了 extjs，對公司以前開發(fā)的一個 oa 系統(tǒng)也正在使用 extjs2.0 進(jìn)行改造，使得整個系統(tǒng)在用戶體驗上有了非常大的變化。本教程記錄了前段時間本人學(xué)習(xí) extjs 的一些心得及小結(jié)，希望能幫助正在學(xué)習(xí)或準(zhǔn)備學(xué)習(xí) extjs 的朋友們快速走進(jìn) extjs

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

3、 為 入 門 教 程 及 手 冊 使 用 ， 并 在 我 的 博 客 /blog/lengyu/上進(jìn)行發(fā)布；應(yīng)一些朋友的要求，根據(jù)本教程的寫作思路， 我還編寫了比本教程更為詳細(xì)的extjs 實用開發(fā)指南，包含詳細(xì)的 extjs 框架使用方法、 各個控件詳細(xì)配置參數(shù)、屬性、方法及事件介紹，與服務(wù)器端集成及一個完整的示例應(yīng)用系 統(tǒng)介紹等內(nèi)容，適合想深入學(xué)習(xí) extjs 或正在使用 extjs 進(jìn)行開發(fā)朋友們使用。該指南 當(dāng)前在 作為 vip 文檔發(fā)布，供該站的 vip 用戶閱讀及下載。凡是購買了extjs 實用開發(fā)指南文檔的 v

4、ip 用戶，都可以在該指南印刷版出版后均會免費得到相應(yīng)的印刷 版本。最后，希望廣大網(wǎng)友把閱讀本教程中的發(fā)現(xiàn)的錯誤、不足及建議等反饋給我們，讓我們 一起共同學(xué)習(xí)、共同進(jìn)步，下面讓我們一起進(jìn)入精彩的 extjs 世界吧。第一章、extjs簡介extjs是一個ajax框架，是一個用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用 程序界面。extjs可以用來開發(fā)ria也即富客戶端的ajax應(yīng)用，下面是一些使用extjs開發(fā)的 應(yīng)用程序截圖：(wlr的blog應(yīng)用)(extjs的表格控件)(不同主題的extjs彈出框效果) extjs是一個用javascript寫的，主要用于創(chuàng)建前端用戶

5、界面，是一個與后臺技術(shù)無關(guān)的前端ajax框架。因此，可以把extjs用在.net、java、php等各種開發(fā)語言開發(fā)的應(yīng)用中。extjs 最開始基于 yui 技術(shù)，由開發(fā)人員 jack slocum 開發(fā)，通過參考 java swing 等機(jī)制來組織可視化組件，無論從 ui 界面上 css 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理， 都可算是一款不可多得的 javascript 客戶端技術(shù)的精品。第二章、開始 extjs2.1 獲得 extjs要使用 extjs，那么首先要得到 extjs 庫文件，該框架是一個開源的，可以直接從官方 網(wǎng)站下載，網(wǎng)址 /download，

6、進(jìn)入下載頁面可以看到大致如圖 xxx 所示的內(nèi)容 ， 可以選擇選擇 1.1 或 2.0 版本，本教程使用的 2.0 版本。圖 1-1 extjs 不同版本下載選擇頁面單擊上圖中的【download ext-2.0.zip】超鏈接進(jìn)行下載，把下載得到的 zip 壓縮文件解 壓縮到【d:extcode】目錄下，可以得到如如圖 1-2 所示的內(nèi)容。圖 1-2 extjs 發(fā)布包目錄adapter：負(fù)責(zé)將里面提供第三方底層庫（包括 ext 自帶的底層庫）映射為 ext 所支持 的底層庫。build： 壓縮后的 ext 全部源碼(里面分類存放)。docs： api 幫助文檔。exmaples：提供使用

7、extjs 技術(shù)做出的小實例。resources：ext ui 資源文件目錄，如 css、圖片文件都存放在這里面。source： 無壓縮 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 下的所有類。2.2、應(yīng)用 extjs應(yīng)用 extj

8、s 需要在頁面中引入 extjs 的樣式及 extjs 庫文件，樣式文件為 resources/css/ext- all.css，extjs 的 js 庫文件主要包含兩個，adapter/ext/ext-base.js 及 ext-all.js，其中 ext-base.js 表示框架基礎(chǔ)庫，ext-all.js 是 extjs 的核心庫。adapter 表示適配器，也就是說可以有多種適 配 器 ， 因 此 ， 可 以 把 adapter/ext/ext-base.js 換 成 adapter/jquery/ext-jquery-adapter.js ， 或 adapter/prototype/

9、ext-prototype-adapter.js 等。因此，要使用 extjs 框架的頁面中一般包括下面 幾句：在 extjs 庫文件及頁面內(nèi)容加載完后，extjs 會執(zhí)行 ext.onready 中指定的函數(shù)，因此可以用，一般情況下每一個用戶的 extjs 應(yīng)用都是從 ext.onready 開始的，使用 extjs 應(yīng)用 程序的代碼大致如下：function fn()alert(extjs庫已加);ext.onready(fn);fn 也可以寫成一個匿名函數(shù)的形式，因此上面的代碼可以改成下面的形式：function fn()alert(extjs庫已加載!);ext.onready(fun

10、ction ()alert(extjs庫已加載!););2.3、extjs 版的 helloworld下面我們寫一個最簡單的 extjs 應(yīng)用，在 hello.html 文件中輸入下面的代碼：extjs ext.onready(function();ext.messagebox.alert(hello,hello,easyjf open source);圖1-11 hello.html頁面效果進(jìn)一步，我們可以在頁面上顯示一個窗口，代碼如下： ext.onready(function()var win=new ext.window(title:hello,width:300,height:200

11、,html:hello,easyjf open source);win.show(););在瀏覽 hello.html，即可得在屏幕上顯示一個窗口，如圖 xxx 所示。第三章 ext 框架基礎(chǔ)及核心簡介3.1、ext 類庫簡介extjs 由一系列的類庫組成，一旦頁面成功加載了 extjs 庫后，我們就可以在頁面中通 過 javascript 調(diào)用 extjs 的類及控件來實現(xiàn)需要的功能。extjs 的類庫由以下幾部分組成：底層 api(core)：底層 api 中提供了對 dom 操作、查詢的封裝、事件處理、dom 查詢器等基礎(chǔ)的功能。其它控件都是建立在這些底層 api 的基礎(chǔ)上，底層 api

12、 位于源代碼目錄的core 子目錄中，包括 domhelper.js、element.js 等文件，如圖 xx 所示?？丶?widgets)：控件是指可以直接在頁面中創(chuàng)建的可視化組件，比如面板、選項板、 表格、樹、窗口、菜單、工具欄、按鈕等等，在我們的應(yīng)用程序中可以直接通過應(yīng)用這些控 件來實現(xiàn)友好、交互性強(qiáng)的應(yīng)用程序的 ui。控件位于源代碼目錄的 widgets 子目錄中，包含 如圖 xx 所示。實用工具 utils：ext 提供了很多的實用工具，可以方便我們實現(xiàn)如數(shù)據(jù)內(nèi)容格式化、json數(shù)據(jù)解碼或反解碼、對 date、array、發(fā)送 ajax 請求、cookie 管理、css 管理等擴(kuò)展等

13、功 能，如圖所示：3.2、ext 的組件ext2.0 對框架進(jìn)行了非常大的重構(gòu)，其中最重要的就是形成了一個結(jié)構(gòu)及層次分明的組 件體系，由這些組件形成了 ext 的控件，ext 組件是由 component 類定義，每一種組件都有 一個指定的 xtype 屬性值，通過該值可以得到一個組件的類型或者是定義一個指定類型的組 件。extjs 中的組件體系由下圖所示：組件大致可以分成三大類，即基本組件、工具欄組件、表單及元素組件?；窘M件有：xtypeclassboxext.boxcomponent 具有邊框?qū)傩缘慕M件buttonext.button按鈕colorpaletteext.colorpale

14、tte 調(diào)色板componentext.component組件containerext.container容器cycleext.cyclebuttondataviewext.dataview 數(shù)據(jù)顯示視圖datepickerext.datepicker 日期選擇面板editorext.editor編輯器editorgridext.grid.editorgridpanel 可編輯的表格gridext.grid.gridpanel 表格pagingext.pagingtoolbar 工具欄中的間隔panelext.panel面板progressext.progressbar 進(jìn)度條splitbut

15、tonext.splitbutton 可分裂的按鈕tabpanelext.tabpanel選項面板treepanelext.tree.treepanel 樹viewportext.viewport 視圖windowext.window窗口工具欄組件有toolbarext.toolbar工具欄tbbuttonext.toolbar.button按鈕tbfillext.toolbar.fill文件tbitemext.toolbar.item工具條項目tbseparatorext.toolbar.separator工具欄分隔符tbspacerext.toolbar.spacer工具欄空白tbspli

16、text.toolbar.splitbutton 工具欄分隔按鈕tbtextext.toolbar.textitem工具欄文本項表單及字段組件包含formext.formpanelform 面板checkboxext.form.checkboxcheckbox 錄入框comboext.form.comboboxcombo 選擇項datefieldext.form.datefield日期選擇項fieldext.form.field表單字段fieldsetext.form.fieldset表單字段組hiddenext.form.hidden 表單隱藏域htmleditorext.form.html

17、editorhtml 編輯器numberfieldext.form.numberfield數(shù)字編輯器radioext.form.radio單選按鈕textareaext.form.textarea區(qū)域文本框textfieldext.form.textfield表單文本框timefieldext.form.timefield時間錄入項triggerext.form.triggerfield觸發(fā)錄入項3.3、組件的使用組件可以直接通過 new 關(guān)鍵子來創(chuàng)建，比如控件一個窗口，使用 new ext.window()， 創(chuàng)建一個表格則使用 new ext.gridpanel()。當(dāng)然，除了一些普通的組

18、件以外，一般都會在構(gòu) 造函數(shù)中通過傳遞構(gòu)造參數(shù)來創(chuàng)建組件。組件的構(gòu)造函數(shù)中一般都可以包含一個對象，這個對象包含創(chuàng)建組件所需要的配置屬性 及值，組件根據(jù)構(gòu)造函數(shù)中的參數(shù)屬性值來初始化組件。比如下面的例子：var obj=title:hello,width:300,height:200,html:hello,easyjf open source;var panel=new ext.panel(obj); panel.render(hello); 運(yùn)行上面的代碼可以實現(xiàn)如下圖所示的結(jié)果：可以省掉變量 obj，直接寫成如下的形式：var panel=new ext.panel(title:h

19、ello,width:300,height:200,html:hello,easyjf open source);panel.render(hello);render 方法后面的參數(shù)表示頁面上的 div 元素 id，也可以直接在參數(shù)中通過 renderto 參數(shù)來省略手動讞用 render 方法，只需要在構(gòu)造函數(shù)的參數(shù)中添加一個 renderto 屬性即可， 如下：new ext.panel(renderto:hello,title:hello,width:300,height:200,html:hello,easyjf open source);對于容器中的子元素組件，都支持延遲加載的方式創(chuàng)

20、建控件，此時可以直接通過在需要父組件的構(gòu)造函數(shù)中，通過給屬性 items 傳遞數(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);panel.render(hello);注意中括號中加粗部份的代碼，這些代碼定義了 tabpanel 這個容器控件中的子元素，這里包括三個面板。上面的代碼與下面的代碼等價：var panel=new ext.tabpanel(width:300,height:

21、200,items:new ext.panel( title:面板1,height:30),newext.panel(title:面板2,height:30),new ext.panel(title:面板3,height:30);panel.render(hello);前者不但省略掉了 new ext.panel 這個構(gòu)造函數(shù)，最重要前者只有在初始化 tabpanel 的時候，才會創(chuàng)建子面板，而第二種方式則在程序一開始就會創(chuàng)建子面板。也就是說，前者實 現(xiàn)的延遲加載。3.4、組件的配置屬性在 extjs 中，除了一些特殊的組件或類以外，所有的組件在初始化的時候都可以在構(gòu)造 函數(shù)使用一個包含屬性名

22、稱及值的對象，該對象中的信息也就是指組件的配置屬性。 比如配置一個面板：new ext.panel( title:面板, html面板內(nèi)容,height:100);再比如創(chuàng)建一個按鈕：var b=new ext.button( text:添加, pressed:true,heigth:30, handler:ext.emptyfn);再比如創(chuàng)建一個 viewport 及其中的內(nèi)容：new ext.viewport( layout:border, items:region:north,title:面板,html:面板內(nèi)容, height:100,region:center, xtype:grid

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

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

25、。autoshowboolean自動顯示，如為true，則組件將檢查所有隱藏類型的c la ss（如：x-hidden或x-hide-display并在渲染時移除(默認(rèn)為false)。clsstring給組件添加額外的樣式信息，（默認(rèn)值為），如果想自定義組件或它的子組件的樣式，這個選項是非常有用的。ctclsstring給組件的容器添加額外的樣式信息，默認(rèn)值為)。disabledclassstring給被禁用的組件添加額外的css樣式信息，（默認(rèn)為x-item-disabled）。hidemo destring組 件 的 隱 藏 方 式 ， 支 持 的 值 有 visibility ， 也 就

26、 是 css 里 的visibility，offsets負(fù)數(shù)偏移位置的值和display也就是css里的display， 默認(rèn)值為display。hideparentboolean是否隱藏父容器，該值為true時將會顯示或隱藏組件的容器，false時則只隱藏和顯示組件本身（默認(rèn)值為false）。idstring組件的id，默認(rèn)為一個自動分配置的id。listenersobject給對象配置多個事件監(jiān)聽器，在對象初始化會初始化這些監(jiān)聽器。pluginsobject/一 個對象或數(shù)組，將用于增加組件的自定義功能。一個有效的組件插array件必須包含一個init方法，該方法可以帶一個ext.comp

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

28、stateidstring組件的狀態(tài)id，狀態(tài)管理器使用該id來管理組件的狀態(tài)信息，默認(rèn)值為組件的id。stylestring給 該 組 件 的 元 素 指 定 特 定 的 樣 式 信 息 ， 有 效 的 參 數(shù) 為ext.element.applystyles中的值。xtypestring指定所要創(chuàng)建組件的xtype，用于構(gòu)造函數(shù)中沒有意義。該參數(shù)用于在容器組件中創(chuàng)建創(chuàng)建子組件并延遲實例化和渲染時使用。如果是自定義 的組件，則需要用ext.componentmgr.registertype來進(jìn)行注冊，才會支 持延遲實例化和渲染。elmixed相當(dāng)于applyto關(guān)于 extjs 中組件的詳細(xì)

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

30、象。支持事件處理的類(或接口)為 ext.util.observable，凡是繼承該類 的組 件或類都支持往對象中添加事件處理及響應(yīng)功能。首先我們來看標(biāo)準(zhǔn) html 中的事件處理，看下面的 html 代碼：function a()alert(some thing);點擊這個按鈕則會觸發(fā) onclick 事件，并執(zhí)行 onclick 事件處理函數(shù)中指定的代碼，這里直接執(zhí)行函數(shù) a 中的代碼，也即彈出一個簡單的信息提示框。再簡單修改一下上面的代碼， 內(nèi)容如下：function a()alert(some thing);window.onload=function()document.getelem

31、entbyid(btnalert).onclick=a;上面的代碼在文檔加載的時候，就直接對 btnalert 的 onclick 賦值，非常清晰的指明了按鈕 btnalert 的 onclick 事件響應(yīng)函數(shù)為 a，注意這里 a 后面不能使用括號“()”。extjs 中組件的事件處理跟上面相似，看下面的代碼：function a()alert(some thing); ext.onready(function()ext.get(btnalert).addlistener(click,a););ext.get(btnalert)得到一個與頁面中按鈕 btnalert 關(guān)聯(lián)的 ext.eleme

32、nt 對象，可以直接調(diào)用該對象上的 addlistener 方法來給對象添加事件，同樣實現(xiàn)前面的效果。在調(diào)用 addlistener 方法的代碼中，第一個參數(shù)表示事件名稱，第二個參數(shù)表示事件處理器或整個響應(yīng)函數(shù)。 extjs 支持事件隊列，可以往對象的某一個事件中添加多個事件響應(yīng)函數(shù)，看下面的代碼：ext.onready(function() ext.get(btnalert).on(click,a);ext.get(btnalert).on(click,a););addlinster 方法的另外一個簡寫形式是 on，由于調(diào)用了兩次 addlistener 方法，因此當(dāng)點擊按鈕的時候會彈出兩次

33、信息。當(dāng)然，extjs 還支持事件延遲處理或事件處理緩存等功能，比如下面的代碼：ext.onready(function()ext.get(btnalert).on(click,a,this,delay:2000););由于在調(diào)用 addlistener 的時候傳遞指定的 delay 為 2000，因此當(dāng)用戶點擊按鈕的時候，不會馬上執(zhí)行事件響應(yīng)函數(shù)，而是在 2000 毫秒，也就是兩秒后才會彈出提示信息框。當(dāng)然，在使用 ext 的事件時，我們一般是直接在控件上事件，每一個控件包含哪些事件 ， 在什么時候觸發(fā)，觸發(fā)時傳遞的參數(shù)等，在 extjs 項目的文檔中 都有較為詳細(xì)的說明。比 如對于所有的組

34、件 component，都包含一個 beforedestroy 事件，該事件會在 ext 銷毀這一個 組件時觸發(fā)，如果事 件響應(yīng)函數(shù)返回 false，則會取消組件的銷毀操作。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(););由于在窗口對象的 beforedestroy 事件響應(yīng)函數(shù)返回值為 fa

35、lse，因此執(zhí)行這段程序，你會發(fā)現(xiàn)這個窗口將無法關(guān)閉。組件的事件監(jiān)聽器可以直接在組件的配置屬性中直接聲明，如 下面的代碼與前面實現(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 中的基本事件處理及使用方法，就可以在你的應(yīng)用中隨心所欲的進(jìn)行事件相關(guān)處理操作了

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

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

38、r, buttons:text:按鈕位于footer););運(yùn)行該代碼，可以得到如圖 xx 所示的輸出結(jié)果，清楚的表示出了面板的各個組成部分。一般情況下，頂部工具欄或底部工具欄只需要一個，而面板中一般也很少直接包含按鈕 ， 一般會把面板上的按鈕直接放到工具欄上面。比如下面的代碼：ext.onready(function()new ext.panel(););renderto:hello, title:hello, width:300, height:200,html:hello,easyjf open source!, tbar:pressed:true,text:刷新可以得到如圖xx所示的效

39、果，該面板包含面板header，一個頂部工具欄及面板區(qū)域三個部分。4.2、工具欄面板中可以有工具欄，工具欄可以位于面板頂部或底部，ext 中工具欄是由 ext.toolbar類表示。工具欄上可以存放按鈕、文本、分隔符等內(nèi)容。面板對象中內(nèi)置了很多實用的工具 欄，可以直接通過面板的 tools 配置選項往面板頭部加入預(yù)定義的工具欄選項。比如下面的 代碼：ext.onready(function()new ext.panel( renderto:hello, title:hello, width:300, height:200,html:hello,easyjf open source!,tools

40、:id:save,id:help,handler:function()ext.msg.alert(help,please help me!);,););id:close, tbar:pressed:true,text:刷新注意我們在panel的構(gòu)造函數(shù)中設(shè)置了tools屬性的值，表示在面板頭部顯示三個工具欄選項按鈕，分別是保存save、help、close三種。代碼運(yùn)行的效果圖如下：點擊help按鈕會執(zhí)行handler中的函數(shù)，顯示一個彈出對話框，而點擊其它的按鈕不會有任何行為產(chǎn)生，因為沒有定義他們的heanlder。除了在面板頭部加入這些已經(jīng)定義好的工具欄選擇按鈕以外，還可以在頂部或底工具欄

41、 中加入各種工具欄選項。這些工具欄選項主要包括按鈕、文本、空白、填充條、分隔符等。 代碼：ext.onready(function()new ext.panel( renderto:hello, title:hello, width:300, height:200,html:hello,easyjf open source!, tbar:new ext.toolbar.textitem(工具欄:),xtype:tbfill,pressed:true,text:添加,xtype:tbseparator,pressed:true,text:保存););將會得到如圖xx所示的結(jié)果：ext中的工具欄項

42、目主要包含下面的類：ext.toolbar.button按鈕，xtype為tbbuttontextitem ext.toolbar.fill separator spacer splitbutton4.3、選項面板的 tabpanel在前面的示例中，為了顯示一個面板，我們需要在頁面上添加一個，然后把 ext 控件 渲染到這個 div 上。veiwport 代表整個瀏覽器顯示區(qū)域，該對象渲染到頁面的 body 區(qū) 域 ， 并會隨著瀏覽器顯示區(qū)域的大小自動改變，一個 頁面中只能有一個 viewport 實例。看下面 的代碼：ext.onready(function() new ext.viewpo

43、rt( enabletabscroll:true, layout:fit,items:title:面板,html:, bbar:text:按鈕1,text:按鈕2););運(yùn)行上面的代碼會得到如圖 xxx 所示的輸出結(jié)果。viewport 不需要再指定 renderto，而我們也看到 viewport 確實填充了整個瀏覽器顯示區(qū)域，并會隨著瀏覽器顯示區(qū)域大小的改變而改改。viewport 主要用于應(yīng)用程序的主界面，可以通過使用不同的布局來搭建出不同風(fēng)格的應(yīng) 用程序主界面。在 viewport 上常用的布局有 fit、border 等，當(dāng)然在需要的時候其它布局也 會常用?？聪旅娴拇a：ext.on

44、ready(function() new ext.viewport( enabletabscroll:true, layout:border,items:title:面板,region:north, height:50, html:網(wǎng)站后臺管理系統(tǒng)!,title:菜單, region:west, width:200, collapsible:true, html:菜單欄, xtype:tabpanel, region:center,items:title:面板1,title:面板2););運(yùn)行上面的程序會得如圖 xx 所示的效果。第五章、窗口及對話框5.1、窗口基本應(yīng)用extjs 中窗口是由

45、ext.window 類定義，該類繼承自 panel，因此窗口其實是一種特殊的 面板 panel。窗口包含了浮動、可拖動、可關(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).on(click,newwin););頁面中的 html 內(nèi)容：執(zhí)行上面的代碼，當(dāng)點擊按鈕“新窗口”的時候，會在頁面中顯示一個窗口，窗口標(biāo)

46、題為“窗口 x”，窗口可以關(guān)閉，可以最大化，點擊最大化按鈕會最大化窗口，最大化的窗口可以 還原，如圖 xxx 所示。5.2、窗口分組窗口是分組進(jìn)行管理的，可以對一組窗口進(jìn)行操作，默認(rèn)情況下的窗口都在默認(rèn)的組 ext.windowmgr 中。窗口分組由類 ext.windowgroup 定義，該類包括 bringtofront、getactive、 hideall、sendtoback 等方法用來對分組中的窗口進(jìn)行操作。看下面的代碼：var i=0,mygroup;function newwin()var win=new ext.window(title:窗口+i+,width:400, hei

47、ght:300,maximizable:true, manager:mygroup); win.show();function toback()mygroup.sendtoback(mygroup.getactive();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);

48、);頁面中的 html 代碼執(zhí)行上面的代碼，先點擊幾次“新窗口”按鈕，可以在頁面中顯示幾個容器，然后拖動這些窗口，讓他們在屏幕中不同的位置。然后點“放到后臺”按鈕，可以實現(xiàn)把最前面的窗口移 動該組窗口的最后面去，點擊“隱藏所有”按鈕，可以隱藏當(dāng)前打開的所有窗口。如下圖所示 ：5.3、對話框由于傳統(tǒng)使用 alert、confirm 等方法產(chǎn)生的對話框非常古板，不好看。因此，extjs 提供 了一套非常漂亮的對話框，可以使用這些對話框代替?zhèn)鹘y(tǒng)的 alert、confirm 等，實現(xiàn)華麗的 應(yīng)用程序界面。ext 的對話框都封裝在 ext.messagebox 類，該類還有一個簡寫形式即 ext.msg，