ExtJs4 笔记(14) layout 布局
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
本篇讲解Ext另一个重要的概念:布局。一般的容器类控件都是通过配置项items添加子控件的,这些子控件相对于父控件怎么定位呢,这里就要用到布局。某些容器类控件,它本身默认就集成了一种布局方式,例如比较典型的是:Ext.container.Viewport 布局控件,它其实就是一个border布局的容器,还有Ext.form.Panel、Ext.tab.Panel等。本节我们系统的分析各种布局方式。
一、absolute
这种方式的布局可以对子元素相对于父级容器控件进行绝对定位,它包含了x、y两个配置项用于定位。
我们来看看一个例子:
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
//absolute Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div1' , width: 400, height: 300, layout: 'absolute' , items: [{ title: '面板1' , xtype: "panel" , html: "子元素1" , width: 200, height: 100, x: 50, y: 50 }, { title: '面板2' , xtype: "panel" , html: "子元素2" , width: 200, height: 100, x: 100, y: 80 }] }); |
效果如下:
二、accordion
有的js插件里面accordion都是一个ui控件,但是Ext是通过布局的方式实现的,我们可以用面板控件作为它的折叠项,并且还可以用js来翻动活动项。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
//accordion Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div2' , width: 400, height: 300, layout: 'accordion' , items: [{ tools: [{ type: 'gear' , handler: function () { Ext.Msg.alert( '提示' , '配置按钮被点击。' ); } }, { type: 'refresh' }], title: '面板1' , xtype: "panel" , html: "子元素1" }, { title: '面板2' , xtype: "panel" , html: "子元素2" }, { id: 'panel3' , title: '面板3' , xtype: "panel" , html: "子元素3" }] }); Ext.create( "Ext.Button" , { renderTo: 'div2' , text: "打开第三页" , handler: function () { Ext.getCmp( 'panel3' ).expand( true ); } }); |
效果如下:
三、anchor
这个布局就是表单面板默认支持的,每一项占据一行,支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比,为数字的时一般为负数,表示父容器的值减去差值,剩下的为子项的大小。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
//anchor Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div3' , width: 400, height: 300, layout: 'anchor' , items: [{ tools: [{ type: 'gear' , handler: function () { Ext.Msg.alert( '提示' , '配置按钮被点击。' ); } }, { type: 'refresh' }], title: '面板1' , xtype: "panel" , html: "子元素1" , anchor: '80% 20%' }, { title: '面板2' , xtype: "panel" , html: "子元素2" , anchor: '-50 -200' }, { title: '面板3' , xtype: "panel" , html: "子元素3" , anchor: '100% 30%' }] }); |
效果如下:
四、border
这个布局可以定义东南西北四个方向的子元素,还有一个居中的子元素,一般用它来做页面整页布局,所以Ext.container.Viewport默认就支持了这个布局方式。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
//border Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div4' , width: 400, height: 300, layout: 'border' , defaults: { split: true , //是否有分割线 collapsible: true , //是否可以折叠 bodyStyle: 'padding:15px' }, items: [{ region: 'north' , //子元素的方位:north、west、east、center、south title: '北' , xtype: "panel" , html: "子元素1" , height: 70 }, { region: 'west' , title: '西' , xtype: "panel" , html: "子元素2" , width: 100 }, { region: 'east' , title: '东' , xtype: "panel" , html: "子元素2" , width: 100 }, { region: 'center' , title: '主体' , xtype: "panel" , html: "子元素3" }, { region: 'south' , title: '南' , xtype: "panel" , html: "子元素4" , height: 70 }] }); |
效果如下:
五、card
这个布局可以像卡片一样的切换每个子元素,各个子元素都会独占父元素的容器空间。我们可以定义翻页按钮来控制当前处于活动状态的子元素。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
//card var cardNav = function (incr) { var l = Ext.getCmp( 'cardPanel' ).getLayout(); var i = l.activeItem.id.split( 'card' )[1]; var next = parseInt(i, 10) + incr; l.setActiveItem(next); Ext.getCmp( 'cardPrev' ).setDisabled(next === 0); Ext.getCmp( 'cardNext' ).setDisabled(next === 2); }; Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div5' , width: 400, height: 300, layout: 'card' , activeItem: 1, //默认活动项 id: 'cardPanel' , items: [{ id: 'card0' , title: '面板1' , xtype: "panel" , html: "子元素1" }, { id: 'card1' , title: '面板2' , xtype: "panel" , html: "子元素2" }, { id: 'card2' , title: '面板3' , xtype: "panel" , html: "子元素3" }], bbar: [ '->' , { id: 'cardPrev' , text: '« 前一页' , handler: Ext.Function.bind(cardNav, this , [-1]) }, { id: 'cardNext' , text: '后一页 »' , handler: Ext.Function.bind(cardNav, this , [1]) }] }); |
效果如下:
六、column
这个布局把子元素按照列进行划分。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
//column Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div6' , width: 400, height: 300, layout: 'column' , defaults: { //设置没一列的子元素的默认配置 layout: 'anchor' , defaults: { anchor: '100%' } }, items: [{ columnWidth: 4 / 10, //设置列的宽度 items: [{ title: '面板1' , border: false , html: '子元素1' }, { title: '面板2' , border: false , html: '子元素2' }] }, { width: 120, items: [{ title: '面板3' , border: false , html: '子元素3' }] }, { columnWidth: .40, items: [{ title: '面板4' , border: false , html: '子元素4' }] }] }); |
效果如下:
七、fit
这个布局下子元素会独占全部的容器空间,一般用于只有一个子项的情况。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//fit Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div7' , width: 400, height: 300, layout: 'fit' , items: [{ title: '面板' , html: '子元素' , border: false }] }); |
效果如下:
八、table
这个布局用表格定位的方式去组织子元素,我们可以像表格一样设置rowspan和colspan。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//table Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div8' , width: 400, height: 300, layout: { type: 'table' , columns: 4 }, defaults: { frame: true , width: 70, height: 50 }, items: [ { html: '元素1' , rowspan: 3, height: 150 }, { html: '元素2' , rowspan: 2, height: 100 }, { html: '元素3' }, { html: '元素4' }, { html: '元素5' , colspan: 2, width: 140 }, { html: '元素6' }, { html: '元素7' }, { html: '元素8' } ] }); |
效果如下:
九、vbox
这个布局把所有的子元素按照纵向排成一列。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
//vbox Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div9' , width: 400, height: 300, layout: { type: 'vbox' , pack: 'start' , //纵向对齐方式 start:从顶部;center:从中部;end:从底部 align: 'stretchmax' //对齐方式 center、left、right:居中、左对齐、右对齐;stretch:延伸;stretchmax:以最大的元素为标准延伸 }, defaults: { xtype: 'button' }, items: [{ text: '小按钮' , flex: 1 //表示当前子元素尺寸所占的均分的份数。 }, { xtype: 'tbspacer' , //插入的空填充 flex: 3 }, { text: '中按钮' , scale: 'medium' }, { text: '大按钮' , width: 120, scale: 'large' , flex: 1 }] }); |
效果如下:
十、hbox
跟vbox类似,只不过变成了横向的。
[Js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
//hbox Ext.create( 'Ext.Panel' , { title: '容器面板' , renderTo: 'div10' , width: 400, height: 300, layout: { type: 'hbox' , pack: 'end' , align: 'middle' //对齐方式 top、middle、bottom:顶对齐、居中、底对齐;stretch:延伸;stretchmax:以最大的元素为标准延伸 }, defaults: { xtype: 'button' }, items: [{ text: '小按钮' },{ text: '中按钮' , scale: 'medium' }, { text: '大按钮' , width: 120, scale: 'large' }] }); |
效果如下:
ExtJs4 笔记(14) layout 布局的更多相关文章
- Android学习笔记(14):相对布局RelativeLayout
相对布局RelativeLayout,继承自ViewGroup.相对布局的子组件的位置总是相对于兄弟组件或者父容器决定的. RelativeLayout支持的XML属性: android:gravit ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- ExtJs4 笔记(4) Ext.XTemplate 模板
ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...
- Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)
[Android布局学习系列] 1.Android 布局学习之--Layout(布局)具体解释一 2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数) ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- 新建android工程的时候eclipse没有生成MainActivity和layout布局
一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...
- Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法
Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法 Ext.Net GridPanel可以进行Group操作,例如: 如何启用Grouping功能呢?只需要在Grid ...
- layout布局实例化
实例化xml中的Layout布局在开发中经常会用到,有几种方法可以使用 1.在Activity中使用getLayoutInflater()方法 View layout = getLayoutInfla ...
- ASP.NET MVC3 系列教程 – 新的Layout布局系统
原文地址:http://www.cnblogs.com/highend/archive/2011/04/18/asp_net_mvc3_layout.html I:回忆MVC2当中MasterPage ...
- WPF笔记(1.4 布局)——Hello,WPF!
原文:WPF笔记(1.4 布局)--Hello,WPF! 这一节只是第2章的引子.布局要使用Panel控件,有四种Panel,如下:DockPanel,就是设置停靠位置布局模型.StackPanel, ...
随机推荐
- CSS3动画处理浏览器内核时候前缀(兼容性)
Gecko内核 css前缀为"-moz-" 火狐浏览器 WebKit内核 css前缀为"-webkit-" Comodo Drangon(科摩多龙), ...
- Ajax原生写法
用太久JQuery了,别忘了Ajax原生是怎么写的 var Ajax = { get : function (url, callback) { var req = Ajax.getRequest(ca ...
- clang -rewrite-objc的使用点滴
➠更多技术干货请戳:听云博客 clang -rewrite-objc的作用是把oc代码转写成c/c++代码,我们常用它来窥探OC的一些秘密. 1.最简单的例子 main.m的代码如下: int mai ...
- Android启动模式launchMode
在Android里,有4种Activity的启动模式并分别介绍下: standard singleTop singleTask singleInstance AndroidManifest.xml配置 ...
- 关于Storyboard的使用
前言:说起来码龄很久似的,但是还是有很多基础的知识都不知道,比如下面介绍的关于Stroyboard的使用.(本篇博文随笔会不断补充关于Storyboard的使用技巧,持续更新) 目录: 1.使用Str ...
- [MySQL Reference Manual] 5 MySQL 服务管理
5. MySQL 服务管理 5. MySQL 服务管理 5.1 The Mysql Server 5.2 Mysql 服务日志 5.2.1 选择General query log和slow query ...
- 十五天精通WCF——第二天 告别烦恼的config配置
经常搞wcf的基友们肯定会知道,当你的应用程序有很多的“服务引用”的时候,是不是有一种疯狂的感觉...从一个环境迁移到另外一个环境,你需要改变的 endpoint会超级tmd的多,简直就是搞死了人.. ...
- Netty 异步的、事件驱动的网络应用程序框架和工具
Netty是由JBOSS提供的一个Java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 项目地址:https://githu ...
- 利用phpmyadmin修改mysql的root密码及如何进入修改密码后的phpmyadmin
1.利用phpmyadmin修改mysql的root密码 很多人利用phpmyadmin或者命令行来修改了mysql的root密码,重启后发现mysql登录错误,这是为什么呢?修改mysql的root ...
- 密码校验正则表达式(java 环境)
密码校验需求: 1) 密码控制只能输入字母.数字.特殊符号(~!@#$%^&*()_+[]{}|\;:'",./<>?)2) 长度 6-16 位,必须包括字母.数字.特殊 ...