您好,欢迎访问三七文档
当前位置:首页 > 办公文档 > 招标投标 > ExtJS layout的9种样式详解
ExtJSlayout的9种样式详解(一)xtJS学习笔记layout的9种样式风格extjs的容器组件都可以设置它的显示风格,它的有效值有absolute,accordion,anchor,border,card,column,fit,formandtable.一共9种一、absolute顾名思义,在容器内部,根据指定的坐标定位显示二、accordion这个是最容易记的,手风琴效果,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式Js代码1.Ext.onReady(function(){2.3.varpanel=newExt.Panel({//Ext.formPanel就是Panel中用了form布局4.5.renderTo:'paneldiv',6.7.title:'容器组件',8.9.layout:'accordion',10.11.width:500,12.13.height:200,14.15.layoutConfig:{animate:false},//表示在执行展开折叠时是否应用动画效果16.17.items:[18.19.{title:'元素1',html:''},20.21.{title:'元素2',html:''},22.23.{title:'元素3',html:''},24.25.{title:'元素4',html:''}26.27.]28.29.}30.31.);32.33.});上面的代码定义了一个容器组件,指定使用Accordion布局,该容器组件中包含三个子元素,在layoutConfig中指定布局配置参数animate为true,表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板执行结果将生成如下图所示的界面:----001----三、anchor这个效果具体还不知道有什么用,就是知道注意一下1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,2.anchor值通常只能为负值(指非百分比值),正值没有意义,3.anchor必须为字符串值四、Border布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south,west,north,cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。看下面的代码:例一:Js代码1.Ext.onReady(function(){2.3.newExt.Viewport({4.5.layout:border,6.7.items:[{8.9.region:north,10.11.height:50,12.13.title:顶部面板14.15.},16.17.{region:south,18.19.height:50,20.21.title:底部面板},22.23.{region:center,24.25.title:中央面板},26.27.{region:west,28.29.width:100,30.31.title:左边面板},32.33.{region:east,34.35.width:100,36.37.title:右边面板}38.39.]40.41.});42.43.});----002----例二:Js代码1.Ext.onReady(function(){2.3.varb=newExt.Button({4.5.id:show-btn,//定义按钮的ID6.7.text:弹出按钮,//定义按钮的标题8.9.renderTo:document.body//将弹出按钮渲染到窗体上10.11.});12.13.varbutton=Ext.get('show-btn');14.15.varwin;16.17.button.on('click',function(){18.19.//创建TabPanel20.21.vartabs=newExt.TabPanel({22.23.region:'center',//border布局,将页面分成东,南,西,北,中五部分,这里表示TabPanel放在中间24.25.margins:'3330',26.27.activeTab:0,//当前选项卡是第1个(从0开始)28.29.defaults:{30.31.autoScroll:true32.33.},34.35.items:[{36.37.title:'BogusTab',38.39.html:第一个Tab的内容.40.41.},{42.43.title:'AnotherTab',44.45.html:我是另一个Tab46.47.},{48.49.title:'ClosableTab',50.51.html:这是一个可以关闭的Tab,52.53.closable:true//显示关闭按钮54.55.}]56.57.});58.59.//定义一个Panel60.61.varnav=newExt.Panel({62.63.title:'Navigation',64.65.region:'west',//放在西边,即左侧66.67.split:true,//设置为分割68.69.width:200,70.71.collapsible:true,//允许伸缩72.73.margins:'3033',74.75.cmargins:'3333'76.77.});78.79.//如果窗口第一次被打开时才创建80.81.if(!win){82.83.win=newExt.Window({84.85.title:'LayoutWindow',86.87.closable:true,//显示关闭按钮88.89.width:600,90.91.height:350,92.93.border:false,94.95.plain:true,96.97.layout:'border',98.99.closeAction:'hide',100.101.items:[nav,tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局102.103.});104.105.}106.107.win.show(button);108.109.});110.111.});112.113.});----003----五、card像安装向导一样,一张一张显示,布局由Ext.layout.CardLayout类定义,名称为card,该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码:例一:Js代码1.Ext.onReady(function(){2.3.varpanel=newExt.Panel({4.5.renderTo:hello,6.7.title:容器组件,8.9.width:300,10.11.height:200,12.13.layout:card,14.15.activeItem:0,16.17.layoutConfig:{18.19.animate:true20.21.},22.23.items:[24.25.{title:子元素1,html:这是子元素1中的内容},26.27.{title:子元素2,html:这是子元素2中的内容},28.29.{title:子元素3,html:这是子元素3中的内容}30.31.],32.33.buttons:[{text:切换,handler:changeTab}]34.35.});36.37.vari=1;38.39.functionchangeTab(){40.41.panel.getLayout().setActiveItem(i++);42.43.if(i2)i=0;44.45.}46.47.});上面的代码创建了一个容器组件面板,面板中包含三个子面板元素,父容器包含一个“切换”按钮,点击该按钮将会执行changeTab函数,该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示:004点击一下“切换”按钮,结果如下图所示:005ExtJSlayout的9种样式详解(二)例二:Js代码1.Ext.onReady(function(){2.vari=0;3.varnavHandler=function(direction){4.if(direction==-1){5.i--;6.if(i0){i=0;}7.}8.if(direction==1){9.i++;10.if(i2){i=2;returnfalse;}11.}12.varbtnNext=Ext.get(move-next);13.varbtnBack=Ext.get(move-next);14.if(i==0){15.btnBack.disabled=true;16.}else{17.btnBack.disabled=false;18.}19.if(i==2){20.btnNext.value=完成;21.btnNext.disabled=true;22.}else{23.btnNext.value=下一步;24.btnNext.disabled=false;25.}26.card.getLayout().setActiveItem(i);27.};28.varcard=newExt.Panel({29.width:200,30.height:200,31.title:'注册向导',32.layout:'card',33.activeItem:0,//makesuretheactiveitemissetonthecontainerconfig!34.bodyStyle:'padding:15px',35.defaults:{36.border:false37.},38.bbar:[39.{40.id:'move-prev',41.text:'上一步',42.handler:navHandler.createDelegate(this,[-1])43.},44.'-',45.{46.id:'move-next',47.text:'下一步',48.handler:navHandler.createDelegate(this,[1])49.}50.],51.52.items:[{53.id:'card-0',54.html:'h1欢迎来到注册向导!/h1pStep1of3/p'55.},{56.id:'card-1',57.html:'h1请填写注册资料!/h1pStep2of3/p'58.},{59.id:'card-2',60.html:'h1注册成功!/h1pStep3of3-Complete/p'61.}],62.renderTo:container63.});64.});六、column列布局由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:例一:Js代码1.Ext.onReady(function(){2.newExt.Panel({3.renderTo:hello,4.title:容器组件,5.layout:column,6.width:500,7.height:100,8.items:[{title:列1,width:100},9.{title:列2,width:200},10.{title:列3,width:1
本文标题:ExtJS layout的9种样式详解
链接地址:https://www.777doc.com/doc-3138274 .html