本文共 3616 字,大约阅读时间需要 12 分钟。
布局
1、fit布局
在fit布局中,子元素将自动填满整个父容器。
注意:在fit布局下,设置子元素的宽度是无效的。如果在fit布局中防止了多个组件,则只会显示第一个子元素。Ext.application({name: 'HelloExt',launch: function() {Ext.create('Ext.container.Viewport', {layout: 'fit',items: [{title: 'Hello Ext',html : 'Hello! Welcome to Ext JS.'}]});}});2、border布局
border布局:border布局也称边界布局,他将页面分隔为west,east,south,north,center这五个部分,我们需要在在其items中指定使用region参数为其子元素指定具体位置。
注意:north和south部分只能设置高度(height),west和east部分只能设置宽度(width)。north south west east区域变大,center区域就变小了。
参数 split:true 可以调整除了center四个区域的大小。 参数 collapsible:true 将激活折叠功能, title必须设置,因为折叠按钮是出现标题部分的。 center 区域是必须使用的,而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中,当指定布局为border时,没有指定center区域时,会出现报错信息。Ext.application({ name:"HelloExt", launch:function () { Ext.create('Ext.panel.Panel', { width: 1024, height: 720, layout: 'border', items: [{ region: 'south', xtype: 'panel', height: 20, split: false, html: '欢迎登弽!', margins: '0 5 5 5' },{ title: 'West Region is collapsible', region:'west', xtype: 'panel', margins: '5 0 0 5', width: 200, collapsible: true, id: 'west-region-container', layout: 'fit'},{ title: 'Center Region', region: 'center', xtype: 'panel', layout: 'fit', margins: '5 5 0 0', html:'在Extjs4中,center区域必项指定,否则会报错。'}], renderTo: Ext.getBody()});}});3、accordion布局
accordion布局:
accordion布局也称手风琴布局,在accordion布局下,在任何时间里,只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意:只有Ext.Panels 和所有Ext.panel.Panel 子项,才可以使用accordion布局。
Ext.application({ name:"HelloExt", launch:function () { Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', width: 300, height: 300, x:20, y:20, layout:'accordion', defaults: { bodyStyle: 'padding:15px' }, layoutConfig: { titleCollapse: false, animate: true, activeOnTop: true }, items: [{ title: 'Panel 1', html: 'Panel content!' },{ title: 'Panel 2', html: 'Panel content!' },{ title: 'Panel 3', html: 'Panel content!' }], renderTo: Ext.getBody() });}});
4、card布局
Card布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交
5、anchor布局
anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
使用AnchorLayout布局时,其子组件都有一个anchor属性,用来配置此子组件在父容器中所处的位置。
anchor属性为一组字符串,可以使用百分比或者是-数字来表示。配置字符串使用空格隔开,例如 anchor:'75% 25%',表示宽度为父容器的75%,高度为父容器的25% anchor:'-300 -200',表示组件相对于父容器右边距为300,相对于父容器的底部位200 anchor:'-250 20%',混合模式,表示组件党对于如容器右边为250,高度为父容器的20%Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.Panel', { width: 500, height: 400, title: "Anchor布局", layout: 'anchor', x:60, y:80, renderTo: Ext.getBody(), items: [{ xtype: 'panel', title: '75% Width and 25% Height', anchor: '75% 25%' },{ xtype: 'panel', title: 'Offset -300 Width & -200 Height', anchor: '-300 -200' },{ xtype: 'panel', title: 'Mixed Offset and Percent', anchor: '-250 30%' }] }); }});6、Absolute布局
Absolute布局继承Ext.layout.container.Anchor 布局方式,并增加了X/Y配置选项对子组件进行定位,Absolute布局的目的是为了扩展布局的属性,使得布局更容易使用
Ext.application({ name:"HelloExt", launch:function () { Ext.create('Ext.form.Panel', { title: 'Absolute布局', width: 300, height: 275, x:20, y:90, layout:'absolute', defaultType: 'textfield', items: [{ x: 10,//横坐标为距父容器左边缘10像素的位置 y: 10,//纵坐标为距父容器上边缘10像素的位置 xtype:'label', text: 'Send To:' },{ x: 80, y: 10, name: 'to', anchor:'90%' },{ x: 10, y: 40, xtype:'label', text: 'Subject:' },{ x: 80, y: 40, name: 'subject', anchor: '90%' },{ x:0, y: 80, xtype: 'textareafield', name: 'msg', anchor: '100% 100%' }], renderTo: Ext.getBody() });}});该网站详细的说明了各个布局的特点也有实例,可以进行参考。
转载地址:http://iiupi.baihongyu.com/