EXT JS4 布局与容器

一、容器

一个Ext JS应用程序的UI是由组件组成的。容器是一种特殊类型的组件，可以包含其他组件。一个典型的Ext JS的应用程序是由多层嵌套组件组成的。最常用的容器是面板。

例如：

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%'
        }
    ]
});

二、布局

每个容器都有一个布局，来管理所有子组件的大小和位置。

1.使用布局

在上面的示例中我们没有为容器面板指定一个布局。注意子面板怎么像DOM中的块元素一个接一个的陈列。这是由于所有容器的默认布局是Auto（自动）布局。Auto布局没有为子元素指定任何特殊的定位或尺寸规则。

列布局

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    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
        }
    ]
});

2.布局系统如何工作

一个容器的布局负责所有子容器最初的定位和尺寸。在框架的内部，调用容器的doLayout方法，从而触发布局来计算所有子容器正确的大小和位置并更新DOM。doLayout方法是完全递归的，所以任何子容器都能调用他们的doLayout方法，直到达到组件层次结构的底部。在应用程序代码将不必再调用doLayout方法，因为框架会处理它。
当容器调整大小时或者当子组件条目添加或删除时，重新布局会被触发。通常情况下，我们只需依赖于框架为我们处理更新的布局，但是有时候我们想要阻止框架自动布局，所以我们可以批处理多个业务，然后手动触发一个布局。为了做到这一点，我们使用容器中的suspendLayout标志，以防止它在我们执行我们的用来引发一个布局(例如添加或删除条目)的操作时布局。之后，我们要做的是把suspendLayout标志改为false，通过调用容器的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();

3.组件布局

就像一个容器的布局定义了其组件的大小和位置，组件也有一个布局来定义其内部子条目的尺寸和位置。组件的布局是使用componentLayout配置选项来配置的。通常，你不需要使用这个配置，除非你正在编写一个定制组件，因为所有需要提供内部元素的大小和位置的组件都有他们自己的布局管理器。大多数组件使用自动布局，但更复杂的组件需要一个定制组件布局(例如一个有一个头、脚和工具栏的面板)。