谈谈Ext JS的组件——布局的用法续二-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介:

绝对布局(Ext.layout.container.Absolute)

绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样。通过设置控件的左上角坐标(x。y)和宽度来进行的,由于输入控件的高度基本是固定的。所以不须要设置。在可视化编程没有出现之前,开发界面算是个苦差事,由于布局是须要花费不少功夫的。比如想要在已经定义好的组件中插入一个组件,那就得又一次改动插入位置下面的组件的坐标。这工作是比較枯燥无聊的。因而,在不是必需的情况下,还是少选择这样的布局模式。

绝对布局是使用CSS的绝对定位(absolute)实现的,因而在使用的时候须要定义子组件的左上角坐标、宽度和高度。

在CSS中。绝对定义是使用left和top来定义左上角坐标的,而在Ext JS中,则转换为习惯的x、y来取代。宽度和高度能够分别使用width和height来定义,也能够是anchor来定义。

使用anchor的优点是子组件会依据容器的尺寸变化来调整子组件的尺寸。从而保证不会在容器变小的时候,仅仅能显示部分子组件,而在容器大了的时候,显示一片的空白区域。

使用anchor来定义宽度和高度也有三种方式。一种是使用百分比来定义,如“90% 95%”,这里表示的是子组件的宽度是容器宽度的90%。高度为容器高度的95%,一种是使用偏移量,如“-20 -5”,这里表示的是子组件的右边界将廉价容器的右边界-20像素,也就是两个边界相距20个像素,而-5则表示子组件的底部边界与容器的边界相距5个像素。

假设你使用正值。那子组件的显示就会超出容器。一般绝少这样设置。最后一种方式就是混合以上两种方式的方式。也就是宽度用百分比。高度使用偏移量,或宽度使用偏移量,而高度使用百分比。假设子组件的高度是固定的。以上三种方式也可仅仅设置一个值。也就是仅仅设置子组件的宽度。

锚布局(Ext.layout.container.Anchor)

锚布局是表单面板的默认模板,因而是一种常有的布局,它的优点就是子组件可依据容器尺寸的变化而调整。在表单面板中使用anchor布局。就可避免在表单面板变小后,输入组件的长度会超出表单面板的訪问,而变大的时候则不会留下一片空白。

要使用锚布局。除了要在容器中将layout定义为“anchor”,还须要在子组件中使用anchor配置项来定义子组件的高度和宽度。配置项anchor的用法与绝对布局中的anchor配置项的用法是一样的,这里就不再赘述了。

列布局(Ext.layout.container.Column)

在Ext JS 2没有水平盒子布局的时候,仅仅能使用列布局进行列的划分,自从有了水平盒子布局。就非常少使用列布局了。只是,咸鱼白菜各有喜好,能实现所需效果才是终于目的。

要使用列布局,除了要在容器中将layout定义为“column”,还须要在子组件中定义宽度。

宽度的定义方式有两种。一是直接使用width来定义,这样的方式不要的地方是宽度固定,不能随容器的变化而进行调整。第二张方式是使用columnWidth,通过设置百分比(值用小数来表示)来设置列宽,这样的方式的优点就是列宽可随容器大小的变化调整列宽。

手风琴布局(Ext.layout.container.Accordion)

手风琴也是一种常有的布局。它派生于垂直盒子布局,在原理上事实上也差点儿相同。把容器垂直划分为几个区域,仅仅有一个区域是展开来显示标题和内容的,其它区域都是折叠仅仅显示标题的。

当然,手风琴布局也能够同一时候显示多个展开区域。这个要在layout的配置对象中将multi配置项设置为true。

由于手风琴布局须要显示标题,而它自己不会去创建一个这样的标题,仅仅使用容器类的标题,因而。在使用手风琴布局的时候。子组件必须选择是带有标题且能折叠的容器类,如面板、表单面板、树面板等。

使用手风琴布局,仅仅须要在容器中将layout定义为“accordion”即可了。假设喜欢活动面板始终位于容器定义。可在layout的配置对象中设置activeOnTop为true。默认情况下。面板的折叠仅仅能通过单击面板折叠button来实现,假设希望单击标题栏就实现折叠,可在layout的配置对象中设置titleCollapse为true。

假设希望切换时显示动画。可设置animate为true。假设希望隐藏面板标题中的折叠button。可设置hideCollapseTool为true。这时候。titleCollapse会被自己主动设置未true。

表单布局(Ext.layout.container.Form)

表单布局与锚布局有点相似,都同意子组件随容器尺寸的变化而调整子组件的大小,只是这仅仅限于输入字段,因而一般仅仅用于仅仅有输入字段的容器。它与锚布局的不同之处在于不须要在子组件定义anchor配置项。

对于输入字段来说,表单布局与锚布局的实现方式是一样的。他们都是通过样式来实现效果的。在输入字段的封装DIV中,使用了样式“display: table;”,也就是说该DIV的行为与HTML表格的行为是一样的。而对于输入字段的标签和输入框,使用的样式是“display: table-cell;”,也就相当于把输入字段的封装DIV划分成了表格的两列。当中一列显示标签,还有一列显示输入框。由于表格会自己主动尾随父容器的尺寸变化而调整自身的尺寸,这也就实现了子组件尾随容器尺寸的变化而自己主动做对应的调整。表单布局与锚布局的不同在于表单布局不会去计算输入字段的封装DIV的宽度,直接设置未100%,而锚布局会依据设置去计算封装DIV的宽度和高度。而这也是锚布局内可使用不论什么子组件。而表单布局内仅仅能使用输入字段的一个原因,由于锚布局可依据设置去计算子组件的宽度和高度。而表单布局则不会。

假设在表单布局内使用非输入字段类的组件,由于没有计算过程。就等于使用了自己主动布局,子组件的尺寸默认是多少就是多少了。不会去做调整。而输入字段自身的表格特性不须要这样的计算就能正确。

使用表单布局,仅仅须要在容器中将layout定义为“form”即可了。使用labelWidth可设置输入字段的标签的宽度。

表格布局(Ext.layout.container.Table)

表格布局是使用TABLE元素实现的布局,因而,普通情况。其它布局能实现的效果。就不要建议使用该布局。

使用表格布局,除了要将布局类型定义为table,还须要使用columns来定义表格的列数。要定义表格的属性,可使用tableAttrs配置项。要定义行的属性。可使用trAttrs配置项;要定义单元格的属性,可使用tdAttrs配置项。

假设没有特别说明。容器会依子组件的定义次序将子组件写入表格第一个中。如定义了2列,3个子组件,则第一个子组件会渲染在表格的第一行第一列,而第二子组件会渲染在第一行第二列,第三个子组件会渲染在第二行第一列。

假设要实现跨列,则可在子组件中使用colspan配置项来声明跨几列,要跨行。则使用rowspan配置项。要定义单元格的id,可使用cellId配置项。要定义单元格的样式,可使用cellCls配置项。

小结

在使用Ext JS的时候,显示错误多半是使用了错误的布局造成的,因而,能熟练的使用布局是相当重要的。而要能熟练使用布局,最好的方式就是能了解各种布局在页面中是怎样实现的,并了解这些实现的特性。从而对布局了然于胸,这样,就不怕用错布局了。

在下文。将介绍面板。





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5139623.html,如需转载请自行联系原作者

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章