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

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