extjs經(jīng)典學(xué)習(xí)教程

ExtJS不但在Web開發(fā)中成功引入了豐富的組件，也引入了桌面程序中經(jīng)常用到的面板Web34特點(diǎn)及使用方式是突破ExtJS頁面設(shè)計(jì)的關(guān)鍵，下面先來進(jìn)行面板部分的學(xué)習(xí)。 使用 Delphi、VisualBasic或JavaSwing等開發(fā)語言的讀者對面板（Panel）一定非常中面板同樣起著頁面骨架的作用，所以學(xué)習(xí)面板是學(xué)習(xí)ExtJS頁面布局的基礎(chǔ)和起點(diǎn)。ExtJS面板從使用方式上來說更接近于JavaSwing中的面板，通過為其指定不同的布局toolbarstoolbars（header（bodynewExt.Panel({tbar:['頂端工具欄(toptoolbars)'],new]5-1行快速的瀏覽，Ext.Panel主要配置項(xiàng)目如表5-1所示。5-1Ext.Panel是否使用自動高度，true則使用自動高度，false設(shè)置是否自動顯示滾動條，true則設(shè)置面板的bodyoverflow:'auto'，內(nèi)容溢出時會自動顯示滾動條，false則不顯示滾動條對溢出的內(nèi)容進(jìn)行截斷。默認(rèn)為false'這是是否顯示面板體（body）的邊框，true則顯示，false'或收縮按鈕，falsetrue設(shè)置面板在第一次渲染時是否處于收縮狀態(tài)，true則收縮，false面板中元素的默認(rèn)類型，默認(rèn)為應(yīng)用到面板容器中所有元素的配置對象，例如：true會導(dǎo)致面板顯示在負(fù)偏移的位置，從而面板不可見，因?yàn)楦永鐣缓雎?，而直接?chuàng)建footer元素設(shè)置是否渲染面板，true則渲染面板為自定義的圓角邊框，falsetitleheaderfalseheaderheadertitle，true則顯示，默認(rèn)為true則隱藏面板容器中所有組件的邊框，falsefloatingtruetrue顯示在面板頭部的標(biāo)題信息Tools配置項(xiàng)主要用來設(shè)置面板頭部功能區(qū)所要顯示的各類按鈕，每個按鈕的配置對象可能包含的配置項(xiàng)在表5-2中說明，toolsid與按鈕圖標(biāo)對應(yīng)關(guān)系如表5-3所示。5-2tools點(diǎn)擊按鈕后觸發(fā)的處理函數(shù)，參數(shù)包括：eventExt.EventObject、toolElExt.Element、Panel5-3toolsid5.1.2節(jié)中常用配置項(xiàng)的使用及效源的內(nèi)容，分為4個示例分別講解4種不同的方式為面板提供顯示內(nèi)容，它們分別是：autoLoad配置項(xiàng)設(shè)置要加載的遠(yuǎn)程頁面url地址，同時展示了面板折疊和滾動條的效果，請看下面的示例代碼。varpanel=newExt.Panel({autoScroll:true,//自動顯示滾動條collapsibletrue,//允許展開和收縮applyTo:'panel',autoLoad:'page1html自動加載面板體的默認(rèn)連接<div5-2autoLoad時自動顯示滾動條。效果如圖5-2~5-4所示。圖5-2面板加載遠(yuǎn)程頁面讀取狀 圖5-3面板加載遠(yuǎn)程頁面讀取完5-4配置項(xiàng)，它的作用就是指定在面板中所要顯示的本地資源id，看下面的示例代碼。varpanel=newExt.Panel({collapsible:true,autoScroll:true,autoHeight://autoHeight:applyTo:'panel', <tableborder=1<tr><thcolspan=2>本地資源員工列表<thwidth60>序號</th><thwidth80>姓名table表格作為內(nèi)容展示在了面板當(dāng)中，這種方式省略了遠(yuǎn)程頁面的讀取過程，現(xiàn)滾動條。運(yùn)行效果如圖5-5和5-6所示。圖5-5面板加載本地資源固定高 圖5-6面板加載本地資源自動高示例使用面板的html配置項(xiàng)，通過它就可以實(shí)現(xiàn)自定義面板內(nèi)容的目的，看下面的示例。<script<scripttype="text/javascript">Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varhtmlArray=['<table'<tr><tdcolspan=2>員工列表'<tr><thwidth60>序號</th><thwidth80>姓名</th><tr>',varpanel=newtitle:'使用html配置項(xiàng)自定義面板內(nèi)容', collapsible autoScroll:true, applyTo:'panel',html: html配置項(xiàng)給了我們動態(tài)組織面板內(nèi)容的途徑，在代碼5-7中首先創(chuàng)建了字符串?dāng)?shù)組htmlArrayjoin方法將數(shù)組內(nèi)容連接為整體供程序使用，讀者也可以5-7使用html參數(shù)，所以將分2個示例分別講解。varpanel=newExt.Panel({varpanel=newExt.Panel({ collapsible:true, autoHeight:true, //自動高度width:189, applyTo:'panel',items:new 5-6中會演示向面板中添加多個組件的方法。運(yùn)行效果如圖5-5所示。5-8通過items<script<scriptvarpanel=newExt.Panel({header:height:200,width:250,defaults:{ height collapsible autoScroll items:newtitle:'嵌套面板一',newtitle:'嵌套面板二',]<tableborder=1<tr><thcolspan=2>本地資源員工列表<thwidth60>序號</th><thwidth80>姓名5-6演示了向面板中添加多個組件的方法，items5-95-10圖5-9嵌套面板加載頁面過程 圖5-10嵌套面板加載頁面完希望的位置上。ExtJS通過提供多種布局類來為面板提供支持，主要包括如下10種：

Ext.layout.ContainerLayout提供了所有布局類的基本功能，它沒有可視化的外觀，只是new關(guān)鍵字直接創(chuàng)建。如果面板（panel）沒有指定任何布局類，則它將會作為默認(rèn)布局來創(chuàng)建，表5-4是主要配置項(xiàng)。5-4Extlayout.ContainerLayout一個對當(dāng)前活動組件的引用。activeItem只在那些一次只能顯示一個items項(xiàng)目的布局中生效，例如：Ext.layout.AccordionExt.layout.FitLayout是布局的基礎(chǔ)類，對應(yīng)面板布局配置項(xiàng)（layout）fit，使fit布局將使面板子元素自動充滿容器，如果在當(dāng)前容器中存在多個子面板則只有第一個xtypenewvarpanel=newExt.Panel({layout:'fit',varpanel=newExt.Panel({layout:'fit',height:width:defaults: items:{html:'面板一'{html:'面板二'}]層面板，而“嵌套面板二”并沒有顯示出來。運(yùn)行效果如圖5-11所示。5-11Ext.layout.FitLayoutExt.layout.AccordionExt.layout.FitLayout布局，對應(yīng)面板布局（layout）配置項(xiàng)每個子面板都內(nèi)置了對展開和收縮功能的支持。表5-5列出了它的主要配置項(xiàng)目。5-5Extlayout.Accordion設(shè)置在展開或收縮子面板時是否使用滑動方式，true設(shè)置是否隱藏子面板的“展開收縮”按鈕，true表示隱藏，false代碼varpanel=newExt.Panel({layoutConfig:{ fill:true, hideCollapseTool:false, titleCollapse:true, height:width:250,defaults:{items:{html:'說明一'{html:'說明二'},,{html:'說明三'}]5-8Accordion圖5-12Ext.layout.Accordion布局示 圖5-13Ext.layout.Accordion布局示setActiveItem方法，它接受一個子面板人員自己實(shí)現(xiàn)。Ext.layout.CardLayout主要方法如表5-6所示。5-6Extlayout.CardLayoutsetActiveItem(String/Numberitem):varpanel=newExt.Panel({layout:activeItem height:width:defaults:{'//items:items:{html:'說明一',id:{html:'說明二',id:},{html:'說明三',id:}{text:'上一頁',{text:'下一頁',}]functionif(btn.text=='上一頁'){index-=if(index<index=}index+=if(index>index=}}}代碼5-9演示了CardLayoutsetActiveItemidchangePage函數(shù)的用途是計(jì)算點(diǎn)擊面板的切換。運(yùn)行效果如圖5-14~5-15所示。 5-14Ext.layout.CardLayout布局示例5-15Ext.layout.CardLayoutExt.layout.AnchorLayout是根據(jù)容器大小為其所包含的子面板進(jìn)行定位的布局，對應(yīng)面板布局（layout）anchor。如果容器大小發(fā)生變化，所有子面板的位置都會根據(jù)規(guī)則重新計(jì)算，并自動渲染。使用anchor布局需要注意以下配置項(xiàng)的使用。anchoranchorSizeanchor布anchorSizeanchor布局就anchoranchor2其中的子面板進(jìn)行定位，有效值包括如下3類。（Pecentage1100%1/2，如果只提供一個值（如：'50%'）則只對（Offsets參考邊（Sides'right'（或'r'）和'bottom'（或b。要求容器設(shè)置anchorSize配置項(xiàng)才會有正確的效果，例如'rb'，說明父容器會計(jì)5-10中創(chuàng)建一個使用百分比方式為子面板進(jìn)行定位的示例，從示例中可以清晰varpanel=newExt.Panel({layout:framefalse,height:width:defaults:{items:{anchor:'50%50%', title:'子面板'}]%5-16Ext.layout.AnchorLayout布局示例（百分比定位5-11中創(chuàng)建一個使用偏移值為子面板進(jìn)行定位的示例，從示例中可以清晰的體varpanel=newExt.Panel({layout:'anchor',framefalse,//渲染面板height:width:300,items:{anchoranchor10 title子面板}]5-11演示了偏移值（Offsets）定位的使用方式，其中anchor:'-10-10',105-175-17Ext.layout.AnchorLayout布局示例（偏移值定位5-12中創(chuàng)建一個使用參考邊為子面板進(jìn)行定位的示例，從示例中可以清晰的體varpanel=newExt.Panel({layout:'anchor',varpanel=newExt.Panel({layout:'anchor',autoScroll:true,//自動顯示滾動條framefalse,//渲染面板height:width:300,defaultsitems:{anchor:'rb', width:200,height:100,}]5-12演示了參考邊（Sides）anchorrb',,決定了子面板將相對于父面板的右邊和底邊的差值進(jìn)行定位。運(yùn)行效果如圖5-18所示。771155-18Ext.layout.AnchorLayout布局示例（參考邊定位父容器體(body)父容器體(body)298（說明：300減去左右兩條邊的寬度=100（說明：父容器體(body)300–200）計(jì)算后的子容器寬度為=198（說明：298-100）高度差值為=50（說明：父容器高度150–子容器高度100）=73（說明：123-absolutex/y坐標(biāo)進(jìn)行定位，并且坐標(biāo)值支持varpanel=newExt.Panel({layout:'absolute',framefalse,height:width:300,defaults:{'//items:{x y width:height:title子面板一{x y width:height:title子面板二}}]5-13演示了AbsoluteLayout（絕對位置布局）xy5-195-19Ext.layout.AbsoluteLayoutExt.layout.FormLayout是為表單特殊設(shè)計(jì)的布局，用來管理表單字段的顯示，通常情況下直接使用Ext.form.FormPanel表單面板，因?yàn)樗呀?jīng)內(nèi)置了表單布局，并且提供了表單提)labelPad:(Number)5，該項(xiàng)只在提供labelWidth配置項(xiàng)的情況下生效。)Ext.form.Field類的組件可以)fieldLabelString)：字段標(biāo)簽上的文本，默認(rèn)為''))5-7Extlayout.FormLayout應(yīng)用到每一個布局中元素上的樣式類，默認(rèn)為面板，這個面板最終生成的效果與第4章中介紹的FormPanel相同。varpanel=varpanel=Ext.Panel({t布局示例layoutlabelSeparator:height:width:300,defaults:{items:{allowBlank:false{}]5-14FormLayout（表單布局）的使用方式，通過表單布局創(chuàng)建的面板與使用FormPanel創(chuàng)建的表單面板功能相同。運(yùn)行效果如圖5-20所示。5-20Ext.layout.FormLayout行變化，它支持一個特殊的屬性columnWidth，每一個加入到容器中的子面板都可以通過columnWidth配置項(xiàng)指定百分比或使用width配置項(xiàng)指定固定值，來確定列寬。width1的數(shù)字。columnWidth配置項(xiàng)是已百分比為單位的相對寬度，必須是大于01的小數(shù)，例如“.25varpanel=Ext.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',height:width:250,defaultsframe:trueitems:{ height:{ height:}]項(xiàng)用于設(shè)置列寬。運(yùn)行效果如圖5-21所示。5-21Ext.layout.ColumnLayout布局示例（固定列寬varpanel=Ext.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',height:width:250,varpanel=Ext.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',height:width:250,defaultsframe:trueitems:{ height:{ height:}]代碼5-16演示了ColumnLayout（列布局）使用百分比指定列寬的用法，子面板的columnWidth配置項(xiàng)用于設(shè)置列對應(yīng)的百分比。運(yùn)行效果如圖5-22所示。5-22Ext.layout.ColumnLayout布局示例（百分比列寬3070%，請看下面的代碼。Ext.BLANKIMAGEURL='../../extjs2.0/resources/images/default/s.gif';varvarpanel=Ext.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',height:width:350,frame:trueitems:{width height:{ height:{ height:}]固定列寬之后剩余的寬度值。運(yùn)行效果如圖5-23所示。5-23Ext.layout.ColumnLayout布局示例（固定值與百分比結(jié)合==100（width配置項(xiàng)指定的固定值。第二列寬度=（350–100）*0.3（說明：按比例分割剩余寬度。=（350100）*0.7（說明：按比例分割剩余寬度（columns（rowspan（colspanvarpanel=newExt.Panel({varpanel=newExt.Panel({layout:'table',layoutConfig:columns44height:150,defaultsframe:true,height:items:{colspan {rowspan2設(shè)置跨行height:100]TableLayot至右進(jìn)行順序排列的。效果如圖5-24所示。5-24Ext.layout.TableLayoutExt.layout.BorderLayoutlayoutborder。該布局包含多個west、north、centerregion配置項(xiàng)來告知容器要加入到那可以形象的展示border布局的結(jié)構(gòu)。varpanel=newExt.Panel({titlevarpanel=newExt.Panel({titleExt.layout.BorderLayout布局示例',height:width:400,items:[{html:'上邊',region:'north', height:50{html:'下邊',region:'south', height:50html:'左邊', width:100html:'右邊', width:100html:'中間', 5-25Ext.layout.BorderLayoutExt.Viewportdocumentbody作為渲染對象，它會borderViewPort中，以使主面板充滿整個newExt.Viewport({titlenewExt.Viewport({titleExt.Viewport示例items:[{html:'上邊',region:'north',height:100html:'左邊',width:150html:'中間',合完美的實(shí)現(xiàn)了頁面整體結(jié)構(gòu)的劃分，是構(gòu)建主頁面常用的方式，效果如圖5-26所示。5-26Ext.ViewportExt.TabPanel擴(kuò)展自Ext.Paneltab頁都是一個Ext.Panel，一般情況下會有多5-8列出了Ext.TabPanel的主要配置項(xiàng)，會在后續(xù)的示例中用到其中的部分內(nèi)容。5-8Ext.TabPaneltab頁滾動的時候起用動畫效果，true設(shè)置是否在tab設(shè)置每次滾動tabtab標(biāo)簽在面板上的位置，包括'top'和'bottom'，默認(rèn)值是設(shè)置tab頁的初始寬度，默認(rèn)為120像素。該項(xiàng)只在vartabPanel=newExt.TabPanel({heightvartabPanel=newExt.TabPanel({height:width:activeTab:0, //默認(rèn)激活第一個tab頁animScroll:true, //使用動畫滾動效果enableTabScroll:true, applyTo:'panel',items:{title:tab1',htmltab1內(nèi)容{title:tab2',htmltab2內(nèi)容{title:tab3',htmltab3內(nèi)容{title:tab4',htmltab4內(nèi)容{title:tab5',htmltab5內(nèi)容]子面板加入items的順序排列。運(yùn)行效果如圖5-27所示。5-27Ext.TabPanel（items）一方式，Ext.TabPaneldivtab頁的功能，為tab頁的生成提供了新的方法。autoTabSelector5-22是簡單的示例，用于通過 <script vartabPanel=newExt.TabPanel({height:width: deferredRender:false, activeTab:0, animScroll:true, enableTabScroll:true, applyTo:'panel'<divdivdiv并沒有被正確的轉(zhuǎn)換為一個tab頁圖5-28Ext.TabPanel（轉(zhuǎn)換div即時渲染）示 圖5-29Ext.TabPanel（轉(zhuǎn)換div延時渲染）示</div>5divdiv6個是無效的divtabtab頁的動態(tài)添加3tab頁的簡單Ext.TabPaneladd（）ta