Ext JS 4官方指南（四）—— 基本概念之Ext JS 容器与布局

来源：互联网发布：c语言中sleep函数编辑：程序博客网时间：2024/05/17 17:40

布局系统是 Ext JS 的最强大的部分之一。它可以处理您的应用程序中的每个组件的大小和定位。本指南介绍了如何进行布局的基础知识。

1. 容器

Ext JS 程序所谓的 UI，是由组件 Component 组成的（参见《组件指南》)。容器 Container 是一种特殊类型的组件，它可以包含其他组件。一个典型的 Ext JS 的应用程序是由不同的组件嵌套而成。

最常用的容器是面板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%'        }    ]});

我们刚刚创建了一个渲染到document.body的面板 Panel，并且使用 items 配置项来添加两个子面板，属于面板容器（Container Panel）下的子面板。

嵌套的面板

2. 布局

每个容器都有一个布局管理器专门调整容器其子组件的大小和定位。在本节中，我们将讨论如何为一个容器来配置特定类型的布局，以及布局系统如何做到保持一切的同步。

3. 布局的用法

在上面的例子中，我们没有为面板容器（Container Panel）指派的布局。请注意子面板都是一个挨着一个布局的，就像正常 DOM 中的块元素将那样子。这是因为所有容器的默认布局是自动布局（Auto Layout）。自动布局不指定任何特殊的定位或子元素的大小规则。假如我们希望两个子面板并排定位，各子面板的宽度为容器宽度的 50％——我们可以在容器身上的 layout 配置项处指定一个“列布局 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        }    ]});

Ext JS 的全套布局不但简单易用，而且数量众多，几乎囊括所有类型的布局。请参阅布局的例子，说不定有什么新的想法来着。

列布局

4. 布局系统是如何工作的

一个容器的布局指的是初始定位问题和容器所有子项的大小问题。框架内部会调用容器的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 //当我们做一些会触发自动布局的事时打开暂缓布局});//通过 add() 方法增加 itemscontainerPanel.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});//关闭暂缓布局的标记containerPanel.suspendLayout = false;//触发自动布局containerPanel.doLayout();

手动布局

5. 组件布局

就像一个容器的布局去定义容器的大小和及其个组件项的定位那样，组件 Component 也有一布局调整其内部的子项的大小和位置。组件布局通过componentLayout配置项来定义布局。一般来说，你不再需要使用这种配置，除非你正在编写一个自定义的组件，因为所提供的组件其内部元素需要通过自己的布局管理器来调整大小和定位问题。于是大多数组件都使用自动布局（Auto Layout），但更复杂些的组件则需要一个自定义组件的布局（例如面板的头部header、脚部 footer 和工具栏 toolbar）。

0 0