Extjs学习笔记之七 布局


Posted in Javascript onJanuary 08, 2010

Extjs Layout Browser .

Extjs3.1.0 版本支持17种,下面挑一些重要的简要的说明一下,要看效果,去上面给的链接,不再贴图了。给Panel设置Layout的方法是一样的,就是设置Panel的Layout配置项。
1. AbsoluteLayout
可以通过Panel内部组件的决定位置来布局。通过x,y来指定。

示例用法:

new Ext.Panel({ 
layout: 'absolute', 
title: 'AbsuluteLayout', 
renderTo: document.body, 
frame: true, 
defaultType: 'textfield', 
width: 400, 
height:250, 
items: [{ 
x: 0, y: 5, 
xtype: 'label', 
text: 'Send To:' 
}, 
{ 
x: 60, y: 0, 
name: 'to' 
}, { 
x: 0, y: 35, 
xtype: 'label', 
text: 'Subject:' 
}, { 
x: 60, y: 30, 
name: 'subject' 
}, 
{ 
x: 0, y: 60, 
xtype: 'textarea', 
name: 'msg' 
}] 
});

2.AccordionLayout
Accordion的意思是手风琴,顾名思义,这种布局可以向手风琴那样,有的组件张开,有的闭合。这种效果作为侧边栏比较有用。

示例用法:

new Ext.Panel({ 
title: 'Accordion Layout', 
layout: 'accordion', 
renderTo: document.body, 
defaults: { // applied to each contained panel 
bodyStyle: 'padding:15px' 
}, 
layoutConfig: { 
// layout-specific configs go here titleCollapse: true, 
animate: true, 
activeOnTop: false 
}, 
items: [{ 
title: 'Panel 1', 
html: '<p>Panel content!</p>' 
}, { 
title: 'Panel 2', 
html: '<p>Panel content!</p>' 
}, { 
title: 'Panel 3', 
html: '<p>Panel content!</p>' 
}] 
}); 
});

3. AnchorLayout
这种Layout非常有用,尤其是在布局含有GridView这一类控件的页面的时候,AnchorLayout实际上类似于Winform的form默认的布局方式,不过它仅仅可以固定某一个组件距离页面边框(右边框和底边框)的距离(绝对的像素或者相对比例)。 通过anchor属性设置,anchor属性的设置API文档上解释的十分清楚,就直接摘抄过来了:

anchor : String

This configuation option is to be applied to child items of a container managed by this layout (ie. configured withlayout:'anchor').

This value is what tells the layout how an item should be anchored to the container. items added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). The following types of anchor values are supported:

Percentage : Any value between 1 and 100, expressed as a percentage.
The first anchor is the percentage width that the item should take up within the container, and the second is the percentage height. For example:

// two values specified
anchor: '100% 50%' // render item complete width of the container and
// 1/2 height of the container
// one value specified
anchor: '100%' // the width value; the height will default to autoOffsets : Any positive or negative integer value.
This is a raw adjustment where the first anchor is the offset from the right edge of the container, and the second is the offset from the bottom edge. For example:

// two values specified
anchor: '-50 -100' // render item the complete width of the container
// minus 50 pixels and
// the complete height minus 100 pixels.
// one value specified
anchor: '-50' // anchor value is assumed to be the right offset value
// bottom offset will default to 0Sides : Valid values are 'right' (or 'r') and 'bottom' (or 'b').
Either the container must have a fixed size or an anchorSize config value defined at render time in order for these to have any effect.

Mixed :
Anchor values can also be mixed as needed. For example, to render the width offset from the container right edge by 50 pixels and 75% of the container's height use:

anchor: '-50 75%'不过我将anchor的第一个属性也就是Offset设置成正数似乎没什么效果,虽然文档中说Offsets : Any positive or negative integer value.

示例用法:

new Ext.Panel({ 
layout: 'anchor', 
title:'anchor', 
renderTo: document.body, 
items: [{ 
title: 'Item 1', 
html: 'Content 1', 
width: 800, 
anchor: 'right 20%' 
}, { 
title: 'Item 2', 
html: 'Content 2', 
width: 300, 
anchor: '50% 30%' 
}, { 
title: 'Item 3', 
html: 'Content 3', 
width: 600, 
anchor:'-100 50%' 
}] 
});

4. BorderLayout
BorderLayout通过指定页面上的区域来布局,至少要有一个center区域,然后可以设置west,south,east,north区域,作为辅助的页面。通常适合大型页面的布局,中部为主要功能区,两侧,底部可以作为工具栏。
var myBorderPanel = new Ext.Panel({ 
renderTo: document.body, 
width: 700, 
height: 500, 
title: 'Border Layout', 
layout: 'border', 
items: [{ 
title: 'South Region is resizable', 
region: 'south', // position for region 
height: 100, 
split: true, // enable resizing 
minSize: 75, // defaults to 50 
maxSize: 150, 
margins: '0 5 5 5' 
}, { 
// xtype: 'panel' implied by default 
title: 'West Region is collapsible', 
region: 'west', 
margins: '5 0 0 5', 
width: 200, 
collapsible: true, // make collapsible 
cmargins: '5 5 0 5', // adjust top margin when collapsed 
id: 'west-region-container', 
layout: 'fit', 
unstyled: true 
}, { 
title: 'Center Region', 
region: 'center', // center region is required, no width/height specified 
xtype: 'container', 
layout: 'fit', 
margins: '5 5 0 0' 
}] 
});

5. ColumnLayout
ColumnLayout可以指定面板的宽度,用width指定的是像素,columnWidth指定百分比,必须是0-1之间的数字。也可以两者都用,都用的情况下,百分比是整个页面的宽度减去固定宽度的列剩余的宽度的百分比。

示例用法:

var p = new Ext.Panel({ 
title: 'Column Layout - Mixed', 
layout: 'column', 
renderTo: document.body, 
items: [{ 
title: 'Column 1', 
columnWidth: .3, 
html:'<div>Hello World</div>' 
}, { 
title: 'Column 2', 
html:'<div>Hello</div>', 
columnWidth: .6 
}, { 
title: 'Column 3', 
columnWidth: .1, 
html:'<div>Hello</div><div>Another Line</div>' 
}] 
});

这个用法是和API文档以及官方例子是一样的,但是这些列的宽度确不能随着浏览器大小的改变而改变,每次总要刷新一下才能重新适应新的浏览器宽度。但是官网的例子上确实可以随着浏览器的拖动内部的面板大小也跟着变化的。很奇怪。如果有朋友知道,请指点迷津下。

布局的用法都差不多,就不再继续写下去了。关键是在实际应用中灵活选用。

Javascript 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
IE6下JS动态设置图片src地址问题
Jan 08 #Javascript
Javascript 中的类和闭包
Jan 08 #Javascript
Extjs学习笔记之六 面版
Jan 08 #Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 #Javascript
javascript new一个对象的实质
Jan 07 #Javascript
IE iframe的onload方法分析小结
Jan 07 #Javascript
判断iframe是否加载完成的完美方法
Jan 07 #Javascript
You might like
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python调用C语言的实现
2019/07/26 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
国贸专业的职业规划范文
2014/01/23 职场文书
审计主管岗位职责
2014/01/31 职场文书
车辆年检委托书范本
2014/10/14 职场文书
学籍证明模板
2014/11/21 职场文书
安阳殷墟导游词
2015/02/10 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
OpenCV实现普通阈值
2021/11/17 Java/Android
Java 写一个简单的图书管理系统
2022/04/26 Java/Android