专栏首页LeoXu的博客[翻译]Ext JS 教程-布局和容器 原

[翻译]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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [翻译]Ext JS 教程-组件 原

    一个ExtJS 应用程序是由一个或者更多个叫做组件的窗口小部件组成的。所有的组件都是Ext.Component类的子类,它允许它们参与到自动的生命周期管理中去...

    LeoXu
  • [翻译]Ext JS 教程-类系统 原

    <h3>类系统</h3> <p>ExtJS 史上第一次进行了重整新的类系统的大重构。新的架构以ExtJS 4.X所编写的每一个类作为后盾,因此在你编写代码以前...

    LeoXu
  • Android虚拟键盘挡住输入组件的解决办法 原

    如题,一开始遇到这个问题,请教了做苹果开发的哥们(做苹果的哥们好说话),他说要做监听,打开键盘的时候把会被遮住的输入组件向上移动。

    LeoXu
  • Python:动态全国各省新型冠状病毒疫情变化

    在家闲来无事,就用python绘制了全国各省新型冠状病毒疫情状况动态图表,其地图数据来源于腾讯的疫情实时追踪展示地图:https://github.com/do...

    数据小磨坊
  • 新浪微博爬虫最新分享

    專 欄 ❈ 九茶,Python工程师,目前居于广州。Github知名开源爬虫QQSpider和SinaSpider作 者,经常会在CSDN上分享一些爬虫、数据...

    Python中文社区
  • 用Python绘制全国各省新型冠状病毒疫情状况

    本文使用数据说明:数据截至2月2日24时,累计报告确诊病例17205例,现有重症病例2296例,累计死亡病例361例,累计治愈出院475例。疑似病例21558例...

    博文视点Broadview
  • 利用Python绘制全国各省新型冠状病毒疫情变化动态图

    题图:Image by enriquelopezgarre from Pixabay

    猴哥yuri
  • 数据结构与算法初识

    首先明确的一点就是计算机科学不仅仅是对计算机的研究,虽然计算机在科学发展的过程中发挥了重大的作用,

    郭楷丰
  • 百度熊掌号如何实现搜索结果出图

    百度熊掌号如何实现搜索结果出图呢?很多人听到这个名词会有点迷糊,不知道什么意思。看看下图就明白了。下面是魏艾斯博客的百度熊掌号文章列表,之前只有文字标题,现在程...

    魏艾斯博客www.vpsss.net
  • linux中iptables配置文件及命令详解详解

    直接改iptables配置就可以了:vim /etc/sysconfig/iptables。

    拓荒者

扫码关注云+社区

领取腾讯云代金券