ExtJs布局大全

来源:转载

1.Fit 布局

在Fit 布局中,子元素将自动填满整个父容器。 注意:在fit 布局下,对其子元素设置宽度是无效的。如果在fit 布局中放置了多个组件,则只会显示第一个子元素。在Fit 布局中,子元素将自动填满整个父容器。典型的案例就是当客户要求一个window 或panel 中放置一个GRID 组件,grid 组件的大小会随着父容器的大小改变而改变。

效果图:

示例代码:

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.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.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 布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是 向导模式,也就是我们所说的 分布提交。Card 布局可以使用layout:'card'来创建。注意:由于此布局本身不提供分步导航功能,所以需要用户自己开发该功能。由于只有一个面板处于显示状态,那么在初始时,我们可以使用setActiveItem 功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候, 我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled 方法来设置面板的显示。另外,如果面板中显示的是FORM布局,我们在点击下一个面板的时候,处理FORM中提交的元素,通过AJAX 将表单中的内容保存到数据库中或者SESSION 中。

下面的示例代码展示了一个基本的Card 布局,布局中并没有包含form元素,具体情况,还要根据实际情况进行处理:

效果图:

实例代码:

Ext.create('Ext.panel.Panel', { title: 'Card布局示例', width: 300, height: 202, layout: 'card', activeItem: 0, x:30, y:60, bodyStyle: 'padding:15px', defaults: {border: false}, bbar: [{ id: 'move-prev', text: 'Back', handler: function(btn) { navigate(btn.up("panel"), "prev"); }, disabled: true }, '->', { id: 'move-next', text: 'Next', handler: function(btn) { navigate(btn.up("panel"), "next"); } }], items: [{ id: 'card-0', html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>' }, { id: 'card-1', html: '<p>Step 2 of 3</p>' }, { id: 'card-2', html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>' }], renderTo: Ext.getBody()}); 5 Anchor 布局

anchor 布局将使组件固定于父容器的某一个位置,使用anchor 布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor 布局的组件会根据规定的规

则重新渲染位置和大小。AnchorLayout 布局没有任何的直接配置选项(继承的除外),然而在使用AnchorLayout 布局时,其子组件都有一个anchor 属性,用来配置此子组件在父容器中所处的位置。anchor 属性为一组字符串, 可以使用百分比或者是-数字来表示。 配置字符串使用空格隔开,例如

anchor:'75% 25%',表示宽度为父容器的75%,高度为父容器的25%

anchor:'-300 -200',表示组件相对于父容器右边距为300,相对于父容器的底部位200

anchor:'-250 20%',混合模式,表示组件党对于如容器右边为250,高度为父容器的 20%

效果图:

示例代码:

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.create('Ext.form.Panel', { title: 'Absolute布局', width: 300, height: 275, x:20, y:90, layout:'absolute', defaultType: 'textfield', items: [{ x: 10, y: 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()});

7 Column 布局Column 布局一般被称为列布局,这种布局的目的是为了创建一个多列的格式。其中每列的宽度,可以为其指定一个 百分比或者是一个固定的宽度。Column 布局没有直接的配置选项(继承的除外),但Column 布局支持一个columnWidth 属性,在布局过程中,使用columnWidth 指定每个面板的宽度。 注意:使用Column 布局布局时,其子面板的所有columnWidth 值加起来必须介于0~1 之间或者是所占百分比。他们的总和应该是1。另外,如果任何子面板没有指定columnWidth 值,那么它将占满剩余的空间。

效果图:

示例代码:

Ext.create('Ext.panel.Panel', { title: 'Column Layout - 按比例', width: 350, height: 250, x:20, y:100, layout:'column', items: [{ title: 'Column 1', columnWidth: .25 },{ title: 'Column 2', columnWidth: .55 },{ title: 'Column 3', columnWidth: .20 }], renderTo: Ext.getBody()});


分享给朋友:
您可能感兴趣的文章:
随机阅读: