【ExtJS】 布局Layout
布局用于定义容器如何组织内部子元素和控制子元素的大小。
ExtJS中有两种类型的布局:Container容器类布局与Component组件类布局。
Containter容器类布局:负责容器内容Extjs元素和调整Extjs元素的大小。
包括:Border布局、Box布局、Fit布局等等。
Component组件类布局:负责组织组件的HTML元素。
包括:Dock布局、Toolbar布局、Field布局、TriggerField布局。
一、Container布局:
我们首先拿一张图来看看Container布局的层级关系:
1、Auto布局:
当没有为容器(Container或其子类实例)配置layout配置项时就默认使用Auto布局。
(4) 通过子元素的x、y配置项可设置子元素离原来位置的左边距和上边距。
当容器的layout设置为anchor时,若要定制子元素的布局时就需要配置子元素的anchor配置项。
配置项:
(1) 负数表示子元素离父容器右内边框、下内边框的距离;
(2)正数表示子元素离父容器左内边框、上内边框的距离;
(3)百分数表示子元素占父容器宽度、高度的百分比;
(4)数字与百分比可以混用。
3、Absolute布局:
AbsoluteLayout是AnchorLayout的子类,其继承了AnchoreLayout的所有特性。并且可以设置x和y配置项来相对于父容器来定位子元素。

二、Component布局

【ExtJS】 布局Layout的更多相关文章
- Extjs布局——layout: 'card'
先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...
- ExtJs常用布局--layout详解(含实例)
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- ExtJS 布局-Border 布局(Border layout)
更新记录: 2022年6月11日 发布. 2022年6月1日 开始. 1.说明 边框布局允许根据区域(如中心.北部.南部.西部和东部)指定子部件的位置.还可以调整子组件的大小和折叠. 2.设置布局方法 ...
- ExtJs布局详解
序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...
- Duilib源码分析(五)UI布局—Layout与各子控件
接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...
- jquery easy ui 1.3.4 布局layout(4)
4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...
- [转]struct实例字段的内存布局(Layout)和大小(Size)
在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- WPF笔记(2.7 文字布局)——Layout
原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock 最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...
- sencha touch 入门系列 (九) sencha touch 布局layout
布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...
随机推荐
- 基于JDBC的数据库连接池技术研究与应用
引言 近年来,随着Internet/Intranet建网技术的飞速发展和在世界范围内的迅速普及,计算机 应用程序已从传统的桌面应用转到Web应用.基于B/S(Browser/Server)架构的3层开 ...
- Reporting Service服务SharePoint集成模式安装配置(7、配置SharePoint2010产品)
在第3步安装完成SharePoint2010产品后,没有选择[立即安装产品配置向导],这一小节将单独配置SharePoint2010产品数据库(管理中心). 1)启动SharePoint 2010 产 ...
- Java 连接、操控数据库总结(JDBC)
看到数据库连接不由得想起了大一末参加团队考核时的悲催经历~~,还记得当初傻傻地按照书本的代码打到 Eclipse 上,然后一运行就各种报错...报错后还傻傻地和书本的代码一遍又一遍地进行核对,发现无误 ...
- [Asp.net Mvc]为js,css静态文件添加版本号
方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...
- 启动redis一闪就关
解决方法:1-win+R 打开命令行2-cd至redis目录,例如 D:\redis>3-输入 redis-server.exe redis.windows.conf观察是否如图1:至此,已成功 ...
- Entity Framework 6 暂停重试执行策略
EF6引入一个弹性连接的功能,也就是允许重新尝试执行失败的数据库操作.某些复杂的场景中,可能需要启用或停用重试执行的策略,但是EF框架暂时尚未提供直接的设置开关,将来可能会加入这种配置.幸运的是,很容 ...
- [TJOI2007] 线段
因为每行必须走完才能到下一行,所以我们有两种决策: 1.最后留在线段左端点 2.最后留在线段右端点 这种存在状态转移且多决策的问题用动态规划来进行递推是最好不过的了. 所以我们设\(dp[i][0/1 ...
- 驼峰转大写(javaScript)
var a = function(s){return s.replace(/([A-Z])/g,"_$1").toUpperCase();} F12控制台可以直接用
- Ruby 和 OpenSSL CA 证书的问题
作为一个版本控,总是希望保持电脑中各种软件到最新版本. 最近通过 brew 升级 OpenSSL 和 ruby-build 到最新,尤其是 ruby-build 支持最新的 Ruby 2.2.1,新版 ...
- 「案例」让房东在 Airbnb 上展示他们的热情好客
如何才能让房东准确的描述自己的房源,如何才能让房东充分的展示自己的房源.Airbnb 在这次更新里尝试去解决了这两个问题,让我们跟随作者的文笔去了解一下整个项目的经过. 关于本文 原文作者:Cecil ...