布局和容器

翻译 2012年03月29日 23:06:37

布局和容器

布局系统是Ext JS的最强大的地区之一。它可以处理的大小和每一个定位在您的应用程序的组件本指南介绍如何开始布局的基础。

容器

一个Ext JS的应用程序的UI 组件小号(见组件组件指南。一个容器是一个组件,它可以包含其他组件的特殊类型。一个典型的Ext JS的应用程序是由几层嵌套组件

组件架构

最常用的容器是小组让我们来看看如何集装箱允许一个面板包含其他组件:

分机创建“Ext.panel.Panel”,{
    renderTo分机getBody()
    宽度400
    高度300
    标题'货柜小组'
    项目:[
        {
            的xtype'小组'
            标题“子面板1' 
            高度100
            宽度'75%'
        },
        {
            的xtype'小组'
            标题“儿童面板2' 
            高度100
            宽度'75%'
        }
    ]
});
 

我们刚刚创建了一个面板,呈现本身的文件体,和我们使用的项目配置两个子面板添加到我们的集装箱小组。

布局

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

使用布局

在上面的例子中,我们没有指定为容器的布局面板注意孩子如何面板奠定了一前一后,就像正常的块元素将在DOM。这是因为所有容器的默认布局是自动布局自动布局不指定任何特殊的定位或子元素的大小规则。例如,假设,我们希望我们的2儿童事务委员会以被定位并排侧,并到每个参加了整整50%的容器宽度-我们可以使用1 列布局只需提供一个布局容器上的配置:

Ext JS的开箱配备全套的布局,可容纳几乎任何类型的布局,你可以想像。看到布局的例子,得到一个什么是可能的想法。

布局系统是如何工作的

一个集装箱布局是最初的定位和大小容器的所有儿童负责。内部框架调用容器的doLayout触发布局的方法来计算容器的所有儿童正确的大小和位置,并更新DOM。doLayout方法是完全递归,所以任何容器的儿童也将有自己的doLayout方法以及。这种情况持续下去,直到达到底部组件层次。你通常不会有调用doLayout()在您的应用程序代码,因为该框架应为您处理。

重新布局调整容器大小时触发,或子组件项目添加删除通常,我们可以依靠的框架来处理更新我们的布局,但有时,我们要防止自动铺设,所以我们可以批量多个操作在一起,然后手动触发布局时,我们就大功告成了框架。要做到这一点,我们使用的suspendLayout容器上的标志,以防止它奠定了,而我们执行我们的业务,通常会触发一个布局(例如添加或删除项目)。当我们所做的一切,我们必须做的就是把suspendLayout标志和手动触发doLayout方法通过调用容器的布局

 containerPanel = 分机创建“Ext.panel.Panel,{
    renderTo分机getBody()
    宽度400
    高度200
    标题'货柜小组'
    布局“一栏”
    suspendLayout / /暂停自动布局,而我们做几件不同的事情,可能会引发自己的布局
});
/ /添加一个子项的情侣。我们可以通过一个数组添加这些都增加()在同一时间,
/ /但是让我们假装我们需要添加一些原因,他们分别。
containerPanel添加({
    的xtype'小组'
    标题“子面板1' 
    高度100
    宽度'50%'
});
containerPanel添加({
    的xtype'小组'
    标题“儿童面板2' 
    高度100
    宽度'50%'
});
/ /关闭suspendLayout标志。
containerPanelsuspendLayout = FALSE ;
/ /触发布局。
containerPaneldoLayout();
 

组件布局

就像一个 Container 布局定义容器的大小和位置的组件 项目,一个组件也有一个布局,它定义如何,它的大小和位置其内部的子项。组件布局使用的componentLayout的 config选项配置一般来说,你将不再需要使用这种配置,除非你正在编写一个自定义组件,因为所有需要它们的大小和位置有自己的布局管理器的内部元素所提供的组件。大多数组件使用自动布局,但更复杂的组件将需要一个自定义组件布局(例如,一个小组有页眉,页脚,工具栏)。

图形界面容器及布局管理器

  • 2012年05月11日 09:19
  • 25KB
  • 下载

flex 布局下关于容器内成员 flex属性的理解

原文出处:http://www.cnblogs.com/grey-zhou/p/5736223.html flex布局分为容器的设置和容器内成员的设置,容器的设置是管理成员的排列方式,也就是...

容器与布局5管理器.pdf

  • 2011年11月17日 21:06
  • 2.9MB
  • 下载

GTK布局容器之水平布局源代码

  • 2015年01月15日 16:30
  • 4KB
  • 下载

图形界面编程(五) 布局容器类(4)

点击打开链接 6 分隔容器类 分隔容器(SplitContainer)由分隔线和两个面板容器组成,可以通过分隔线将容器所在区域分为两个部分(左右或上下),每个部分里面有一个面板容器...
  • gws1229
  • gws1229
  • 2016年10月25日 15:31
  • 496

GTK布局容器之垂直布局源代码

  • 2015年01月15日 16:29
  • 4KB
  • 下载

PyGobject(七)布局容器之Button篇——Gtk.FontButton

GtkFontButton 继承关系 Methods Virtual Methods Properties Signals 例子 Gtk.FontButton继承关系 Gtk.FontButton...

GXT之旅:第二章:GXT组件(4)——容器的布局

Viewport Viewport的父类是LayoutContainer,它会自动的填充整个浏览器的窗口,并且会监听窗口的大小变化,随之变化。于此同时,也会负责处理其里面的子components在新...
  • miqi770
  • miqi770
  • 2012年01月04日 17:38
  • 7774
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:布局和容器
举报原因:
原因补充:

(最多只允许输入30个字)