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 相关文章推荐
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
浅谈javascript回调函数
Dec 07 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
js实现全选和全不选
Jul 28 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
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
简单了解python列表和元组的区别
2020/05/14 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
数控技术专业推荐信
2013/11/01 职场文书
护士自我介绍信
2014/01/13 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Python正则表达式中flags参数的实例详解
2022/04/01 Python
MySQL创建管理子分区
2022/04/13 MySQL
python中filter,map,reduce的作用
2022/06/10 Python