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

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

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