ExtJS 4-布局

Containers 容器

 

ExtJS应用的UI界面，是由组件(Component)构建起来的，容器(Container)是一个特殊的组件，它可以盛放其他组件，每个典型的ExtJS应用都是数层嵌套的组件组成的。

如图所示：

 

 

最常用的容器，就是Panel，让我们见识一下，作为一个容器，Panel是如何盛放其他组件的：

 

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'Container Panel',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            width: '75%'
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            width: '75%'
        }
    ]
});

 

我们仅仅创建了一个Panel，让它渲染到文档主体body中，然后我们使用了items配置，添加了两个子Panel到容器Panel中。

 

How the layout system works 布局系统如何工作

 

容器自身的布局属性负责掌控它的子容器的初始尺寸和位置，ExtJS框架内部会调用容器的doLayout方法触发Layout System计算子容器的大小和位置并更新DOM，doLayout方法是递归的，就是说当一个容器执行了doLayout，它的每层下级容器，都会按照层级顺次调用，直到最内层的容器。通常不需要自己调用doLayout方法，框架会负责这件事。

容器改变尺寸的时候会重新布局，有子容器添加删除也会触发容器重新布局，一般只需要依靠框架自身掌控重新布局即可，但是有些情况我们想禁止自动重新布局，当操作都结束之后一次性重新布局（例如循环添加了几十个子容器，每添加一次就重新布局效率较差，全部添加完之后一次从新布局即可），这时候可以利用suspendLayout标志位置为true阻止一些通常会自动触发重新布局的行为，当操作完成之后关闭这个标志位再手动doLayout，例如：

 

var containerPanel = Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column',
    suspendLayout: true // Suspend automatic layouts while we do several different things that could trigger a layout on their own
});
// Add a couple of child items.  We could add these both at the same time by passing an array to add(),
// but lets pretend we needed to add them separately for some reason.
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 1',
    height: 100,
    columnWidth: 0.5
});
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 2',
    height: 100,
    columnWidth: 0.5
});
// Turn the suspendLayout flag off.
containerPanel.suspendLayout = false;
// Trigger a layout.
containerPanel.doLayout();

 

 

 

 

Fit布局

在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素

典型的案例就是当客户要求一个window或panel中放置一个grid组件，grid组件的大小会随着父容器的大小改变而改变。

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区域时，会出现报错信息。

accordion布局：

accordion布局也称手风琴布局，在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()
                });
            } 
        });

 

Ext.onReady(function () {
            Ext.create('Ext.panel.Panel', {
                title: 'Accordion Layout',
                width: 300,
                height: 300,
                x: 20,
                y: 20,
                renderTo: Ext.getBody(),//！！
                layout: 'accordion',
                defaults: {
                    bodyStye: 'padding:15px'
                },
                layoutConfig: {
                    titleCollapse: false,
                    ainmate: true,
                    activeOnTop: true
                },
                items: [{
                    title: 'panel 1',
                    html: 'Content 1'
                }, {
                    title: 'Panel 2',
                    html: 'Content 2'
                }, {
                    title:'Panel 3',
                    html:'Content 3'
                }]
            });
        });

 

 

Card布局：

这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交

 

 

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

 Anchor布局

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

 

 

anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。
anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如
anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%
anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200
anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%
示例代码：

 

 Absolute布局

Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用

 Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。

 Column布局

 Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。

 Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。
注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。
另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。

 

Ext.onReady(function () {
            Ext.create('Ext.panel.Panel', {
                renderTo: Ext.getBody(),
                width: 400,
                height: 300,
                title: 'Container Panel',
                layout:'column',
                items: [
                    {
                        xtype: 'panel',
                        title: 'Child Panel 1',
                        height: 100,
                        columnWidth:0.5
                    },
                    {
                        xtype: 'panel',
                        title: 'Child Panel 2',
                        height: 100,
                        columnWidth: 0.5
                    }
                ]
            });
        });

 

效果图：