快意編程ext js web開(kāi)發(fā)技術(shù)詳解前6章_第1頁(yè)
快意編程ext js web開(kāi)發(fā)技術(shù)詳解前6章_第2頁(yè)
快意編程ext js web開(kāi)發(fā)技術(shù)詳解前6章_第3頁(yè)
快意編程ext js web開(kāi)發(fā)技術(shù)詳解前6章_第4頁(yè)
快意編程ext js web開(kāi)發(fā)技術(shù)詳解前6章_第5頁(yè)
已閱讀5頁(yè)，還剩19頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

varview= title:"面板layout:'form',items:[{fieldLabel:'質(zhì)量',labelSeparator:'',items:[{xtype:'radio',boxLabel:'好'xtype:'radio',name:'quality',boxLabel:'壞'}]title:"面板<body>6.2Ext.layout.ContainerLayout=function(configExt.apply(this,config);//Ext的典型寫(xiě)法Ext.layout.ContainerLtotypelayout:vartarget=this.container.getLayoutTarget();this.onLayout(this.container,target);this.container.fireEvent('afterlayout',this.container,this);//傳遞函數(shù)，間接調(diào)用renderAllonLayoutfunction(cttarget){renderAll:function(ct,target){varitems=for(vari=0,len=items.length;i<len;{varc=if(c&&(!c.rendered||!this.isValidParent(c,target))){this.renderItem(c,i,target);}}renderItem:function(c,position,target){if(c&&!c.rendered){c.render(target,position);}elseif(c&&!this.isValidParent(c,target)){if(typeofposition=='number'){position=}c.container=target;}//根據(jù)布局設(shè)定每一個(gè)子元素的cssconfigureItemfunction(cposition){vart=c.getPositionEl?c.getPositionEl():c;}if(this.renderHidden&&c!={} }onResize://}varb=this.container.bufferResize;this.resizeBuffer=typeofb=='number'?b:100;}}ExtJS附帶的文檔上提供了瀏覽這些布局的示例，讀者可以隨時(shí)查看各種布局的示例，為，6.36.3ExtJSTable布局，則它的示例如圖6.4所示。6.4Table的。下面筆者將講解一些在實(shí)際開(kāi)發(fā)中比較常用的布局，按照筆者的講解思路讀者可整個(gè)畫(huà)面劃分為5部分，如圖6.5所示。6.5Border開(kāi)發(fā)人員只需要定義子元素的位置，Border布局即可將子元素自動(dòng)放在合適的位置extjs varview=},}, },},<body>onLayout:function(ct,target){varcollapsed;varitems=ct.items.items;collapsed=for(vari=0,len=items.length;i<len;{varc=items[i];varpos=c.region;}c.collapsed=false;c.render(target,i);//渲染到相應(yīng)的目標(biāo)}this[pos]=pos!='center'&&c.splitc.initialConfig,pos):

}this.rendered=}varsize=if(size.width20||size.height20view}}elseif(this.restoreCollapsed){//是否收縮collapsed=this.restoreCollapsed;deletethis.restoreCollapsed;}varw=size.width,h=varcenterW=w,centerH=h,centerY=0,centerX=varn=this.north,s=this.south,west=this.west,e=this.east,c=this.center;throw'NocenterregiondefinedinBorderLayout'+}if(n&&n.isVisible()){//北部區(qū)域varb=n.getSize();varm=n.getMargins();b.width=w-(m.left+m.right);b.x=b.y=centerY=b.height+b.y+m.bottom;centerH-=centerY;n.applyLayout(b);}if(s&&s.isVisible()){//南部區(qū)域varb=s.getSize();varm=s.getMargins();b.width=w-(m.left+m.right);b.x=vartotalHeight=(b.height+m.top+b.y=h-totalHeight+m.top;centerH-=totalHeight;}if(west&&west.isVisible()){//西部區(qū)域varb=west.getSize();varm=b.height=centerH-b.x=b.y=centerY+vartotalWidth=(b.width+m.left+m.right);centerX+=totalWidth;centerW-=totalWidth;}}if(e&&e.isVisible()){//東部區(qū)域varb=e.getSize();varm=b.height=centerH-vartotalWidth=(b.width+m.left+b.x=w-totalWidth+b.y=centerY+m.top;centerW-=totalWidth;}varmc.getMargins();//中間區(qū)域varcenterBox={x:centerX+y:centerY+width:centerW-(m.left+m.right),height:centerH-}區(qū)域計(jì)算所在的位置，在上面的代碼中，用到了一個(gè)區(qū)域的概念，ExtJS也定義了區(qū)域的splitSettingsnorth北cement:Ext.SplitBar.TOP,maxFn:'getVMaxSize',minProp:'minHeight',maxProp:'maxHeight'southcement:Ext.SplitBar.BOTTOM,maxFn:'getVMaxSize',minProp:'minHeight',maxProp:'maxHeight'eastcement:Ext.SplitBar.RIGHT,maxFn:'getHMaxSize',minProp:'minWidth',maxProp:'maxWidth'westmaxFnmaxFn:'getHMaxSize',minProp:'minWidth',maxProp:'maxWidth'}從上面的代碼可以看出，Border5個(gè)部Ext.layout.FitLayoutExt.layout.Container例，如圖6.6所示。

6.6Fit varview=Ext.Viewport({layout:"fit",html只有這個(gè)面板才能顯示},}, },},<body>素才能顯示出來(lái)，而且高度的屬性不再起作用。Fit布局的示意代碼如下所示： 覆寫(xiě)onLayout:function(ct,Ext.layout.FitLayout.superclass.onLayout.call(thisct,target);varsz=(Ext.isIE6&&Ext.isStrict&&target.dom== body)?target.getViewSize():target.getStyleSize();//獲取整個(gè)視圖的布局}setItemSize:function(item,if(item&&size.height0}}FitAccordion布局則可以顯示多個(gè)子元素，但同一Fit布局的示例改為Accordion布局，如圖6.7所示。6.7Accordion6.8圖6.8切換到“south底部面板 圖6.9切換到“east右邊面板e(cuò)xtjs varview=newordion",items:[{:"},html:"該我顯示啦"}, },},title:"east右邊面板",<body>Accordion布局的源代碼，將更有助于了解該布局。Accordion布局的示意代碼如fill:true,autoWidth:true,titleCollapse:true,hideCollapseToolfalse,animate: renderItem:if(this.animatefalse){//是否有動(dòng)畫(huà)效果c.animCollapse=false;}c.collapsible=true;c.autoWidth=}leCollapse=true;}c.hideCollapseTool=true;}if(this.collapseFirst!==undefined){c.collapseFirst=} this.activeItem=}elseif(this.activeItem&&this.activeItem!=c){c.collapsed=true;}c.header.addClass('x-accordion-hd');//cssc.on('beforeexpandthis.beforeExpandthis);beforeExpand:function(p,varai=this.activeItem;//獲取指定 if(!ai.collapsed){nd(anim||true);//是否有動(dòng)畫(huà)效果},scope:this});returnfalse;}}}this.activeItem=p;}//設(shè) setItemSize:function(item,size){if(this.fill&&item){varhh=0;if(p!=hh+=}size.height-=hh;} setActiveItem:item=thi if(this.activeItem!=item){item.collapsed){ this.activeItem=}}}元素都位于容器的頂端，如圖6.10所示。6.10“southvarview=newion",layoutConfig:{animate:true:"},html:"該我顯示啦"}, },},title:"east右邊面板",Ext.layout.FormLayoutExt.layout.AnchorLayout布局，Anchor布局可以根據(jù)容器大小為素進(jìn)行定位。因?yàn)樵摬季质褂玫貌⒉欢?，因此本?shū)將不再講解AnchorFormPanelFormForm6.116.11Form //設(shè)定消息的顯示方式Ext.form.Ftotype.msgTargetside';varsimple=newExt.Panel({layout:'form',titleForm布局示例',items:[{fieldLabelFirstName',name:'first',blankText:'不能為空',id:'gf1'fieldLabel:'LastName',name:'last',vtype:name:'id:},name:'}]固定值，還可以將兩者互相結(jié)合進(jìn)行指定，Column布局的示例如圖6.12所示。6.12Columnextjs varview=},},},},},<body>只是這里要保證所有素列寬的百分比之和為1，百分比采用小數(shù)的方式來(lái)表示，比如0.2。將上述代碼改為采用百分比的形式，效果如圖6.13所示。6.13extjs<scripttype="text/javascript" varview=},}, },},<body>width這個(gè)屬性；columnWidthColumn布局的onLayout:function(ct,varcs=ct.items.items,len=cs.length,c,i;擴(kuò)充this.innerCt=target.createChild({cls:'x-column-inner'});}varsize=Ext.isIE&&target.dom!=Ext.getBody().dom?target.getStyleSize():target.getViewSize();if(size.width1&&size.height1){}varw=size.width-target.getPadding('lr')-this.scrollOffset,h=size.height-target.getPadding('tb'),pw=w;for(i=0;i<len;c=cs[i];c=cs[i];pw-=(c.getSize().width+ }}pw=pw<0?0:for(i=0;i<len;i++){c=cs[i];c.setSize(Math.floor(c.columnWidth*pw)-c.ge }}}Ext.layout.CardLayoutExt.layout.FitLayoutAccordion布局的不同之處在于，Accordion布局雖然同一時(shí)間只能顯示一個(gè)素，但其他元素仍然放置在容器中展示給用戶(hù)，然后用戶(hù)可以通過(guò)單擊每個(gè)素進(jìn)行切換，而Card布局則在同一時(shí)間只能Accordion布局的示例改為Card布局，效果如圖6.14所示。6.14Cardextjs <script按鈕來(lái)進(jìn) varview=newd",activeItem:0,:"},html:"該我顯示啦"}, },},title:"east右邊面板",<body>function(config){Ext.layout.CardLayout.superclass.constructor.call(this,config);this. Layout=(this.deferredRender=== setActiveItem:item=thi if(this.activeItem!=item){}this.activeItem=item; item.doLayout){}} renderAll:target){}}從上面的代碼可以看出，Card布局主要通過(guò)setActiveItem方法來(lái)進(jìn)行間的Table布局的示例如圖6.15所示。6.15Table varview=e",layoutConfig:{columns:},}, },},<body>通過(guò)上述代碼可以看出，Tablecolspan、rowspan來(lái)指定跨列和跨行的個(gè)數(shù)，從而實(shí)現(xiàn)復(fù)雜的布局。Table布局的源代碼如下所示：setContainerfunction(ct){Ext.layout.TableLayout.superclass.setContainer.call(this,ct);this.currentRow=this.currentColumn=0;this.cells=[];覆寫(xiě)onLayout:function(ct,varcs=ct.items.items,len=cs.length,c,this.table=cn:{

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論