ext页面布局总结.docx
《ext页面布局总结.docx》由会员分享,可在线阅读,更多相关《ext页面布局总结.docx(25页珍藏版)》请在冰豆网上搜索。
ext页面布局总结
EXT标准布局类
extjs2009-11-0715:
48:
08阅读833评论0 字号:
大中小 订阅
面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上。
ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种:
ContainerLayout(容器布局)
FitLayout(自适应布局)
AccordionLayout(折叠布局)
CardLayout(卡片式布局)
AnchorLayout(锚点布局)
AbsoluteLayout(绝对位置布局)
FormLayout(表单布局)
ColumnLayout(列布局)
TableLayout(表格布局)
BorderLayout(边框布局)
接下来分别介绍这10种布局类的特点及使用方式。
1 ContainerLayout容器布局
Ext.layout.ContainerLayout提供了所有布局类的基本功能,它没有可视化的外观,只是提供容器作为布局的基本逻辑,这个类通常被扩展而不通过new关键字直接创建。
如果面板(panel)没有指定任何布局类,则它将会作为默认布局来创建,表5-4是主要配置项。
表5-4 Ext.layout.ContainerLayout主要配置项目表
配置项
参数类型
说明
activeItem
String/Number
一个对当前活动组件的引用。
activeItem只在那些一次只能显示一个items项目的布局中生效,例如:
Ext.layout.Accordion、Ext.layout.CardLayout、Ext.layout.FitLayout
2 FitLayout自适应布局
Ext.layout.FitLayout是布局的基础类,对应面板布局配置项(layout)的名称为fit,使用fit布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有第一个会被显示。
注意:
在本节的示例之前会简单的介绍新概念,组件的xtype类型。
xtype类型相当于组件的别名,通过使用xtype类型可以实现组件的延时创建。
在后续的示例中会大量使用xtype来创建组件,这将有利于读者形成使用xtype的习惯,而减少new关键字的使用。
下面是自适应布局的一个简单的示例。
代码5-7:
FitLayout(自适应布局)示例
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';
varpanel=newExt.Panel({
layout:
'fit',
title:
'Ext.layout.FitLayout布局示例',
frame:
true, //渲染面板
height:
150,
width:
250,
applyTo:
'panel',
defaults:
{ //设置默认属性
bodyStyle:
'background-color:
#FFFFFF' //设置面板体的背景色
},
//面板items配置项默认的xtype类型为panel,该默认值可以通过defaultType配置项进行更改
items:
[
{
title:
'嵌套面板一',
html:
'面板一'
},
{
title:
'嵌套面板二',
html:
'面板二'
}
]
})
});
在代码5-7中共为外层面板添加了2个子面板,title分别是“嵌套面板一”和“嵌套面板二”,并指定外层面板的布局类型为fit,由图5-11可以看到“嵌套面板一”充满了整个外层面板,而“嵌套面板二”并没有显示出来。
运行效果如图5-11所示。
图5-11 Ext.layout.FitLayout布局示例
3 AccordionLayout折叠布局
Ext.layout.Accordion扩展自Ext.layout.FitLayout布局,对应面板布局(layout)配置项的名称为accordion。
该布局会包含多个子面板,任何时候都只有一个子面板处于打开状态,每个子面板都内置了对展开和收缩功能的支持。
表5-5列出了它的主要配置项目。
表5-5 Ext.layout.Accordion主要配置项目表
配置项
参数类型
说明
activeOnTop
Boolean
是否保持展开的子面板处于父面板的顶端,true则交换当前展开面板到顶端,false则保持原来的位置不动。
animate
Boolean
设置在展开或收缩子面板时是否使用滑动方式,true则采用滑动方式,默认为false。
fill
Boolean
设置子面板是否自动调整高度充满父面板的剩余空间,true则充满,默认为true。
hideCollapse
Tool
Boolean
设置是否隐藏子面板的“展开收缩”按钮,true表示隐藏,false表示显示,默认为false。
如果设置为true,则应使titleCollapse配置项也为true。
titleCollapse
Boolean
设置是否允许通过点击子面板的标题来展开或收缩面板,true表示允许,默认为true。
下面是折叠布局的一个简单的示例。
代码5-8:
AccordionLayout(折叠布局)示例
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';
varpanel=newExt.Panel({
layout:
'accordion',
layoutConfig:
{
activeOnTop:
true, //设置打开的子面板置顶
fill:
true, //子面板充满父面板的剩余空间
hideCollapseTool:
false, //显示“展开收缩”按钮
titleCollapse:
true, //允许通过点击子面板的标题来展开或收缩面板
animate:
true //使用动画效果
},
title:
'Ext.layout.Accordion布局示例',
frame:
true, //渲染面板
height:
150,
width:
250,
applyTo:
'panel',
defaults:
{ //设置默认属性
bodyStyle:
'background-color:
#FFFFFF;padding:
15px'
//设置面板体的背景色
},
items:
[
{
title:
'嵌套面板一',
html:
'说明一'
},
{
title:
'嵌套面板二',
html:
'说明二'
},
{
title:
'嵌套面板三',
html:
'说明三'
}
]
})
});
代码5-8所示Accordion布局可以在多个不同的子面板之间切换,适合于表现大量的分组内容或制作可以伸展的分组菜单,在开发中使用较多的布局类,效果如图5-12~5-13所示。
4 CardLayout卡片式布局
Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局,对应面板布局(layout)配置项的名称为card。
该布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,这种布局类经常用来制作向导和标签页。
该布局的重点方式是setActiveItem,因为一次只能显示一个子面板,所以切换子面板的唯一途径就是调用setActiveItem方法,它接受一个子面板id或索引作为参数。
CardLayout布局并没有提供一个子面板的导航机制,导航逻辑需要开发人员自己实现。
Ext.layout.CardLayout主要方法如表5-6所示。
表5-6 Ext.layout.CardLayout主要方法表
方法名
说明
setActiveItem(
String/Numberitem):
void
根据子面板
id
或索引切换当前显示的子面板
下面是卡片式布局的一个简单的示例。
代码5-9:
CardLayout(卡片式布局)示例
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';
varpanel=newExt.Panel({
layout:
'card',
activeItem:
0, //设置默认显示第一个子面板
title:
'Ext.layout.CardLayout布局示例',
frame:
true, //渲染面板
height:
150,
width:
250,
applyTo:
'panel',
defaults:
{ //设置默认属性
bodyStyle:
'background-color:
#FFFFFF;padding:
15px'//设置面板体的背景色
},
items:
[
{
title:
'嵌套面板一',
html:
'说明一',
id:
'p1'
},
{
title:
'嵌套面板二',
html:
'说明二',
id:
'p2'
}
,
{
title:
'嵌套面板三',
html:
'说明三',
id:
'p3'
}
],
buttons:
[
{
text:
'上一页',
handler:
changePage
},
{
text:
'下一页',
handler:
changePage
}
]
})
//切换子面板
functionchangePage(btn){
varindex=Number(panel.layout.activeItem.id.substring
(1));
if(btn.text=='上一页'){
index-=1;
if(index<1){
index=1;
}
}else{
index+=1;
if(index>3){
index=3;
}
}
panel.layout.setActiveItem('p'+index);
}
});
代码5-9演示了CardLayout卡片式布局的使用方式,这里的重点是调用面板布局的setActiveItem方法激活指定id的子面板进行显示,其中changePage函数的用途是计算点击上一页或下一页之后将要显示的子面板id,然后将该id传入到setActiveItem方法中实现子面板的切换。
运行效果如图5-14~5-15所示。
5 AnchorLayout锚点布局
Ext.layout.AnchorLayout是根据容器大小为其所包含的子面板进行定位的布局,对应面板布局(layout)配置项的名称为anchor。
如果容器大小发生变化,所有子面板的位置都会根据规则重新计算,并自动渲染。
使用anchor布局需要注意以下配置项的使用。
anchorSize(父容器提供)
anchor布局提供了anchorSize配置项用来设置虚拟容器的大小,默认情况下anchor布局是根据容器自身的大小来进行计算定位的,如果提供了anchorSize属性则anchor布局就会根据该尺寸生成一个虚拟容器,然后根据这个虚拟容器的大小来进行计算定位。
anchor(子容器提供)
加入到使用anchor布局面板中的子面板也都支持一个anchor配置项,它是一个包含2个值的字符串,水平值和垂直值,例如:
'100%50%',这个值告知父容器应该怎样为加入到其中的子面板进行定位,有效值包括如下3类。
百分比(Percentage):
1-100之间的任意百分比,第1项数值表示子面板占父容器宽度的百分比,第2项数值表示子面板占父容器宽高的百分比,例如'100%50%'表示,子面板宽度为父容器的100%,而高度为父容器的1/2,如果只提供一个值(如:
'50%')则只对子面板的宽度生效,高度保持默认值。
偏移值(Offsets):
任意整数,可以为正数也可以是负数,第1项数值表示子面板到父容器右边缘的偏移量,第2项数值表示子面板到父容器下边缘的偏移量,例如'-50-100'表示,子面板距父容器的右边缘偏移50像素,即子面板的宽度为父容器的宽度减去50像素;子面板距父容器的下边缘偏移100像素,即子面板高度为父容器的高度减去100像素。
如果只提供一个值(如:
'-50')则只对子面板的宽度生效,高度保持默认值。
参考边(Sides):
有效的值包括'right'(或'r')和'bottom'(或'b')。
要求容器设置固定的大小或提供相应的anchorSize配置项才会有正确的效果,例如'rb',说明父容器会计算与子容器宽度和高度的差值,然后按父容器体(body)的实际宽度和高度减去这个差值,重新为子面板定位。
以上3种赋值类型可以组合使用,例如'-5075%',下面将分别针对这3种情况举例说明。
1. 百分比(Percentage)定位
在代码5-10中创建一个使用百分比方式为子面板进行定位的示例,从示例中可以清晰的体会到百分比定位的特点。
代码5-10:
百分比(Percentage)定位示例
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';
varpanel=newExt.Panel({
layout:
'anchor',
title:
'Ext.layout.AnchorLayout布局示例',
frame:
false, //渲染面板
height:
150,
width:
300,
applyTo:
'panel',
defaults:
{ //设置默认属性
bodyStyle:
'background-color:
#FFFFFF;padding:
15px'//设置面板体的背景色
},
items:
[
{
anchor:
'50%50%', //设置子面板的宽高为父面板的50%
title:
'子面板'
}
]
})
});
代码5-10演示了百分比(Percentage)定位的使用方式,其中anchor:
'50%50%'决定了子面板的高度和宽度都为父面板的50%。
运行效果如图5-16所示。
图5-16 Ext.layout.AnchorLayout布局示例(百分比定位)
2. 偏移值(Offsets)定位
在代码5-11中创建一个使用偏移值为子面板进行定位的示例,从示例中可以清晰的体会到偏移值定位的特点。
代码5-11:
偏移值(Offsets)定位示例
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';
varpanel=newExt.Panel({
layout:
'anchor',
title:
'Ext.layout.AnchorLayout布局示例',
frame:
false,//渲染面板
height:
150,
width:
300,
applyTo:
'panel',
defaults:
{//设置默认属性
bodyStyle:
'background-color:
#FFFFFF;padding:
15px'//设置面板体的背景色
},
items:
[
{
anchor:
'-10-10', //设置子面板的宽高偏移父面板10像素
title:
'子面板'
}
]
})
});
代码5-11演示了偏移值(Offsets)定位的使用方式,其中anchor:
'-10-10',决定了子面板到父面板的右边和下边都为10像素。
运行效果如图5-17所示。
图5-17 Ext.layout.AnchorLayout布局示例(偏移值定位)
3. 参考边(Sides)定位
在代码5-12中创建一个使用参考边为子面板进行定位的示例,从示例中可以清晰的体会到参考边定位的特点。
代码5-12:
参考边(Sides)定位示例
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';
varpanel=newExt.Panel({
layout:
'anchor',
title:
'Ext.layout.AnchorLayout布局示例',
autoScroll:
true,//自动显示滚动条
frame:
false,//渲染面板
height:
150,
width:
300,
applyTo:
'panel',
defaults:
{//设置默认属性
bodyStyle:
'background-color:
#FFFFFF;padding:
15px'//设置面板体的背景色
},
items:
[
{
anchor:
'rb', //相对于父容器的右边和底边的差值进行定位
width:
200,
height:
100,
title:
'子面板'
}
]
})
});
代码5-12演示了参考边(Sides)定位的使用方式,其中anchor:
'rb',,决定了子面板将相对于父面板的右边和底边的差值进行定位。
运行效果如图5-18所示。
图5-18 Ext.layout.AnchorLayout布局示例(参考边定位)
在代码5-12中使用参考边为子面板进行定位,下面给出了计算过程的简要说明:
宽度计算:
父容器体(body)宽度为=298(说明:
300减去左右两条边的宽度)
宽度差值为= 100(说明:
父容器体(body)宽度300–子容器宽度200)
计算后的子容器宽度为=198(说明:
298-100)
高度计算:
父容器体(body)高度为=123(说明:
150减去上下两条边的宽度和header的高度)
高度差值为 = 50(说明:
父容器高度150–子容器高度100)
计算后的子容器高度为= 73(说明:
123-50)
6 AbsoluteLayout绝对位置布局
Ext.layout.AbsoluteLayout扩展自Ext.layout.AnchorLayout布局,对应面板布局(layout)配置项的名称为absolute。
它可以根据子面板中配置的x/y坐标进行定位,并且坐标值支持使用固定值和百分比两种形式。
下面是绝对位置布局的简单的示例。
代码5-13:
AbsoluteLayout绝对位置布局示例
Ext.onReady(function(){
Ext.BLANK_