版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
varview= title:"面板layout:'form',items:[{fieldLabel:'质量',labelSeparator:'',items:[{xtype:'radio',boxLabel:'好'xtype:'radio',name:'quality',boxLabel:'坏'}]title:"面板<body>6.2Ext.layout.ContainerLayout=function(configExt.apply(this,config);//Ext的典型写法Ext.layout.ContainerLtotypelayout:vartarget=this.container.getLayoutTarget();this.onLayout(this.container,target);this.container.fireEvent('afterlayout',this.container,this);//传递函数，间接调用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;}//根据布局设定每一个子元素的cssconfigureItemfunction(cposition){vart=c.getPositionEl?c.getPositionEl():c;}if(this.renderHidden&&c!={} }onResize://}varb=this.container.bufferResize;this.resizeBuffer=typeofb=='number'?b:100;}}ExtJS附带的文档上提供了浏览这些布局的示例，读者可以随时查看各种布局的示例，为，6.36.3ExtJSTable布局，则它的示例如图6.4所示。6.4Table的。下面笔者将讲解一些在实际开发中比较常用的布局，按照笔者的讲解思路读者可整个画面划分为5部分，如图6.5所示。6.5Border开发人员只需要定义子元素的位置，Border布局即可将子元素自动放在合适的位置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);//渲染到相应的目标}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()){//北部区域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()){//南部区域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()){//西部区域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()){//东部区域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();//中间区域varcenterBox={x:centerX+y:centerY+width:centerW-(m.left+m.right),height:centerH-}区域计算所在的位置，在上面的代码中，用到了一个区域的概念，ExtJS也定义了区域的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个部Ext.layout.FitLayoutExt.layout.Container例，如图6.6所示。
6.6Fit varview=Ext.Viewport({layout:"fit",html只有这个面板才能显示},}, },},<body>素才能显示出来，而且高度的属性不再起作用。Fit布局的示意代码如下所示： 覆写onLayout:function(ct,Ext.layout.FitLayout.superclass.onLayout.call(thisct,target);varsz=(Ext.isIE6&&Ext.isStrict&&target.dom== body)?target.getViewSize():target.getStyleSize();//获取整个视图的布局}setItemSize:function(item,if(item&&size.height0}}FitAccordion布局则可以显示多个子元素，但同一Fit布局的示例改为Accordion布局，如图6.7所示。6.7Accordion6.8图6.8切换到“south底部面板 图6.9切换到“east右边面板extjs varview=newordion",items:[{:"},html:"该我显示啦"}, },},title:"east右边面板",<body>Accordion布局的源代码，将更有助于了解该布局。Accordion布局的示意代码如fill:true,autoWidth:true,titleCollapse:true,hideCollapseToolfalse,animate: renderItem:if(this.animatefalse){//是否有动画效果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);//是否有动画效果},scope:this});returnfalse;}}}this.activeItem=p;}//设 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布局可以根据容器大小为素进行定位。因为该布局使用得并不多，因此本书将不再讲解AnchorFormPanelFormForm6.116.11Form //设定消息的显示方式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:'}]固定值，还可以将两者互相结合进行指定，Column布局的示例如图6.12所示。6.12Columnextjs varview=},},},},},<body>只是这里要保证所有素列宽的百分比之和为1，百分比采用小数的方式来表示，比如0.2。将上述代码改为采用百分比的形式，效果如图6.13所示。6.13extjs<scripttype="text/javascript" varview=},}, },},<body>width这个属性；columnWidthColumn布局的onLayout:function(ct,varcs=ct.items.items,len=cs.length,c,i;扩充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布局虽然同一时间只能显示一个素，但其他元素仍然放置在容器中展示给用户，然后用户可以通过单击每个素进行切换，而Card布局则在同一时间只能Accordion布局的示例改为Card布局，效果如图6.14所示。6.14Cardextjs <script按钮来进 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布局主要通过setActiveItem方法来进行间的Table布局的示例如图6.15所示。6.15Table varview=e",layoutConfig:{columns:},}, },},<body>通过上述代码可以看出，Tablecolspan、rowspan来指定跨列和跨行的个数，从而实现复杂的布局。Table布局的源代码如下所示：setContainerfunction(ct){Ext.layout.TableLayout.superclass.setContainer.call(this,ct);this.currentRow=this.currentColumn=0;this.cells=[];覆写onLayout:function(ct,varcs=ct.items.items,len=cs.length,c,this.table=cn:{
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 掌声 微课教育课件
- 七下历史 教育课件
- 2024版长期房屋租赁合同（商业用途）2篇
- 2024年度礼品定制生产及供应合同2篇
- 供应链金融合作协议范本
- 买房押金合同协议书范本
- 2024年度二人合伙经营咖啡厅合同2篇
- 2024年度版权质押合同：某音乐公司与某金融机构关于音乐版权质押融资
- 咏柳 音乐课件
- 2024年度知识产权许可合同许可范围和许可条件具体规定
- 2024年湖北襄阳四中五中自主招生英语试卷真题（含答案详解）
- DB34T-老旧电梯更新、改造、重大修理工作导则
- 施工现场临时用电安全监理检查表
- 不符合慢病证办理告知书
- GB/T 44230-2024政务信息系统基本要求
- 《数字媒体技术导论》全套教学课件
- 海南乐东黎族自治县事业单位定向公开招聘驻县部队随军家属工作人员5人（第1号）（高频重点复习提升训练）共500题附带答案详解
- GB/T 44257.1-2024电动土方机械用动力电池第1部分：安全要求
- 广东省深圳市宝安区2023-2024学年七年级下学期期末数学试题(无答案)
- 浙教版劳动九年级项目四任务二《统筹规划与工作分配》教案
- 国家开放大学专科《法理学》(第三版教材)形成性考核试题及答案
评论
0/150
提交评论