[翻译]Ext JS 教程-布局和容器

布局系统是ExtJS中一个强大的组成部分。它控制着应用程序的每个组件的尺寸和位置。这个操做手册包含开始使用布局的基础操做。

容器

一个ExtJS应用程序的用户界面由组件构成（更多关于组件的信息见组件指南）。一个容器是一个可以包含其余组件的特殊组件。一个典型的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。

 

布局

每个容器用一个布局（Layout）管理着它的子容器的尺寸和位置。这一部分咱们将讨论如何去配置容器使用一个定制的布局，还有布局系统是如何保持全部东西都是同步的。

使用布局

在上面的例子中，咱们没有定制容器Panel的布局。请注意子Panel是如何一个接在一个的后面放置的，就像DOM结构中通常的块元素那样的。这是由于全部容器的默认布局是Auto Layout。 Auto Layout 不规定子元素的任何定制的位置或尺寸。让咱们假设一下，举个例子，咱们想要咱们的两个子Panel边靠边的放置，每一个都占据容器宽度的50%——咱们能够简单的经过在容器上提供一个布局配置，使用一个Column Layout。

 

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

 

ExtJS 配备了整套的布局框，能够适应任何你能够想象获得的布局类型。见 Layout Browser 去获取一个可能点子。

 

布局系统是如何工做的

一个容器的布局对容器的初始化和容器下面全部子组件的尺寸负责。框架内部调用容器的doLayout方法触发布局去为全部容器的子组件计算正确的尺寸和位置，而且更新DOM。doLayout方法是全递归的，所以任何容器的子元素也都会让它们的doLayout方法获得调用。这样一直持续到达底部的组件层级。在你的应用程序代码中，你通常不用去管doLayout（）的调用，由于框架为代你处理它。

当容器的尺寸被修改，或者一个子组件条目被添加或删除时时，一个重布局会被触发。通常咱们能够依赖框架去为咱们处理布局的更新，可是有时候咱们想去阻止框架自动布局以便咱们可以在咱们已经准备好之后把全部的操做打包，而且手动的去触发布局。为了要这样作，咱们使用在容器上面suspendLayout 标示去阻止它进行布局，而咱们执行（添加或者删除条目）的操做，当咱们操做完了之后再把 suspendLayout 关掉，而且经过调用容器的 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();

 

组件布局

就像一个容器布局定义了一个容器如何去设置它的组件条目的尺寸和位置同样，一个组件也能够有一个如何去设置它的子条目的尺寸和位置的布局（Layout）。组件布局是使用 componentLayout 配置项来配置的。通常的，除非你须要写一个定制的组件，里面全部提供的组件都用他们本身的布局管理器内部控制元素的尺寸和位置，你将不须要使用这个配置。大部分组件使用Auto Layout，可是更多复杂的组件将须要一个定制的组件布局（好比一个拥有头部、尾部和工具条的Panel）。

 

 

 

-------------------

下面是文件来源：

http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers