Ext JS 4 布局和容器:Layouts、Containers

2023-10-24 05:18

本文主要是介绍Ext JS 4 布局和容器:Layouts、Containers,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

布局系统,是Ext JS中功能最强大的部分之一。系统中的每一个组件在页面上的尺寸和位置,都由该部分负责管理。这篇文档是Ext JS布局入门的文档。

Containers

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,在HTML的Body元素上渲染,里面添加了两个子面板。

Layouts

每个容器类的组件都有一个布局用来管理其内部组件的尺寸和位置。这里,我们要展示一下一个容器如何通过配置来使用某种特定的布局,并且看看布局系统如何保证每个部分都同步。

使用布局

在上面的例子里,我们没有制定最外层Panel的布局,所以内部子Panel就是一个挨着一个,从上到下顺次排列在外层的Panel上面。其布局形式跟一般的Html块级元素在页面呈现的布局相似。这在ExtJS中,也是一种布局方式,叫做Auto Layout,该种布局方法,不指定任何子组件的位置和尺寸。假如,我们需要两个子Panel并排排列,各占50%的宽度,我们可以使用Column Layout列布局,只要通过指定容器的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有全系列的布局方案,可以实现几乎任何你能想象出来的布局。

布局系统的工作原理

一个容器的布局负责初始化所有子组件的位置和属性。框架内部会调用容器的doLayout方法,这会触发Layout来计算出所有子组件正确的尺寸和位置,并且更新到DOM。doLayout方法是递归调用的,所以,所有子组件的doLayout方法,也会在那个时候被调用,一直到最底层级的组件为止。你在使用框架的时候,没有必要自己手动调用doLayout,框架会为你做好这个工作。

当容器被resize的时候,会触发容器的re-layout,或者子组件内部的对象被添加或者删除的时候也会触发这个过程。通常情况下,我们只要依赖framework提供的功能来处理布局更新的事宜,但是有些时候,我们可能希望框架不要替我们做这件事情,因为我们可能需要连续操作若干的组件,我们会希望等所有操作完成后,一并重新计算布局信息。这个时候,我们可以用容器的suspendLayout标志来阻止自动的layout,当我们处理完容器内部的组件后,我们要做的工作是取消suspendLayout,然后手动调用doLayout方法。

组件布局

就像容器有布局一样,组件也可以通过指定布局来管理位于其上的控件和对象。组件布局使用componentLayout属性来指定。一般情况下,你是不需要指定这个属性的,除非你在自定义组件,因为所有的预定义组件都已经带有了他们各自的布局管理器来里管理位于其内部的元素尺寸和位置。大部分组件使用Auto Layout,但是复杂的组件需要一个自定义的组件布局,比如Panel。

Layout盘点

ExtJS 4 Layout

从这个图里面,我们可以看到组件布局中,只有一种布局就是Auto,而大部分布局都是在容器布局下面。下面逐一来罗列一下这些布局的用途:

布局 用途
Anchor 使包含的元素相对于容器的尺寸发生变化。如果容器被resize,那么内部包含的元素就会根据指定的规则来自动重绘。这种布局一般不使用new来创建,也没有直接的配置选项。此种布局没有任何直接的配置选项。缺省情况下,AnchorLayout基于应用容器的尺寸来计算锚定规则。使用AnchorLayout的容器,可以通过anchorSize属性来设定可供内含组建计算尺寸用的虚拟容器。(经我实际在Panel上测试,该属性不起作用,不知道什么原因)
Absolute 是AnchorLayout的子类,在Anchor的基础上,提供了通过x、y的值来指定内含组建位置的能力。
Box 不能直接使用,是HBox和VBox的基类。
VBox 在容器中,垂直布局内含组建的布局。这个布局将垂直方向上的空间,按照flex属性指定的值分配给内含组件,作为其高度。可以设置内含组件的宽度width和水平对齐属性align。flex相当于是按照比例分配高度的意思。比如可以通过flex属性,将内含三个组件的高度设为2:3:3,它们会按照这个比例,占满容器的高度。将flex设定为0或者undefined,组件的高度将不会变化。
HBox 水平排布内部组件的容器布局方式。同VBox,也有个flex属性,行为相同。
Accordion VBox的子类,实现了一种让许多面板在垂直方向上可以折叠展开的布局方式。任意时刻,只能展开一个面板。折叠和展开的行为都是自动支持的,不需要额外的编程。只有Panel和Panel的子类才能用于使用了Accordion布局的容器内部子组件。
Auto 这是一个缺省布局方式,如果一个容器没有指定layout的话,都会使用Auto布局方式。Auto布局什么都不做,只是把布局的调用透传给子容器。
Form 这种布局方式用于渲染表单域,表单域一个一个纵向排列并且会被拉长到填满容器的宽度。在这种布局内,内部元素上设定的padding值都会被忽略。
Border 这是一种多窗口,面向应用的UI布局样式。支持多层嵌套面板,块于块之间自动的分界,支持某块区域的展开和缩起。通过border关键字来指定或者扩展,一般不用new关键字来创建。此布局内的空间被分为东南西北中五个区域。设定split属性为true,可以使某块区域能被resize。所有使用这种布局的容器,至少要指定一个子元素,来占据“中间”区域center。中间区域的子组件总是会撑满容器没有被设定的剩下区域。西侧或者东侧的子组件可以指定初始宽度,或者通过flex属性来指定宽度占比。同理,南北两侧的可以指定高度。可以用collapsible设定是否可以折叠。
Fit 对于只包含了一个组件的容器,这种布局使得内部组件撑满容器。这个布局没有配置选项。如果容器中有多个组件,所有的组件的尺寸都会设为相同,这一般来说都不是我们期望的行为,所以在fit布局的容器中,只能放一个子组件。
Card 这种布局形式,将容器内部子组件都撑满到容器的大小叠放,所以一次只能显示位于最上面的那个组件。这个布局方式,通常用来创建应用的向导程序。这种布局有个方法setActiveItem来决定显示哪个组件,参数是id或者下标。布局本身不提供UI来实现内部组件的导航,所以开发向导的时候,要自己开发导航按钮。
CheckboxGroup 这个布局用于实现复选框和单选框在页面上的布局管理。它根据组件的columns属性值和子组件的vertical属性值来组织布局容器内的元素。
Column

对容器进行分栏布局,分栏的宽度可以用百分比,也可以用固定宽度。分栏的高度是可以根据内容来指定的。此布局本身没有什么配置选项,但是位于此布局中的面板,可以使用columnWidth属性来指定分栏宽度。

在指定宽度的时候width属性和columnWidth属性都是有效的,width的值必须是大于1的整数,columnWidth的值是百分比,取值范围是0到1的左开右闭区间。

在渲染布局的时候,外层容器首先遍历内部宽度固定的面板,然后算出剩余没有分配的宽度,然后按照columnWidth所指定的百分比,分给其他面板。所以,此布局中所有使用columnWidht指定宽度的面板的columnWidth值之和必须是1,否则该布局的行为不可预期。

Table 使界面按照HTML的table的形式来进行布局,可以指定总的列数,然后配合colspan和rowspan来生成复杂的表格结构。这个布局背后的思想就是一个table元素,所以,所有的注意点都跟table的注意点一样。该布局只需要指定列数column,然后会将其内子元素按照从左到右,从上到下的顺序排布在界面上。

总结

ExtJS 4 给我们提供了丰富的界面布局,帮助我们能够快速简单的创建用户界面。




转载地址:http://sexywp.com/ext-js-4-layouts-and-containers.htm

这篇关于Ext JS 4 布局和容器:Layouts、Containers的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/272947

相关文章

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

如何高效移除C++关联容器中的元素

《如何高效移除C++关联容器中的元素》关联容器和顺序容器有着很大不同,关联容器中的元素是按照关键字来保存和访问的,而顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的,本文介绍了如何高效移除C+... 目录一、简介二、移除给定位置的元素三、移除与特定键值等价的元素四、移除满足特android定条件的元

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

如何将Tomcat容器替换为Jetty容器

《如何将Tomcat容器替换为Jetty容器》:本文主要介绍如何将Tomcat容器替换为Jetty容器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat容器替换为Jetty容器修改Maven依赖配置文件调整(可选)重新构建和运行总结Tomcat容器替

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素(即第一个元素)是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa