ext布局方式.docVIP

ext布局方式 ext 几种常见的布局方式 border布局 Border布局是Ext中常用布局方式（经常用到整个页面的总体布局），感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort，它是对于浏览器视窗的抽象，你可以将它理解为浏览器的可见区域，它将渲染到document.body并自动调整大小， 一个页面只能创建一个Viewport。 new Ext.Viewport({ layout:border, items:[ {region:north,title:Up,height:50}, {region:south,title:Down,height:50}, {region:west,title:Left,width:200}, {region:east,title:Right,width:200}, {region:center,title:Center} ] }); Column布局 从字面就知道Column布局就是列布局，例如我一个panel中还有两个子panel现在想要左侧显示一个右侧显示一个怎么办？这是可以选择Column将父Panel分为两列，左侧一个右侧一个。 var pnSub1=new Ext.Panel({ height:300, columnWidth:.3, html:这是子panle1 }); var pnSub2=new Ext.Panel({ height:300, columnWidth:.7, html:这是子panle2 }); var pn=new Ext.Panel({ id:pn, title:父Panel, renderTo:divPanel, width:800, height:300, layout:column, items:[ pnSub1, pnSub2 ] }); 布局 从复杂度来说fit布局应该算是最简单的了，设置是最少的。Fit布局同样也是设置父容器的layout属性，但是子容器不用设置任何相应属性。它的目的就是为了让子容器能够自适应于父容器（用了fit布局子容器设置宽度无效），但是请注意如果父容器有多个子容器，只会显示第一个。 var pnSub1=new Ext.Panel({ title:子panel1, html:子panel1（会显示） }); var pnSub2=new Ext.Panel({ title:子panel2, html:子panel2（不会显示） }); var pn=new Ext.Panel({ renderTo:divPanel, title:父panel, width:800, height:200, layout:fit, items:[ pnSub1, pnSub2 ] }); Table布局 Table布局多数用在较为复杂的情况下，想一想做web开发总不能就上面几种简单情况吧，因此也就是说Table布局还是很常用的。当然，但是和其他布局相比其参数设置也稍微一些（不用怕，事实上还是很少的）。 Form布局 这个布局是专门为表单而设计的布局方式，当然多数是用在FormPanel中（它也是FormPanel默认的布局方式）。我们前面说过FormPanel但是没有涉及复杂布局，事实实际应用中更多的是较复杂的布局。 new Ext.Panel({ renderTo:divPanel, title:这个是Panel, width:300, height:120, bodyStyle:padding:10, layout:form, hideLabels:false, labelAlighn:right, defaultType:textfield, items:[ {fieldLabel:姓名,name:name}, {fie