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 相关文章推荐
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Numpy掩码式数组详解
2018/04/17 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
C++的几个面试题附答案
2016/08/03 面试题
销售会计工作职责
2013/12/02 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
小学生家长评语集锦
2014/01/30 职场文书
九年级数学教学反思
2014/02/02 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
Python实现Hash算法
2022/03/18 Python