EXT_JS實(shí)用開發(fā)指南_個(gè)人整理筆記.docx

EXTJS實(shí)用開發(fā)指南1、 要使用ExtJS 框架的頁面中一般包括下面幾句：Ext.BLANK_IMAGE_URL = ././js/ext2/resources/images/default/tree/s.gif;在ExtJS 庫文件及頁面內(nèi)容加載完后，ExtJS 會執(zhí)行Ext.onReady 中指定的函數(shù)，因此可以用，一般情況下每一個(gè)用戶的ExtJS 應(yīng)用都是從Ext.onReady 開始的，使用ExtJS 應(yīng)用，程序的代碼大致如下：function fn()alert(“ExtJS庫已加”);Ext.onReady(fn);2、A：fn 也可以寫成一個(gè)匿名函數(shù)的形式，因此上面的代碼可以改成下面的形式：Ext.onReady(function ()alert(“ExtJS庫已加載!”););B：進(jìn)一步，我們可以在頁面上顯示一個(gè)窗口，代碼如下：Ext.onReady(function()Varwin=new Ext.Window(title:hello,width:300,height:200,html:Hello,easyjf open source);/參數(shù)是標(biāo)題,寬度,高度,html文本win.show(););3、ExtJS 的類庫由以下幾部分組成：底層API(core)：底層API 中提供了對DOM 操作、查詢的封裝、事件處理、DOM 查詢器等基礎(chǔ)的功能。其它控件都是建立在這些底層api 的基礎(chǔ)上，底層api 位于源代碼目錄的core 子目錄中，包括DomHelper.js、Element.js 等文件控件(widgets)：控件是指可以直接在頁面中創(chuàng)建的可視化組件，比如面板、選項(xiàng)板、表格、樹、窗口、菜單、工具欄、按鈕等等，在我們的應(yīng)用程序中可以直接通過應(yīng)用這些控件來實(shí)現(xiàn)友好、交互性強(qiáng)的應(yīng)用程序的UI。控件位于源代碼目錄的widgets 子目錄中實(shí)用工具Utils：Ext 提供了很多的實(shí)用工具，可以方便我們實(shí)現(xiàn)如數(shù)據(jù)內(nèi)容格式化、JSON數(shù)據(jù)解碼或反解碼、對Date、Array、發(fā)送Ajax 請求、Cookie 管理、CSS 管理等擴(kuò)展等功能4、Ext2.0 對框架進(jìn)行了非常大的重構(gòu)，其中最重要的就是形成了一個(gè)結(jié)構(gòu)及層次分明的組件體系，由這些組件形成了Ext 的控件，Ext 組件是由Component 類定義，每一種組件都有一個(gè)指定的xtype 屬性值，通過該值可以得到一個(gè)組件的類型或者是定義一個(gè)指定類型的組件。組件體系由下圖所示：組件大致可以分成三大類，即基本組件、工具欄組件、表單及元素組件?；窘M件有：xtype Classbox Ext.BoxComponent 具有邊框?qū)傩缘慕M件Button Ext.Button 按鈕colorpalette Ext.ColorPalette 調(diào)色板component Ext.Component 組件container Ext.Container 容器cycle Ext.CycleButtondataview Ext.DataView 數(shù)據(jù)顯示視圖datepicker Ext.DatePicker 日期選擇面板e(cuò)ditor Ext.Editor 編輯器editorgrid Ext.grid.EditorGridPanel 可編輯的表格grid Ext.grid.GridPanel 表格paging Ext.PagingToolbar 工具欄中的間隔panel Ext.Panel 面板progress Ext.ProgressBar 進(jìn)度條splitbutton Ext.SplitButton 可分裂的按鈕tabpanel Ext.TabPanel 選項(xiàng)面板treepanel Ext.tree.TreePanel 樹viewport Ext.ViewPort 視圖window Ext.Window 窗口工具欄組件有toolbar Ext.Toolbar 工具欄tbbutton Ext.Toolbar.Button 按鈕tbfill Ext.Toolbar.Fill 文件tbitem Ext.Toolbar.Item 工具條項(xiàng)目tbseparator Ext.Toolbar.Separator 工具欄分隔符tbspacer Ext.Toolbar.Spacer 工具欄空白tbsplit Ext.Toolbar.SplitButton 工具欄分隔按鈕tbtext Ext.Toolbar.TextItem 工具欄文本項(xiàng)表單及字段組件包含form Ext.FormPanel Form 面板checkbox Ext.form.Checkbox checkbox 錄入框combo Ext.form.ComboBox combo 選擇項(xiàng)datefield Ext.form.DateField 日期選擇項(xiàng)field Ext.form.Field 表單字段fieldset Ext.form.FieldSet 表單字段組hidden Ext.form.Hidden 表單隱藏域htmleditor Ext.form.HtmlEditor html 編輯器numberfield Ext.form.NumberField 數(shù)字編輯器radio Ext.form.Radio 單選按鈕textarea Ext.form.TextArea 區(qū)域文本框textfield Ext.form.TextField 表單文本框timefield Ext.form.TimeField 時(shí)間錄入項(xiàng)trigger Ext.form.TriggerField 觸發(fā)錄入項(xiàng)4、組件的使用組件可以直接通過new 關(guān)鍵子來創(chuàng)建，比如控件一個(gè)窗口，使用new Ext.Window()，創(chuàng)建一個(gè)表格則使用new Ext.GridPanel()。當(dāng)然，除了一些普通的組件以外，一般都會在構(gòu)造函數(shù)中通過傳遞構(gòu)造參數(shù)來創(chuàng)建組件。組件的構(gòu)造函數(shù)中一般都可以包含一個(gè)對象，這個(gè)對象包含創(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); 可以省掉變量obj，直接寫成如下的形式：var panel=new Ext.Panel(title:hello,width:300,height:200,html:Hello,easyjf open source);panel.render(hello);render 方法后面的參數(shù)表示頁面上的div 元素id，也可以直接在參數(shù)中通過renderTo 參數(shù)來省略手動(dòng)調(diào)用render 方法，只需要在構(gòu)造函數(shù)的參數(shù)中添加一個(gè)renderTo 屬性即可var panel=new Ext.Panel(renderTo:hello,title:hello,width:300,height:200,html:Hello,easyjf open source);對于容器中的子元素組件，都支持延遲加載的方式創(chuàng)建控件，此時(shí)可以直接通過在需要父組件的構(gòu)造函數(shù)中，通過給屬性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);panel.render(hello);注意中括號中加粗部份的代碼，這些代碼定義了TabPanel 這個(gè)容器控件中的子元素，這里包括三個(gè)面板。上面的代碼與下面的代碼等價(jià)：var panel=new Ext.TabPanel(width:300,height:200,items:new Ext.Panel( title:面板1,height:30),new Ext.Panel(title:面板2,height:30),new Ext.Panel(title:面板3,height:30);panel.render(hello);上兩處代碼，前者不但省略掉了new Ext.Panel 這個(gè)構(gòu)造函數(shù)，最重要前者只有在初始化TabPanel 的時(shí)候，才會創(chuàng)建子面板，而第二種方式則在程序一開始就會創(chuàng)建子面板。也就是說，前者實(shí)現(xiàn)的延遲加載。5、組件的配置屬性在ExtJS 中，除了一些特殊的組件或類以外，所有的組件在初始化的時(shí)候都可以在構(gòu)造函數(shù)使用一個(gè)包含屬性名稱及值的對象，該對象中的信息也就是指組件的配置屬性。比如配置一個(gè)面板：Var a=new Ext.Panel(title:面板,html面板內(nèi)容,height:100); 創(chuàng)建一個(gè)按鈕：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,title:學(xué)生信息管理,store:troe,cm:colM,store:store,autoExpandColumn:3);每一個(gè)組件除了繼承基類中的配置屬性以外，還會根據(jù)需要增加自己的配置屬性，另外子類中有的時(shí)候還會把父類的一些配置屬性的含義及用途重新定義。學(xué)習(xí)及使用ExtJS，其中最關(guān)鍵的是掌握ExtJS 中的各個(gè)組件的配置屬性及具體的含義，這些配置屬性在下載下來的ExtJS 源碼文檔中都有詳細(xì)的說明，可以通過這個(gè)文檔詳細(xì)了解每一個(gè)組件的特性。由于所有的組件都繼承自Ext.Component，因此在這里我們列出組件基類Component 中的配置屬性簡單介紹。配置屬性 名稱 類型簡介allowDomMoveBoolean當(dāng)渲染這個(gè)組件時(shí)是否允許移動(dòng)Dom節(jié)點(diǎn)（默認(rèn)值為true）。applyToMixed 混合參數(shù)，表示把該組件應(yīng)用指定的對象。參數(shù)可以是節(jié)點(diǎn)的id，一個(gè)DOM節(jié)點(diǎn)或一個(gè)存在的元素或與之相對應(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()方法來渲染組件。autoShowBoolean自動(dòng)顯示，如為true，則組件將檢查所有隱藏類型的class（如：”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）。hideModeString 組件的隱藏方式， 支持的值有”visibility” ， 也就是css 里的visibility，”offsets”負(fù)數(shù)偏移位置的值和”display”也就是css里的display，默認(rèn)值為”display”。hideParentBoolean是否隱藏父容器，該值為true時(shí)將會顯示或隱藏組件的容器，false時(shí)則只隱藏和顯示組件本身（默認(rèn)值為false）。idString 組件的id，默認(rèn)為一個(gè)自動(dòng)分配置的id。listenersObject 給對象配置多個(gè)事件監(jiān)聽器，在對象初始化會初始化這些監(jiān)聽器。pluginsObject/Array一個(gè)對象或數(shù)組，將用于增加組件的自定義功能。一個(gè)有效的組件插件必須包含一個(gè)init方法，該方法可以帶一個(gè)Ext.Component類型參數(shù)。當(dāng)組件建立后，如果該組件包含有效的插件，將調(diào)用每一個(gè)插件的init方法，把組件傳遞給插件，插件就能夠?qū)崿F(xiàn)對組件的方法調(diào)用及事件應(yīng)用等，從而實(shí)現(xiàn)對組件功能的擴(kuò)充。renderToMixed 混合數(shù)據(jù)參數(shù)，指定要渲染到節(jié)點(diǎn)的id，一個(gè)DOM的節(jié)點(diǎn)或一個(gè)已存在的容器。如果使用了這個(gè)配置選項(xiàng)，則組件的render()就不是必需的了。stateEventsArray 定義需要保存組件狀態(tài)信息的事件。當(dāng)指定的事件發(fā)生時(shí)，組件會保存它的狀態(tài)（默認(rèn)為none），其值為這個(gè)組件支持的任意event類型，包含組件自身的或自定義事件。（例如：“click”,”customerchange”）。stateIdString 組件的狀態(tài)ID，狀態(tài)管理器使用該id來管理組件的狀態(tài)信息，默認(rèn)值為組件的id。styleString 給該組件的元素指定特定的樣式信息， 有效的參數(shù)為Ext.Element.applyStyles中的值。xtypeString 指定所要?jiǎng)?chuàng)建組件的xtype，用于構(gòu)造函數(shù)中沒有意義。該參數(shù)用于在容器組件中創(chuàng)建創(chuàng)建子組件并延遲實(shí)例化和渲染時(shí)使用。如果是自定義的組件，則需要用Ext.ComponentMgr.registerType來進(jìn)行注冊，才會支持延遲實(shí)例化和渲染。elMixed 相當(dāng)于applyToExtJS 提供了一套強(qiáng)大的事件處理機(jī)制，通過這些事件處理機(jī)制來響應(yīng)用戶的動(dòng)作、監(jiān)控控件狀態(tài)變化、更新控件視圖信息、與服務(wù)器進(jìn)行交互等等。事件統(tǒng)一由Ext.EventManager 對象管理，與瀏覽器W3C 標(biāo)準(zhǔn)事件對象Event 相對應(yīng)，Ext 封裝了一個(gè)Ext.EventObject 事件對象。支持事件處理的類(或接口)為Ext.util.Observable，凡是繼承該類的組件或類都支持往對象中添加事件處理及響應(yīng)功能。首先我們來看標(biāo)準(zhǔn)html 中的事件處理，看下面的html 代碼：function a() alert(some thing);點(diǎn)擊這個(gè)按鈕則會觸發(fā)onclick 事件，并執(zhí)行onclick 事件處理函數(shù)中指定的代碼，這里直接執(zhí)行函數(shù)a 中的代碼，也即彈出一個(gè)簡單的信息提示框。再簡單修改一下上面的代碼，內(nèi)容如下：function a()alert(some thing);window.onload=function()document.getElementById(btnAlert).onclick=a;上面的代碼在文檔加載的時(shí)候，就直接對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)得到一個(gè)與頁面中按鈕btnAlert 關(guān)聯(lián)的Ext.Element 對象，可以直接調(diào)用該對象上的addListener 方法來給對象添加事件，同樣實(shí)現(xiàn)前面的效果。在調(diào)用addListener方法的代碼中，第一個(gè)參數(shù)表示事件名稱，第二個(gè)參數(shù)表示事件處理器或整個(gè)響應(yīng)函數(shù)。ExtJS 支持事件隊(duì)列，可以往對象的某一個(gè)事件中添加多個(gè)事件響應(yīng)函數(shù)，看下面的代碼：Ext.onReady(function()Ext.get(btnAlert).on(click,a);Ext.get(btnAlert).on(click,a););addLinster 方法的另外一個(gè)簡寫形式是on，由于調(diào)用了兩次addListener 方法，因此當(dāng)點(diǎn)擊按鈕的時(shí)候會彈出兩次信息。當(dāng)然，ExtJS 還支持事件延遲處理或事件處理緩存等功能，比如下面的代碼：Ext.onReady(function()Ext.get(btnAlert).on(click,a,this,delay:2000););當(dāng)然，在使用Ext 的事件時(shí)，我們一般是直接在控件上事件，每一個(gè)控件包含哪些事件，在什么時(shí)候觸發(fā)，觸發(fā)時(shí)傳遞的參數(shù)等，在ExtJS 項(xiàng)目的文檔中都有較為詳細(xì)的說明。比如對于所有的組件Component，都包含一個(gè)beforedestroy 事件，該事件會在Ext 銷毀這一個(gè)組件時(shí)觸發(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ù)返回值為false，因此執(zhí)行這段程序，你會發(fā)現(xiàn)這個(gè)窗口將無法關(guān)閉。組件的事件監(jiān)聽器可以直接在組件的配置屬性中直接聲明，如下面的代碼與前面實(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(););6、A:面板Panel 是ExtJS 控件的基礎(chǔ)，很高級控件都是在面板的基礎(chǔ)上擴(kuò)展的，還有其它大多數(shù)控件也都直接或間接有關(guān)系。應(yīng)用程序的界面一般情況下是由一個(gè)一個(gè)的面板通過不同組織方式形成。面板由以下幾個(gè)部分組成，一個(gè)頂部工具欄、一個(gè)底部工具欄、面板頭部、面板尾部、面板主區(qū)域幾個(gè)部分組件。面板類中還內(nèi)置了面板展開、關(guān)閉等功能，并提供一系列可重用的工具按鈕使得我們可以輕松實(shí)現(xiàn)自定義的行為，面板可以放入其它任何容器中，面板本身是一個(gè)容器，它里面又可以包含各種其它組件。Ext.onReady(function()new Ext.Panel(renderTo:hello,title:面板頭部header,width:300,height:200,html:面板主區(qū)域,tbar:text:頂部工具欄topToolbar,bbar:text:底部工具欄bottomToolbar,buttons:text:按鈕位于footer););運(yùn)行該代碼，可以得到如圖xx 所示的輸出結(jié)果，清楚的表示出了面板的各個(gè)組成部分。一般情況下，頂部工具欄或底部工具欄只需要一個(gè)，而面板中一般也很少直接包含按鈕，一般會把面板上的按鈕直接放到工具欄上面。比如下面的代碼：Ext.onReady(function()new Ext.Panel(renderTo:hello,title:hello,width:300,height:200,html:Hello,easyjf open source!,tbar:pressed:true,text:刷新););可以得到如圖xx所示的效果，該面板包含面板Header，一個(gè)頂部工具欄及面板區(qū)域三個(gè)部分。B:面板中可以有工具欄，工具欄可以位于面板頂部或底部，Ext 中工具欄是由Ext.Toolbar類表示。工具欄上可以存放按鈕、文本、分隔符等內(nèi)容。面板對象中內(nèi)置了很多實(shí)用的工具欄，可以直接通過面板的tools 配置選項(xiàng)往面板頭部加入預(yù)定義的工具欄選項(xiàng)。比如下面的代碼：Ext.onReady(function()new Ext.Panel(renderTo:hello,title:hello,width:300,height:200,html:Hello,easyjf open source!,tools:id:save,id:help, handler:function()Ext.Msg.alert(help,please help me!);,id:close,tbar:pressed:true,text:刷新);)點(diǎn)擊help按鈕會執(zhí)行handler中的函數(shù)，顯示一個(gè)彈出對話框，而點(diǎn)擊其它的按鈕不會有任何行為產(chǎn)生，因?yàn)闆]有定義他們的handler。除了在面板頭部加入這些已經(jīng)定義好的工具欄選擇按鈕以外，還可以在頂部或底工具欄中加入各種工具欄選項(xiàng)。這些工具欄選項(xiàng)主要包括按鈕、文本、空白、填充條、分隔符等。代碼：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:保存););Ext中的工具欄項(xiàng)目主要包含下面的類：Ext.Toolbar.Button按鈕，xtype為tbbuttonTextItemExt.Toolbar.FillSeparatorSpacerSplitButtonC:為了顯示一個(gè)面板，我們需要在頁面上添加一個(gè)，然后把Ext 控件渲染到這個(gè)div 上。VeiwPort 代表整個(gè)瀏覽器顯示區(qū)域，該對象渲染到頁面的body 區(qū)域，并會隨著瀏覽器顯示區(qū)域的大小自動(dòng)改變，一個(gè)頁面中只能有一個(gè)ViewPort 實(shí)例?？聪旅娴拇a：Ext.onReady(function()new Ext.Viewport(enableTabScroll:true,layout:fit,items:title:面板,html:,bbar:text:按鈕1,text:按鈕2););Viewport 不需要再指定renderTo，而我們也看到Viewport 確實(shí)填充了整個(gè)瀏覽器顯示區(qū)域，并會隨著瀏覽器顯示區(qū)域大小的改變而改變。Viewport 主要用于應(yīng)用程序的主界面，可以通過使用不同的布局來搭建出不同風(fēng)格的應(yīng)用程序主界面。在Viewport 上常用的布局有fit、border 等，當(dāng)然在需要的時(shí)候其它布局也會常用。看下面的代碼：Ext.onReady(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););7、 A: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).on(click,newWin););頁面中的html 內(nèi)容：執(zhí)行上面的代碼，當(dāng)點(diǎn)擊按鈕”新窗口”的時(shí)候，會在頁面中顯示一個(gè)窗口，窗口標(biāo)題為“窗口x”，窗口可以關(guān)閉，可以最大化，點(diǎn)擊最大化按鈕會最大化窗口，最大化的窗口可以還原B:窗口是分組進(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,height: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););頁面中的html 代碼執(zhí)行上面的代碼，先點(diǎn)擊幾次”新窗口”按鈕，可以在頁面中顯示幾個(gè)容器，然后拖動(dòng)這些窗口，讓他們在屏幕中不同的位置。然后點(diǎn)”放到后臺”按鈕，可以實(shí)現(xiàn)把最前面的窗口移動(dòng)該組窗口的最后面去，點(diǎn)擊”隱藏所有”按鈕，可以隱藏當(dāng)前打開的所有窗口。C:由于傳統(tǒng)使用alert、confirm 等方法產(chǎn)生的對話框非常古板，不好看。因此，ExtJS 提供了一套非常漂亮的對話框，可以使用這些對話框代替?zhèn)鹘y(tǒng)的alert、confirm 等，實(shí)現(xiàn)華麗的應(yīng)用程序界面。Ext 的對話框都封裝在Ext.MessageBox 類，該類還有一個(gè)簡寫形式即Ext.Msg，可以直接通過Ext.MessageBox 或Ext.Msg 來直接調(diào)用相應(yīng)的對話框方法來顯示Ext 對話框?？聪旅娴拇a：Ext.onReady(function()Ext.get(btnAlert).on(click,function()Ext.MessageBox.alert(請注意,這是ExtJS的提示框);););Html 頁面中的內(nèi)容：除了alert 以外，Ext 還包含confirm、prompt、progress、wait 等對話框，另外我們可以根據(jù)需要顯示自下定義的對話框。普通對話框一般包括四個(gè)參數(shù)，比如confirm 的方法簽名為confirm ( String title, String msg, Function fn, Object scope ) ，參數(shù)title 表示對話框的標(biāo)題，參數(shù)msg 表示對話框中的提示信息，這兩個(gè)參數(shù)是必須的；可選的參數(shù)fn 表示當(dāng)關(guān)閉對話框后執(zhí)行的回調(diào)函數(shù)，參數(shù)scope 表示回調(diào)函數(shù)的執(zhí)行作用域?；卣{(diào)函數(shù)可以包含兩個(gè)參數(shù)，即button 與text,button 表示點(diǎn)擊的按鈕，text 表示對話框中有活動(dòng)輸入選項(xiàng)時(shí)輸入的文本內(nèi)容。我們可以在回調(diào)函數(shù)中通過button 參數(shù)來判斷用戶作了什么什么選擇，可以通過text 來讀取在對話框中輸入的內(nèi)容?？聪旅娴睦樱篍xt.onReady(function()Ext.get(btn).on(click,function()Ext.MessageBox.confirm(請確認(rèn),是否真的要?jiǎng)h除指定的內(nèi)容,function(button,text)alert(button);alert(text););););因此，在實(shí)際的應(yīng)用中，上面的代碼可以改成如下的內(nèi)容：Ext.onReady(function()Ext.get(btnAlert).on(click,function()Ext.MessageBox.confirm(請確認(rèn),是否真的要?jiǎng)h除指定的內(nèi)容,function(button,text)if(button=yes)/執(zhí)行刪除操作alert(成功刪除););););這樣當(dāng)用戶點(diǎn)擊對話框中的yes 按鈕時(shí)，就會執(zhí)行相應(yīng)的操作，而選擇no 則忽略操作。下面再看看prompt 框，我們看下面的代碼：Ext.onReady(function()Ext.get(btn).on(click,function()Ext.MessageBmpt(輸入提示框,請輸入你的新年愿望:,function(button,text)if(button=ok)alert(你的新年愿望是:+text);else alert(你放棄了錄入!);););)Html 頁面： 在實(shí)際應(yīng)用中，可以直接使用MessageBox 的show 方法來顯示自定義的對話框，如下面的代碼：function save(button)if(button=yes)/執(zhí)行數(shù)據(jù)保存操作 else if(button=no)/不保存數(shù)據(jù) else/取消當(dāng)前操作Ext.onReady(function()Ext.get(btn).on(click,function()Ext.Msg.show(title:保存數(shù)據(jù),msg: 你已經(jīng)作了一些數(shù)據(jù)操作，是否要保存當(dāng)前內(nèi)容的修改？,buttons: Ext.Msg.YESNOCANCEL,fn: save,icon: Ext.MessageBox.QUESTION););)點(diǎn)擊”對話框”按鈕可顯示一個(gè)自定義的保存數(shù)據(jù)對話框，對話框中包含yes、no、cancel三個(gè)按鈕，可以在回調(diào)函數(shù)save 中根據(jù)點(diǎn)擊的按鈕執(zhí)行相應(yīng)的操作8、所謂布局就是指容器組件中子元素的分布、排列組合方式。Ext 的所有容器組件都支持而局操作，每一個(gè)容器都會有一個(gè)對應(yīng)的布局，布局負(fù)責(zé)管理容器組件中子元素的排列、組合及渲染方式等。ExtJS 的布局基類為Ext.layout.ContainerLayout，其它布局都是繼承該類。ExtJS 的容器組件包含一個(gè)layout 及l(fā)ayoutConfig 配置屬性，這兩個(gè)屬性用來指定容器使用的布局及布局的詳細(xì)配置信息，如果沒有指定容器組件的layout 則默認(rèn)會使用ContainerLayout 作為布局，該布局只是簡單的把元素放到容器中，有的布局需要layoutConfig 配置，有的則不需要layoutConfig 配置。看代碼：Ext.onReady(function()new Ext.Panel(renderTo:hello,width:400,height:200,layout:column,items:columnWidth:.5,title:面板1,columnWidth:.5,title:面板2););上面的代碼我們創(chuàng)建了一個(gè)面板Panel，Panle 是一個(gè)容器組件，我們使用layout 指定該面板使用Column 布局。該面板的子元素是兩個(gè)面板，這兩個(gè)面板都包含了一個(gè)與列布局相關(guān)的配置參數(shù)屬性columnWidth，他們的值都是0.5，也就是每一個(gè)面板占一半的寬度。Ext中的一些容器組件都已經(jīng)指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我們在使用這些組件的時(shí)候，不能給這些容器組件再指定另外的布局。ExtJS2.0 一共包含十種布局，常用的布局有border、column、fit、form、card、tabel等布局，下面我們分別對這幾種布局作簡單的介紹。A:Border 布局由類Ext.layout.BorderLayout定義，布局名稱為border。該布局把容器分成東南西北中五個(gè)區(qū)域，分別由east，south, west，north, cente來表示，在往容器中添加子元素的時(shí)候，我們只需要指定這些子元素所在的位置，Border布局會自動(dòng)把子元素放到布局指定的位置?？聪旅娴拇a：Ext.onReady(function()new Ext.Viewport(layout:border,items:region:north,height:50,title:頂部面板,region:south,height:50,title:底部面板,region:center,title:中央面板,region:west,width:100,title:左邊面板,region:east,width:100,title:右邊面板););B:Column 列布局由Ext.layout.ColumnLayout 類定義，名稱為column。列布局把整個(gè)容器組件看成一列，然后往里面放入子元素的時(shí)候，可以通過在子元素中指定使用columnWidth或width 來指定子元素所占的列寬度。columnWidth 表示使用百分比的形式指定列寬度，而width 則是使用絕對象素的方式指定列寬度，在實(shí)際應(yīng)用中可以混合使用兩種方式?？聪旅娴拇a：Ext.onReady(function()new Ext.Panel(renderTo:hello,title:容器組件,layout:column,width:500,height:100,items:title:列1,width:100,title:列2,width:200,title:列3,width:100,title:列4););上面的代碼在容器組件中放入了四個(gè)元素，在容器組件中形成4 列，列的寬度分別為100,200,100 及剩余寬度Ext.onReady(function()new Ext.Panel(renderTo:hello,title:容器組件,layout:column,width:500,height:100,items:title:列1,columnWidth:.2,title:列2,columnWidth:.3,title:列3,columnWidth:.3,title:列4,columnWidth:.2););注意columnWidth 的總和應(yīng)該為1在實(shí)際應(yīng)用中還可以混合使用Ext.onReady(function()new Ext.Panel(renderTo:hello,title:容器組件,layout:column,width:500,height:100,items:title:列1,width:200,title:列2,columnWidth:.3,title:列3,columnWidth:.3,title:列4,columnWidth:.4 ););C:Column 列布局由Ext.layout.ColumnLayout 類定義，名稱為column。列布局把整個(gè)容器組件看成一列，然后往里面放入子元素的時(shí)候，可以通過在子元素中指定使用columnWidth或width 來指定子元素所占的列寬度。columnWidth 表示使用百分比的形式指定列寬度，而width 則是使用絕對象素的方式指定列寬度，在實(shí)際應(yīng)用中可以混合使用兩種方式?？聪旅娴拇a：Ext.onReady(function()new Ext.Panel(renderTo:hello,title:容器組件,layout:column,width:500,height:100,items:title:列1,width:100,title:列2,width:200,title:列3,width:100,title:列4););上面的代碼在容器組件中放入了四個(gè)元素，在容器組件中形成4 列，列的寬度分別為100,200,100 及剩余寬度再看使用Fit 布局后的代碼，如下：Ext.onReady(function()new Ext.Panel(renderTo:hello,title:容器組件,layout:fit,width:500,height:100,items:title:子元素,html:這是子元素中的內(nèi)容 ););上面的代