Extjs 入門資料

1.Ext簡介.Extjs是一個Ajax架構，是一個用javascript寫的，用於在用戶端建立豐富多彩的web應用程式介面。ExtJs可以用來開發RIA（Rich Internet Application,富互連網應用系統）的Ajax應用程式框架。ExtJs是一個用javascript寫的，主要用於建立前端使用者介面，是一個與後台技術無關的前端ajax架構。因此，可以把ExtJs用在.Net,Java.Php等各種開發語言開發的應用中2.Ext庫檔案說明                                                               .要使用extjs，那麼首先要得到extjs庫檔案，該架構是開源的，可以直接從官方網站下載。解壓後看到檔案有：adapter: 負責將裡面提供的第三方底層庫（包括ext內建的底層庫）映射為Ext所支援的底層庫。build ：壓縮後的ext全部源碼（裡面分類存放）docs ： API協助文檔examples ：提供使用ExtJS技術做出的小實驗resources ：ExtUI資源檔目錄，如CSS、圖片檔案都存放在這裡。source : 沒有經過壓縮的Ext全部的源碼（裡面分類存放），遵從Lesser GNU開源的協議。Ext-all.js ： 壓縮後的Ext全部源碼ext-all-debug.js ：未經壓縮的Ext全部的源碼（用於調試）ext-core.js ：壓縮後的Ext的核心組件，包括sources/core下的所有類。ext-core-debug.js： 未經壓縮的Ext核心組件，包括sources/core下的所有類。3.應用ExtJs應用extjs需要在頁面中引入extjs的樣式及extjs庫檔案。樣式檔案為resources/css/ext-all.css，extjs的js庫檔案主要包含兩個：adapter/ext/ext-base.js及ext-all.js。其中ext-base.js表示架構基礎庫，ext-all.js是extjs的核心庫。Adapter表示適配器，也就是說可以有多種適配器，因此可以把adapter/ext/ext-base.js換成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。一個要使用extjs架構的頁面中一般要包括下面幾句：<link rel=”stylesheet” type=”text/css” href=”extjs/resources/css/ext-all.css”/><****** type=”text/javascript” src=”extjs/adapter/ext/ext-base.js”></script><****** type=”text/javascript” src=”extjs/ext-all.js”></script>在ExtJs庫檔案及頁面內容載入完後，ExtJs會執行Ext.onReady中指定的函數。一般情況下使用者的ExtJs應用都是從Ext.onReady開始的，使用ExtJs應用程式的代碼大致如下：6.ExtJs核心組件1.Component也就是組件，Ext中使用Ext.Component類來定義組件，其它具體的組件及控制項都是繼承該類實現。Component定義了一個標準的Ext組件生命週期管理：建立、渲染、銷毀等。另外還包含了所有組件公有的一些基本屬性及行為比如顯示或隱藏、啟用或禁用等。可以通過Ext.getCmp方法來獲得一個組件。所有的組件都可以放到Ext.Container中，並自動支援延遲渲染。Ext中所有需要放到一個layout中渲染顯示的可視化組件需要繼承Component或其子類。所有component都有一個Ext組件類型值，即xtype屬*，可以使用getXType方法得到組件的xtype值，isXType是用來判斷一個組件是否屬於指定的類型。2.BoxComponent，父類是Ext.Component，所有盒狀組件的基類，所有具有邊界屬性的組件的基類。所有的容器類都繼承了Ext.BoxComponent屬*： autoHeight 自動高度適應，設定為true則使用樣式height：‘auto’，否則為固定的高度，預設為false       autoWidth 自動寬度適應，設定為true則使用樣式width：‘auto’， 否則為固定的高度，預設為false3.Container 容器 父類Ext.BoxComponent 。是Ext中所有具有容器功能的組件的基類。容器組件包含處理子項的一些基本行為，負責添加、插入、刪除這些子項。容器提供布局支援功能，可以通過布局來可視化渲染容器中的子組件。這個類是用於共其它容器類繼承，一般不直接使用new關鍵字建立這個類的執行個體。7 使用面板面板Panel是ExtJs控制項的基礎，很多進階控制項都是在面板的基礎上擴充的，還有其它大多數控制項也都直接或間接與它有關係。應用程式的介面一般情況下是由一個一個的面板通過不同的組織方式形成。面板組成部分：一個頂部工具列（tbar），一個底部工具列（bbar），面板頭部（header），面板尾部（bottom），面板主地區（body）幾個部分組成。 面板的類名為Ext.Panel，其xtype為panel. 如例子：panel2.html屬*： autoScroll     是否自動添加捲軸。為true則在面板的body元素中使用樣式 overflow：‘auto‘，                    從而在學要的時候會顯示一個捲軸。為false則表示不顯示捲軸，會導致截斷多餘的內容，預設值為false。       hideCollapseTool   在collapsible為true時，是否顯示關閉/開啟面板的按鈕，預設為false7.1工具列Toolbar面板中可以有工具列，工具列可以位於面板的頂部和底部，Ext中的工具列是由Ext.Toolbar類表示的。是其它工具列的基類。工具列上可以放按鈕、文本、分隔字元等內容。可以直接通過面板的tools配置選項往面板頭部加入預定義的工具列選項。還可以在頂部或底部工具列中加入各種工具列選項。（eg。panel2.html）Ext中的工具列中的項目主要由下面的類定義：Ext.Toolbar.Button--------按鈕，xtype為tbbuttonExt.Toolbar.TextItem---------文本，xtype為tbtextExt.Toolbar.Fill------------填充地區，xtype為tbfillExt.Toolbar.Separator---------分隔字元，xtype為tbseparatorExt.Toolbar.Spacer-----------一個空格，xtype為tbspacerExt.Toolbar.SplitButton--------Split按鈕，xtype為tbsplit7.2選擇面板TabPanel選擇面板也就是指包含Tab的面板，一個面板中會有多個tab，同一時刻活動tab只能是一個。選項面板在Ext中由類Ext.TabPanel來定義，該類直接繼承自Panel，因此他實際上也是一個面板。Ext並沒有針對選項面板中的Tab專門定義一個新的類，每一個tab其實也就是普通的Panel而已。（eg。tabPanel.html）7.3視圖區ViewPort在前面的執行個體中，為了顯示一個面板，我們需要在頁面上添加一個<div>，然後把Ext控制項渲染到這個div上。ViewPort代表整個瀏覽器顯示地區，該對象渲染到頁面的body地區，並會隨著瀏覽器顯示地區的大小自動改變，一個頁面中只能有一個ViewPort執行個體。eg。Ext.onReady(function(){new Ext.ViewPort({enableTabScroll:true,layout:”fit”,items:[{title:”面板”,html:””,bbar:[{text:”button1”},{text:”button2”}]}]});});ViewPort不需要在指定renderTo，而我們也看到ViewPort確實填充了整個瀏覽器顯示地區，並會隨著瀏覽器顯示地區大小的改變而改變。ViewPort主要用於程式的首頁面，可以通過使用不同的布局來搭建不同風格的應用程式主介面，在ViewPort上常用的布局有fit，border等。（eg。viewPort.html）8 視窗、對話方塊及提示框8.1視窗Window8.1.1視窗基本應用ExtJs中視窗是由Ext.Window類定義，該類繼承自Ext.Panel，因此視窗其實是一種特殊的面板Panel，視窗包含了浮動、可拖動、可關閉、最大化、最小化等特性。（eg、window.html）8.1.2視窗分組視窗是分組進行管理的，可以對一組視窗進行操作，預設情況下的視窗都是預設組Ext.WindowMgr中。視窗分組由類Ext.WindowGroup定義，該類包括bringToFrong、getActive、hideAll、sendToBack等方法用來對分組中的視窗進行的操作。（eg、windowGroup.html）8.2對話方塊MessageBox8.2.1對話方塊基本應用Ext的對話方塊都封裝在Ext.MessageBox類，該類還有一個簡寫形式即Ext.Msg，可以直接通過Ext.MessageBox或Ext.Msg類直接調用相應的對話方塊方法來顯示漂亮的Ext對話方塊。訊息框MessageBox是非同步，不同於正常的JavaScript中的alert方法（將中斷瀏覽器的操作）。顯示一個MessageBox的時候不會影響其他代碼的執行，因此，如果需要使用者在對訊息框反饋之後執行一些代碼，就必須要使用回呼函數。1.   Ext.MessageBox.alert(“請注意”, ” 這是ExtJs的提示框 “);2.   Ext.MessageBox.confirm(“請確認”,”是否真的要刪除指定的內容”,function(button,text){if(button==”yes”){alert(“成功刪除”);}});3. Ext.MessageBox.prompt(“輸入提示框”,”請輸入你的新年願望:”,function(button,text){if(button==”yes”){alert(“你的新年願望是：”+text);}else{alert(“你放棄了操作”);}});在實際應用中，可以直接使用MessageBox的show方法來顯示自訂的對話方塊。eg、function save(button){if(button==”yes”){//執行資料儲存操作}else if(button==”no”){//不儲存資料}else{//取消當前操作}}Ext.MessageBox.show({   title:’儲存資料’,   msg:’你已經作了一些資料操作，是否要儲存當前內容的修改?’,   buttons:Ext.Msg.YESNOCANCEL,   fn:save,   icon:Ext.MessageBox.QUESTION});8.2.2提示框Tip提示框是指當我們把滑鼠移動並停留到頁面上的某一個元素上時，在頁面上會出現一個對該元素說明並懸浮在螢幕上的提示地區，當滑鼠移出該元素，則該提示框會自動隱藏。Tip繼承Panel，也就是說ExtJs中使用Panel來顯示提示框資訊。eg、Ext.onReady(function(){var tip=new Ext.Tip({html:”這是一個簡單的提示框”});var el=Ext.get(“hello”);el.on({“mouseover”:function(){tip.showBy(el);},“mouseout”:function(){tip.hide();}});});<div id=”hello”>提示框</div>ExtJs在Tip類的基礎上，提供了專門用於元素提示資訊的ToopTip以及在頁面中進行快速提示的QuickTip等類。直接使用ToopTip，則不需要自己在元素的mouseover及mouseout事件響應函數中手動處理資訊氣球的隱藏及顯示。Ext.onReady(function(){var el=Ext.get(“hello”);var tip=new Ext.ToolTip({html:”這是一個簡單的提示框”,target:el});});…………….9         布局layout9.1基本應用所謂布局就是指容器組件中子項目的分布、排列組合方式。Ext的所有容器組件都支援布局操作，每一個容器都會有一個對應的布局，布局負責管理容器組件中子項目的排序、組合及渲染方式等。ExtJs的布局基類為Ext.layout.ContainerLayout，其它布局都繼承該類。ExtJs的容器組件包含一個layout及layoutConfig配置屬*，這兩個屬性用來指定容器使用的布局及布局的詳細配置資訊。如果沒有指定容器組件的layout則預設會使用ContainerLayout作為布局,有的布局學要layoutConfig配置，有的則不需要layoutConfig配置。Ext.onReady(function(){new Ext.Panel({renderTo:”hello”,width:400,height:200,layout:”column”,   items:[{columnWidth:.5,   //width:100 可用來指定具體的寬度title:”面板1”},{columnWidth:.5,title:”面板2”}]});});Ext中的一些容器組件都已經指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我們在使用這些組件的時候，不能給這些容器組件再指定另外的布局。9.2    Border地區布局Border布局由類Ext.layout.BorderLayout定義，布局名稱為border。該布局把容器分為“東”、“南”、“西”、“北”、“中”五塊地區，分別由east , south , west , north , center來表示，在往容器中添加子項目的時候，我們只需要通過region配置選項來指定這些子項目所在的位置，Border布局會自動把子項目放到布局指定的位置。（eg、viewPort.html）9.3    Column列布局（例子 和上面的一樣）