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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
Python 正则表达式实现计算器功能
2017/04/29 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
PyTorch-GPU加速实例
2020/06/23 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
大学生军训自我评价分享
2013/11/09 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
班级心理活动总结
2014/07/04 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
2015年团支部工作总结
2015/04/03 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server