ExtJS 4 官方指南翻译:容器与布局(Layouts and Containers)

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/layouts_and_containers

翻译:frank/sp42 转载请保留本页信息

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

The layout system is one of the most powerful parts of Ext JS. It handles the sizing and positioning of every Component in your application. This guide covers the basics of how to get started with layouts.

容器(Containers)

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

An Ext JS application UI is made up of Components (See the Components Guide for more on Components. A Container is a special type of Component that can contain other Components. A typical Ext JS application is made up of several layers of nested Components.

最常用的容器是面板 Panel。让我们看看如何一个面板是如何作为容器来包含其他组件的:

The most commonly used Container is Panel. Let's take a look at how being a Container allows a Panel to contain other Components:

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)下的子面板。

We just created a Panel that renders itself to the document body, and we used the items config to add two child Panels to our Container Panel.

布局 Layouts

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

Every Container has a Layout that manages the sizing and positioning of its child Components. In this section we're going to discuss how to configure a Container to use a specific type of Layout, and how the layout system keeps everything in sync.

布局的用法 Using Layouts

在上面的例子中,我们没有为面板容器(Container Panel)指派的布局。请注意子面板都是一个挨着一个布局的,就像正常 DOM 中的块元素将那样子。这是因为所有容器的默认布局是自动布局(Auto Layout)。自动布局不指定任何特殊的定位或子元素的大小规则。假如我们希望两个子面板并排定位,各子面板的宽度为容器宽度的 50%——我们可以在容器身上的 layout 配置项处指定一个“列布局  Column Layout ”的方式。

In the above example we did not specify a layout for the Container Panel. Notice how the child Panels are laid out one after the other, just as normal block elements would be in the DOM. This happens because the default layout for all Containers is Auto
Layout. Auto Layout does not specify any special positioning or sizing rules for child elements. Let's assume, for example, we want our two child Panels to be positioned side by side, and to each take up exactly 50% of the width of the Container - we can use
a Column Layout simply by providing a layout config on the Container:

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,
            width: '50%'
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            width: '50%'
        }
    ]
});

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

Ext JS comes with a full set of layouts out of the box and can accomodate almost any type of layout you can imagine. See the Layout Examples to get an idea of what's possible.

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

一个容器的布局指的是初始定位问题和容器所有子项的大小问题。框架内部会调用容器的 doLayout 方法执行布局的工序,为所有子项计算正确的大小尺寸和位置,并且更新 DOM。doLayout 方法是完全递归的,所以容器下的任何子项其 doLayout 方法也会被调用。一直持续到组件层次结构结束为止。你通常不会在程序代码中调用 doLayout(),因为该框架相应为你处理的。

A Container's Layout is responsible for the initial positioning and sizing of all of the Container's children. Internally the framework calls the Container's doLayout method which triggers the Layout to calculate the correct sizes and positions for all of
the Container's children and update the DOM. The doLayout method is fully recursive, so any of the Container's children that are also will have their doLayout method called as well. This continues until the bottom of the Component hierarchy is reached. You
typically will not have to ever call doLayout() in your application code since the framework should handle it for you.

当容器大小变化时,就需要重新进行布局,或添加或删除子组件项目时候,也需要重新布局。通常,我们可以依赖于框架来为我们处理布局的更新,但有时我们要防止框架自动布局,以便我们可以批量地处理多个操作,最后才手动地执行布局的动作。通常我们的某些操作,就是需要这样,具体说,就是在触发布局之前(例如添加或删除子项),先对容器 suspendLayout 标记,就可以防止它执行布局了。而当我们完成所有我们要做的事情后,打开刚关闭的 suspendLayout 标志然后手动执行布局,也就是通过调用容器的 doLayout
方法:

A re-layout is triggered when the Container is resized, or when child Component items are added or removed. Normally we can just rely on the framework to handle updating the layout for us, but sometimes we want to prevent the framework from automatically
laying out so we can batch multiple operations together and then manually trigger a layout when we're done. To do this we use the suspendLayout flag on the Container to prevent it from laying out while we perform our operations that would normally trigger
a layout (adding or removing items for example). When we're done all we have to do is turn the suspendLayout flag off and manually trigger a layout by calling the Container's doLayout method:

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,
    width: '50%'
});
containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 2',
    height: 100,
    width: '50%'
});
// 关闭标记 Turn the suspendLayout flag off.
containerPanel.suspendLayout = false;
// 执行布局 Trigger a layout.
containerPanel.doLayout();

组件布局 Component Layout

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

Just like a Container's Layout defines how a Container sizes and positions its Component items, a Component also has a Layout which defines how it sizes and positions its internal child items. Component layouts are configured using the componentLayout config
option. Generally, you will not need to use this configuration unless you are writing a custom Component since all of the provided Components which need their internal elements sized and positioned come with their own layout managers. Most Components use Auto
Layout, but more complex Components will require a custom component layout (for example a Panel that has a header, footer, and toolbars).

时间: 2024-09-20 06:30:06

ExtJS 4 官方指南翻译:容器与布局(Layouts and Containers)的相关文章

ExtJS 4 官方指南翻译:Component 组件

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/component 翻译:frank/sp42 转载请保留本页信息 ExtJS 程序由不同的器件所组成,器件也称作"组件".所有组件皆是 Ext.Component 其子类,目的在于能够参与生存周期的自动化管理,包括实例化.渲染.大小调整与定位.销毁的问题.ExtJS不但直接提供了一个广阔且实用的组件模型,而且使得任意组件都可以轻松地扩展出新的组件. An Ext JS application'

ExtJS 4 官方指南翻译:Drag and Drop 拖放

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/drag_and_drop 翻译:frank/sp42 转载请保留本页信息 拖放 Drag and Drop 在那么多的交互设计模式之中,"拖放(Drag andDrop)"模式可以说是开发者感觉比较不错的.用户日常在进行拖放操作的时候,真的是连"想都不用想"地就可以进行拖放操作了,非常直观而且易学易用.下文中的教程中,请跟随我们.不是我们"大厥其词",而

ExtJS 4 官方指南翻译:Grid组件(上)

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/grid 翻译:frank/sp42 转载请保留本页信息 Grids Grid 面板为 Ext JS 的大头核心之一.它是一个通用性很强的组件,提供了一个简单的方式来显示.排序(sort).分组(group)和编辑(edit)数据. The Grid Panel is one of the centerpieces of Ext JS. It's an incredibly versatile compo

ExtJS 4 官方指南翻译:键盘导航 Keyboard Navigation

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/keyboard_nav 翻译:frank/sp42 转载请保留本页信息 使用键盘的原因,无非大致两个原因:一.控制鼠标指针不及敲键盘来得快:二.某些用户用不了鼠标,这是可用性方面的问题(accessibility). Navigating with your keyboard is often faster than using the cursor and is useful for both pow

ExtJS 4 官方指南翻译:Grid组件(下)

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/grid 翻译:frank/sp42 转载请保留本页信息 选区模型 Selection Models 有时 Grid 面板被用于只是在屏幕上显示的数据,但更多的是进行交互动作或执行更新数据的任务.所有 Grid 面板都有一个选择模型(SelectionModel),以确定数据如何被选中.选择模型的两个主要类型是"整行选择模型",抑或是"单元格选择模型",也就是一行行地被选择,

ExtJS 4.2 教程-08:布局系统详解

ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用Ext.define自定义类 ExtJS 4.2 教程-04:数据模型 ExtJS 4.2 教程-05:客户端代理(proxy) ExtJS 4.2 教程-06:服务器代理(proxy) ExtJS 4.2 教程-07:Ext.Direct ExtJS 4.2 教程-08:布局系统详解 今天我们来对

《Ext JS 4 First Look》翻译之三:布局

第三章 布局      布局用于定义容器如何组织内部子元素和控制子元素的大小.在一个应用程序中,作为定义容器的组织形式,布局是一个十分重要的组件.是显示单个子元素?还 是垂直或水平显示多个子元素?这些均由布局来定义.并且布局将占用应用程序大部分的呈现时间.Extjs4中对布局进行了重大的修整.下面我们将学习并熟 悉Extjs中的布局. 本章目录如下: 3.1. Extjs 4 布局 3.2. Container布局 3.2.1. Auto布局 3.2.2. Anchor布局 3.2.3. Abs

ExtJS的FieldSet的column列布局_extjs

以下是自己扩展的FieldSet: 复制代码 代码如下: ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, { layout: 'column', fieldSetItems: [], autoScroll:false, defaults: { layout: 'form', labelAlign: 'right', labelWidth: 65, columnWidth: .25, defaults: { anchor: '96%' } }, i

yii Query Builder (yii 查询构造器) 官方指南翻译

/**** Query Builder translated by php攻城师 http://blog.csdn.net/phpgcs Preparing Query Builder 准备 Query Builder Building Data Retrieval Queries 构建数据查找查询 Building Data Manipulation Queries 构建数据操作查询 Building Schema Manipulation Queries构建数据结构操作查询 ****/ Yi