盒子布局

盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域。这也是比较常有的布局方式。

使用盒子布局,除了要在容器定义layout配置项外,还需要在子组件指定子组件的宽度(HBox)或高度(VBox)。指定宽度或高度有两种方式,一是直接使用width或height来定义,一是使用flex配置项,根据比例来划分。下面通过一些示例来了解一下盒子布局的使用,这里只使用水平盒子作为示例,垂直盒子就不演示了。

在页面运行以下代码创建一个400×200的容器,然后使用水平盒子布局加入三个大小分别为50×50、100×100和150×150的面板:

Ext.create('Ext.container.Container',{
renderTo: Ext.getBody(),
width:400,
height:200,
border: 5,
style:{
borderColor:'yellow',
borderStyle: 'solid'
},
layout:{
type:'hbox'
},
defaults:{
bodyStyle:{
borderColor: 'red'
}
},
items:[
{html:'50×50', width:50, height:50},
{html: '100×100', width:100, height:100},
{html: '150×150', width:150, height:150}
]
});

为了加强演示效果,特意将容器的边框设置为5像素,且以黄色实线显示,而面板的边框也使用红色实线来显示,最终的显示效果如下:

从效果图中可以看到,由于子组件的总宽度不能填满容器的宽度, 因而留了很大一块空白,要预防这种情况,就要使用flex配置项,例如,将150×150的面板的“width:150”修改为“flex:1”就可以让子组件填满余下的空白了。修改后的宽度计算规则是先用容器的宽度减去所有固定宽度的子组件的总宽度,再把余下的宽度根据flex设置的比例分配,由于这里只有一个flex,因而会把全部余下宽度全部分配给150×150的面板。

如果不清楚该设置多少宽度给子组件,最好的方式就是使用flex,通过比例划分的方式来分配宽度。比例划分的计算规则是,先把所以子组件的flex配置项相加作为分母,把各子组件的flex设置作为分子,计算出比例后再乘于容器的宽度就是子组件的宽度。例如,将示例中的三个子组件的flex依次设置为1、2、4,那各子组件的宽度将依次为总宽度的1/7、2/7和4/7。使用除法,不可避免的要对计算值进行取整,这样,取整后的总宽度就有可能不是容器的总宽度,因而,在最后都会调整最后一个子组件的宽度以便所有子组件的宽度等于总宽度。

在效果图中,你会发现如果各个子面板的高度都不同,就会出现这种不太美观的效果,当然,有时候可能需要这种效果,但总的来说还是高度统一为容器的高度较美观。如果要让高度统一为容器高度,可以在layout的配置对象内将align配置项定义为stretch,代码如下:

layout:{
type:'hbox',
align:'stretch'
},

对于align配置项来说,还有其他对齐方式可选:

  • begin:如果是水平盒子布局,则是顶部对齐,如果是垂直盒子布局,则左对齐。
  • middle:如果是水平盒子布局,则是垂直居中对齐,如果是垂直盒子布局,则是水平居中对齐。
  • end:如果是水平盒子布局,则是底部对齐,如果是垂直盒子布局,则是右对齐。
  • stretchmax:如果是水平盒子布局,则对齐高度最高的那个子组件,如果是垂直盒子布局,则对齐宽度最宽的那个子组件。

拆分条

在盒子布局中也是可以使用拆分条的,不过它使用的组件与边框布局不同,它使用的是Ext.resizer.Splitter组件。要在盒子布局设置拆分条,与边框布局的用法是一样的。要注意的是,水平盒子布局的拆分条是固定绑定在子组件的左边的,而垂直盒子布局的拆分条是固定绑定在组件的顶部的,总的来说,无论是水平盒子布局还是垂直盒子布局,在第一个子组件设置拆分条是没有效果的。

装箱

如果确实需要效果图中的效果,但希望所有子组件居中显示,可以在layout的配置对象中将pack配置项设置为center,代码如下:

layout:{
type:'hbox',
pack: 'center'
},

这样,效果图中的三个子组件就会水平居中显示了。如果要右对齐(水平盒子布局)或底部对齐(垂直盒子布局),可将pack的值设置为end。pack的默认值为start,也就是效果图中的效果。

自适应布局(Ext.layout.container.Fit)

自适应布局就是把子组件的尺寸设置为容器的尺寸,完全填满容器的可视空间,这是一种常有比较,也比较简单,只要把layout的类型设置为fit就行了。

一般情况下,只有在容器只有一个子组件的情况下才适合使用自适应布局,不然,当有多个子组件时,就会每一个子组件都会和容器的尺寸一样,显示就会出问题。这时候,应该使用盒子布局或者卡片布局。

卡片布局(Ext.layout.container.Card)

卡片布局与自适应布局一样,都会把子组件的尺寸设置未容器的尺寸,不同之处在于,它可以拥有多个子组件,但每次只显示其中一个。为了能对子组件进行切换,特意在布局中添加了getNext、getPrev、next、prev和setActiveItem等方法。要调用这些方法,需要先调用容器的getLayout方法返回布局对象,再调用它的方法。

居中布局(Ext.layout.container.Center)

居中布局很简单,就是把子组件全部居中显示。与盒子布局一样,它也是使用绝对定位的方式来实现子组件居中显示的。居中布局典型的应用是显示图片预览时,在容器内居中显示图片组件。与自适应布局一样,容器内一般都是只有一个子组件。如果容器内有多个子组件,所以子组件都会居中显示,不过显示是层叠式的,如下图:

上图的效果只是把上面示例中的布局修改未居中布局,把尺寸大的子组件作为第一个子组件,把尺寸最小的子组件作为最后一个子组件。从图中的效果可以看到,居中布局会依子组件的定义次序来层叠子组件,也就是最后一个渲染的子组件会显示在最前面。

未完待续……

请大家尊重作者的辛勤劳动,未经允许,请不要转载本文,毕竟读者的支持是作者撰写文章的动力。

谈谈Ext JS的组件——布局的使用方法续一的更多相关文章

  1. 谈谈Ext JS的组件——布局的使用方法续二

    绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为 ...

  2. 谈谈Ext JS的组件——布局的使用方法

    概述 在Ext JS中,包含两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就需要组件类布局来处理组件内自己特有的布 ...

  3. 谈谈Ext JS的组件——布局的用法

    概述 在Ext JS中.包括两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就须要组件类布局来处理组件内自己特有的布 ...

  4. 谈谈Ext JS的组件——布局的用法续二

    绝对布局(Ext.layout.container.Absolute) 绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样.通过设置控件的左上角坐标(x.y)和宽度来进行的,由于 ...

  5. 谈谈Ext JS的组件——布局的用法续一

    盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比較常有的布局方式. 使用 ...

  6. 谈谈Ext JS的组件——组件基类:Ext.Component

    概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基 ...

  7. 谈谈Ext JS的组件——容器与布局

    概述 在页面中,比较棘手的地方就是布局.而要实现布局,就得有能维护布局的容器.可以说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最棒的一个,而这得益于它强大的容器类和丰富的 ...

  8. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  9. 谈谈Ext JS组件之引子

    Ext JS组件,对于Ext JS开发人员来说,应当不会陌生,毕竟做开发,都必须与它打交道.对于这样一个大家都熟悉的东西,为什么要用一个专题的形式来写呢?是否有这方面的需要?还不如去写点使用技巧? 确 ...

随机推荐

  1. iOS应用九宫格算法

      1.框框横向间隔为:( "界面的总宽度"-"界面每行的控件的宽度" * "每行要现实的列数(这里是3)") / ("列数 + ...

  2. JavaMeloay配置用于系统监控

    JavaMelody JavaMelody能够监控Java或Java EE应用程序服务器的运行状况,并以图标的方式显示:java内存.CPU使用情况.用户Session数量.JDBC连接数.http请 ...

  3. 在竞赛ACM Java处理输入输出

    一.Java之ACM注意点 1. 类名称必须采用public class Main方式命名 2. 在有些OJ系统上,即便是输出的末尾多了一个“ ”,程序可能会输出错误,所以在我看来好多OJ系统做的是非 ...

  4. codeforces 721C (拓扑+dp)

    题意就是某个人去游览,起点是1点,终点是n点,他总的游览时间不能超过t,第一行给你3个数字,点的个数n,边的个数m,时间t,然后底下m行数据,每行代表一条边,边的起点,终点和权值(走过去花的时间),然 ...

  5. 修改phpmyadmin上传文件大小限制

    当你想将SQL语句,导入phpmyadmin 时,发现自己的sql语句文本大小 大于 phpmyadmin的课上传的文本大小. 默认phpmyadmin上传文件大小为2M,如果想要phpmyadmin ...

  6. OD学习笔记10:一个VB程序的加密和解密思路

    前边,我们的例子中既有VC++开发的程序,也有Delphi开发的程序,今天我们给大家分析一个VB程序的加密和解密思路. Virtual BASIC是由早期DOS时代的BASIC语言发展而来的可视化编程 ...

  7. C. Robot(BFS)

    C. Robot Time Limit: 3000ms Case Time Limit: 3000ms Memory Limit: 262144KB 64-bit integer IO format: ...

  8. YAML书写规范

    1. 认识 YAML YAML是一个类似 XML.JSON 的标记性语言.YAML 强调以数据为中心,并不是以标识语言为重点.因而 YAML 本身的定义比较简单,号称"一种人性化的数据格式语 ...

  9. RabbitMQ的生产者和消费者

    低级错误:启动程序的时候报错:socket close: 原因在配置文件中写的端口是:15672,应该是5672: client端通信口5672管理口15672server间内部通信口25672erl ...

  10. [C]语法, 知识点总结(二. 结构体, 类别名, static, const)

    结构体 定义: struct Student{ // 定义结构体Student, stu是创建的对象         char a[17]; // 结构体里面可以有多种不同类型的变量         ...