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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
js 自定义个性下拉选择框示例
2013/08/20 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
5款非常棒的Python工具
2018/01/05 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
django框架中间件原理与用法详解
2019/12/10 Python
通过cmd进入python的步骤
2020/06/16 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
党员民主评议总结
2014/10/20 职场文书
初中成绩单评语
2014/12/29 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
python获取对象信息的实例详解
2021/07/07 Python
详解redis在微服务领域的贡献
2021/10/16 Redis
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js