深入浅出ExtJS 第六章 布局

6.1 布局的用途
//决定把什么东西放到什么位置;
var vieport = new Ext.Viewport({
layout:'border', //使用BorderLayout的布局方式(边界布局);可以自动检测浏览器的大小变化和自动调整布局中每个部分的大小;
items:[{
region:'north', //指定组件的具体位置;
height:40,
html:'<h1>顶部</h1>'
},{
region:'west',
width:100,
html:'<p>左侧区域</p>'
},{
region:'center',
html:'主要内容'
}]
});
//Ext的所有布局都是从Ext.Container开始的,Ext.Container的父类是Ext.BoxComponent;
//Ext.BoxComponent是一个盒子组件,可以定义宽度/高度和位置等; //Ext.Container及其子类
>.Ext.Container //Ext.Container的子类都可以用layout对内部的items进行布局;
>.Ext.Viewport
>.Ext.Panel
>.Ext.TabPanel
>.Ext.Tip
>.Ext.Window
>.Ext.form.FieldSet
>.Ext.form.FormPanel
>.Ext.tree.TreePanel
>.Ext.grid.GridPanel
>.Ext.grid.EditorGridPanel
>.Ext.grid.PropertyGrid //所有布局类也有一个共同的超类Ext.layout.ContainerLayout
//凡是该超类的子类都可以对Ext.Container及其子类进行布局定义;
>.Ext.layout.ContainerLayout //容器布局
>.Ext.layout.AnchorLayout //锚点布局
>.Ext.layout.AbsoluteLayout //绝对定位布局
>.Ext.layout.FormLayout //表单布局
>.Ext.layout.BorderLayout //边框布局
>.Ext.layout.ColumnLayout //分列布局
>.Ext.layout.FitLayout //自适应布局
>.Ext.layout.Accordion //折叠布局
>.Ext.layout.CardLayout //卡片布局
>.Ext.layout.TableLayout //表格布局

6.2 最简单的布局--FitLayout
//自动适应页面大小
Ext.onReady(function(){
var store = new Ext.data.ArrayStore({
fields:['id','name','desc'],
data:[['1','name1','desc1']] //数据存储器;
}); var grid = new Ext.grid.GridPanel({ //创建带数据的表格;
title:'grid',
viewConfig:{forceFit:true},
store:store,
columns:[
{header:'id',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desc'}
],
tbar:new Ext.Toolbar(['添加','修改','删除']),
bbar:new Ext.PagingToolbar({
pageSize:15,
store:store
})
}); var viewport = new Ext.Viewport({
layout:'fit', //指向自适应布局;
items:[grid] //将表格引入布局;
});
});

6.3 常用的边框布局--BorderLayout
//FitLayout每次只能使用一个子组件;而现实中我们使用最多的是Ext.layout.BorderLayout布局;
var viewport = new Ext.Viewport({
layout:'border', //指向为BorderLayout布局;
items:[
{region:'north',html:'north',height:120}, //region:指定组件的位置;html:组件内容;
{region:'south',html:'south',height:30},
{region:'west',html:'west',width:40},
{region:'east',html:'east',width:100},
{region:'center',html:'center'} //center的大小是其他4个部分设置好之后计算出来的;不可以省略;
]
}); 6.3.1 设置子区域的大小
//可以直接设置north与south的高度和west与east的宽度; 6.3.2 使用split并限制它的的范围
//使用split参数,用户可以自行拖放来改变某一个区域的大小;
//使用minSize和maxSize将限制用户拖放的范围;
var viewport = new Ext.Viewport({
layout:'border',
items:[
{region:'north',html:'north',split:true}, //顶部可以上下拖动改变大小;
{region:'west',html:'west',width:100,split:true,minSize:80,maxSize:120},
//左侧可以左右拖动改变大小; 但宽度的范围在80~120之间;
{region:'center',html:'center'}
]
}); 6.3.3 子区域的展开和折叠--collapsible
//属性collapsible:true;这个属性激活了区域折叠功能;
//title:'west';折叠区域的标题;必须跟collapsible一起设置;
items:[
{region:'north',html:'north',heith:100,title:'顶部',collapsible:true},
...
]

6.4 制作伸缩菜单布局--Accordion(折叠布局)
//BorderLayout布局下嵌套的Accordion布局;
var viewport = new Ext.Viewport({
layout:'border', //第一层是BorderLayout布局;
items:[{
region:'west', //子组件左侧区域;
width:200,
layout:'accordion', //子组件是Accordion(折叠)布局;
split:true,
layoutConfig:{ //布局配置信息;
titleCollapse:true, //点击标题也可折叠;
animate:true, //折叠动画;
activeOnTop:false //打开的组件是否置顶;
},
items:[{ //孙组件;折叠布局;
title:'第一栏',
html:'第一栏'
},{
title:'第二栏',
html:'第二栏'
}]
},{
region:'center', //子组件center区域;
html:'center区域'
}]
});

6.5 实现操作向导的布局--CardLayout
//为CardLayout配置几个子面板,每次只显示其中一个;
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'wizard',
width:200,
title:'xx向导',
layout:'card',
activeItem:0,
bodyStyle:'padding:15px',
defaults:{
border:false
},
bbar:[{
id:'move-prev',
text:'上一步',
handler:function(){
navHandler(-1);
},
disabled:true
},'->',{
id:'move-next',
text:'下一步',
handler:function(){
navHandler(1);
},
}],
items:[{
id:'card-0',
html:'<h1>欢迎使用向导</h1><p>1/3</p>'
},{
id:'card-1',
html:'<p>2/3</p>'
},{
id:'card-2',
html:'<p>完成</p>'
}]
},{
region:'center',
split:true,
border:true
}]
});
//设置navHandler函数 (带注释!)
var navHandler = function(direction){
var wizard = Ext.getCmp('wizard').layout;
var prev = Ext.getCmp('move-prev');
var next = Ext.getCmp('move-next');
var activedId = wizard.activeItem.id;
if(activeId == 'card-0'){
if(direction == 1){
wizard.setActiveItem(1);
prev.setDisabled(false);
}
}else if(activeId == 'card-1'){
if(direction == -1){
wizard.setActiveItem(0);
prev.setDisabled(true);
}else{
wizard.setActiveItem(2);
next.setDisabled(true);
}
}else if(activeId == 'card-2'){
if(direction == -1){
wizard.setActiveItem(1);
next.setDisabled(false);
}
}
};

6.6 控制位置和大小的布局--AnchorLayout和AbsolluteLayout
//AnchorLayout提供了灵活的布局方式,既可以为items中的每个组件指定与总体布局大小的差值;也可以设置一个比例使子组件可以根据整体自行计算本身的大小;
>1.使用百分比进行配置
//设置某一个子组件占整体长和宽的百分比;
var viewport = new Ext.Viewport({
layout:'anchor', //设置接下来的子组件都为AnchorLayout布局;
items:[{
title:'panel1',
html:'panel1',
anchor:'50% 50%' //panel1组件占总体宽度的50%和高度的50%;
},{
title:'panel2',
html:'panel2',
anchor:'80%' //panel2组件占总体宽度的80%,高度自适应;
}]
});
>2.设置与右侧和底部的边距;
var viewport = new Ext.Viewport({
layout:'anchor',
items:[{
title:'panel1',
html:'panel1',
anchor:'-50 -200' //组件与右侧和底部的相对(绝对)距离;
},{
title:'panel2',
html:'panel2',
anchor:'-100' //组件与右侧的距离;
}]
});
>3.side布局;
//在设置父组件和布局内部子组件都设置好width/height和anchorSize属性的前提下;AnchorLayout会记录布局整体与子组件在大小上的差值,为以后调整布局提供依据;
var viewport = new Ext.Viewport({
layout:'anchor',
anchorSize:{width:400,height:300},
//这是一个包含宽度和高度信息的JSON对象;以此作为以后计算差值的基准;
items:[{
title:'panel1',
html:'panel1',
width:200,
height:100,
anchor:'r b'
},{
title:'panel2',
html:'panel2',
width:100,
height:200,
anchor:'r b'
}]
});
//AnchorLayout首先获得父组件的宽度/高度,以及每个子组件的宽度/高度,然后将子组件与父组件的宽度/高度之差分别保存起来;根据改变后父组件的大小,计算出子组件当前的宽度和高度;
>4.同时使用百分比和边距
var viewport = new Ext.Viewport({
layout:'anchor',
items:[{
title:'panel1',
html:'panel1',
anchor:'-100 40%' //组件距右侧100px不变,高度是整体的40%;
},{
title:'panel2',
html:'panel2',
anchor:'-200 60%' //同上;
}]
});
>5.利用AbsoluteLayout进行绝对定位
//AbsoluteLayout是AnchorLayout的一个子类;继承了AnchorLayout的所有特性;
//AnchorLayout布局下的子组件都是自上而下竖直排列的;而AbsoluteLayout正是可以解决这个问题;
var viewport = new Ext.Viewport({
layout:'absolute',
//以下组件进行绝对定位;并使用AnchorLayout确定每个组件的相对大小;
items:[{
title:'panel1',
html:'panel1',
x:50, //子组件左上角距父组件的距离;
y:0,
anchor:'-200 40%' //子组件相对于父组件的大小;
}]
});

6.7 表单专用的布局--FormLayout
var viewport = new Ext.Viewport({
layout:'fit', //组件自适应填满布局;
items:[{
xtype:'form',
title:'信息',
labelAlign:'right', //控件标签右对齐;
labelWidth:50, //控件宽度;
frame:true, //圆角;
defaultType:'textfield',//以下组件为文本框控件;
items:[{
fieldLabel:'名称',
name:'name',
anchor:'90%' //占整体90%的空间;
},{
fieldLabel:'生日',
name:'birthday',
xtype:'datefield', //日期控件;
anchor:'90%'
},{
fieldLabel:'备注',
name:'desc',
xtype:'textarea', //多行文本控件;
anchor:'90% -100' //占整体90%;并且距离底部100px;
}]
}]
});

6.8 分列布局--ColumnLayout
//ColumnLayout是将整个容器进行竖直切分的布局方式;
>1.使用ColumnLayout实现简单布局
var viewport = new Ext.Viewport({
layout:'column', //分列布局;
items:[{
title:'Column1',
columnWidth:.25
},{
title:'Column2',
columnWidth:.4
},{
title:'Column3',
columnWidth:.35
}]
});
>2.使用columnWidth平分剩余的宽度
var view = new Ext.Viewport({
layout:'column',
items:[{
title:'1',
width:20 //组件一宽度不变;
},{
title:'2',
columnWidth:.7 //宽度为剩下的70%;
},{
title:'3',
columnWidth:.3
}]
});

6.9 表格状布局--TableLayout
var view = new Ext.Viewport({
layout:'fit',
items:[{
title:'Table Layout',
layout:'table',//表格布局;
default:{
bodyStyle:'padding:20px'
},
layoutConfig:{
columns:3
},
items:[{
html:'<p>A</p>',
rowspan:2 //合并的行数;
},{
html:'<p>B</p>',
colspan:2 //合并的列数;
},{
html:'<p>C</p>',
cellId:'haha' //设置单元格ID;
},{
html:'<p>D</p>'
}]
}]
});

6.10 BoxLayout--HBox
//横排一行多个组件;
var panel = new Ext.Panel({
title:'HBox',
width:400,
height:200,
renderTo:'grid',
layout:{
type:'hbox', //指定当前的Panel使用HBox布局方式;
padding:'5',
align:'stretch' //为组件设置统一的对齐方式;自动充满外部容器的大小;
},
defaults:{margins:'0 0 5 0 '},
items:[{
xtype:'button', //按钮组件;
text:'Button1',
flex:1
},{
xtype:'button',
text:'Button2',
flex:3 //值越大,对应的组件占据的空间越大;
}]
});

6.11 BoxLayout--VBox
//竖排一列多个组件;
var panel = new Ext.Panel({
..
layout:{
type:'vbox', //指定当前的Panel使用HBox布局方式;
padding:'5',
align:'stretch'
},
items:[...]
});

6.12 Ext.TabPanel
//Tab布局组件
>1.普通Tab
var tabs = new Ext.TabPanel({ //创建TabPanel对象;
renderTo:document.body, //渲染到指定位置;
height:100
});
//任意组件直接使用add()函数便可添加到Ext.TabPanel中;
tabs.add({ //若不特别指定xtype,就会默认使用Ext.Panel为这些内容生成子面板;
id:Ext.id(), //使用Ext.id()函数生成唯一的id值;
title:'标题2',
html:'内容2',
closable:true //生成的标签受否可以手动关闭;
});
tabs.activate(0); //让指定的标签变成激活状态;参数是标签的索引值; >2.添加创建的Tab按钮
//添加两个按钮,用于新建包含表格的标签和包含Panel的标签
var tabs = new Ext.TabPanel({
height:200,
renderTo:'tab',
enableTabScroll:true
});
tabs.add({
title:'标题一',
html:'内容一',
closable:true
});
tabs.setActiveTab(0); var addGrid = new Ext.Button({ //创建按钮;
text:'添加一个grid',
renderTo:'add-grid',
handler:function(){ //"新建"按钮回调函数;
var id = Ext.id();
//创建表格↓↓↓↓↓↓↓↓↓↓↓↓↓↓
var grid = new Ext.grid.GridPanel({
store:new Ext.data.SimpleStore({
fields:['id','name'],
data:[
['1','name1'],
['2','name2'],
]
}),
columns:[
{header:'序号',dataIndex:'id'},
{header:'名称',dataIndex:'name'}
]
});
//将表格组件放入到tabs里↓↓↓↓
var tab = tabs.add({
title:'表格'+id,
closable:true,
layout:'fit',
items:[grid]
});
//激活当前的tab标签↓↓↓↓
tabs.setActiveTab(tab);
}
}); var addPanel = new Ext.Button({
text:'添加一个panel',
renderTo:'add-panel',
handler:function(){
var id = Ext.id();
var panel = new Ext.Panel({ //创建Panel标签;
html:'创建Panel标签成功'
});
var tab2 = tabs.add({
title:'Panel'+id,
closable:true,
layout:'fit',
items:[panel]
});
tabs.setActiveTab(tab2);
}
}); >3.执行从后台得到的HTML(包含JS脚本)
tabs.add({
title:'从后台获取内容',
autoLoad:{url:'xxx.html',scripts:true}
//autoLoad:创建后自动执行;默认是延迟加载的;
//scripts:执行得到的HTML里的脚本;
}) 6.12.1 标签面板的滚动菜单
//TabPanel的组件,可以在标签过多的时候显示一个下拉菜单;
//需引入tabs下的TabScrollMenu.js和TabScrollMenu.css;
var scrollerMenu = new Ext.ux.TabScrollerMenu({
maxText:15,
pageSize:5
});
var tabs = new Ext.TabPanel({
width:400,
height:200,
activeTab:0,
enableTabScroll:true,
resizeTabs:true,
minTabWidth:75,
frame:true,
plugins:[srcrooerMenu], //标签过多时显示下拉菜单;
items:[{title:'第一个tab'}],
renderTo:'tabs'
});

6.13 与布局相关的知识
6.13.1 超类Ext.Container的公共配置与xtype的概念
>1.Ext.Container是所有可布局组件的超类;只要继承它的子类都可以对自身进行布局;
>2.主要参数:
>.layout(组件布局方式);
>.items(包含的子组件);
>3.与上面对应的还有两个参数:
>.layoutConfig:为布局提供特定的配置参数;
//在实例化过程中当前类会把自身的layoutConfig参数赋予layout对象并进行配置;
>.activeItem:表示当前显示哪一个子组件;
4.defaultType参数
>.当子组件没有指定xtype参数时,就会使用上级组建中设置的defaultType来作为自身的xtype;
//默认情况下是defaultType:'panel',也就是在items中创建的每个子组件都是Ext.Panel的实例;
//若需要其他类型的组件,直接替换成对应的类型的值即可;
5.xtype
//在Ext中,xtype:'grid'和new Ext.grid.GridPanel()是等价的;
items:[{
xtype:'grid',
store:store,
columns:columns
}]
//整体布局时,使用xtype更方便,结构也更清晰;
items:[new Ext.grid.GridPanel({
store:store,
columns:columns
})]
//创建实例的方式更适用于需要对某一部分进行详细配置的情况; 6.13.2 layout的超类Ext.layout.ContainerLayout
//当layout:'auto'时,就表示将使用Ext.layout.ContainerLayout的布局; 6.13.3 不指定任何布局时会发生的情况
>.组件默认使用的布局类型
Ext.Container Ext.layout.ContainerLayout
Ext.Viewport Ext.layout.ContainerLayout
Ext.Panel Ext.layout.ContainerLayout
Ext.TabPanel Ext.layout.CardLayout
Ext.Tip Ext.layout.ContainerLayout
Ext.Window Ext.layout.ContainerLayout
Ext.form.FieldSet Ext.layout.FormPanel
Ext.form.FormPanel Ext.layout.FormPanel
Ext.tree.TreePanel Ext.layout.ContainerLayout
Ext.grid.GridPanel Ext.layout.ContainerLayout
Ext.grid.EditorGridPanel Ext.layout.ContainerLayout
Ext.grid.PropertyPanel Ext.layout.ContainerLayout 6.13.4 使用Viewport对整个页面进行布局
//以上示例中,都是用Ext.Viewport对整个页面进行统一布局;
//实际上,Viewport只是一个用于整页布局的快捷工具类;
//多个Viewport之间会冲突; 6.13.5 使用嵌套实现复杂布局
Ext.onReady(function(){ //表格配置
var columns = [
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
];
var data = [
['1','name1','descn1'],
['2','name2','descn2']
];
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'},
{name:'name'},
{name:'descn'}
]
});
store.load();
var grid = new Ext.grid.GridPanel({
store:store,
columns:columns,
title:'center-north',
region:'north' //此表格会在Panel布局的上方;
}); //树形配置
var tree = new Ext.tree.TreePanel({
store:new Ext.data.TreeStore({
proxy:{
type:'ajax',
url:'xxx.html'
},
root:{
expand:true,
text:'我是根'
}
}),
title:'west',
region:'west', //此树形组件会在Panel布局的左侧;
split:true,
border:true,
collapsible:true,
width:120,
minSize:80,
maxSize:200
}); //表单配置
var form = new Ext.form.FormPanel({
defaultType:'textfield',
labelAlign:'right',
title:'form',
labelWidth:50,
frame:true,
width:220,
title:'center-center',
region:'center', //此表单组件会在Panel布局的中间;
items:[{
fieldLabel:'文本框',
anchor:'90%'
}],
button:[{
text:'按钮'
}]
}); //布局开始
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'north',
contentEl:'north-div', //上布局为id='north-div'的DIV;通过contentEl来指定HTML中显示的内容;
heith:80,
bodyStyle:'background-color:#BBCCEE;'
},{
region:'south', //下布局为id='south-div'的DIV
contentEl:'south-div',
height:20,
bodyStyle:'background-color:#BBCCEE;'
},tree,{ //左侧布局;树形;
region:'center', //中间布局;
split:true,
border:true,
layout:'border', //中间区域使用边界布局;
items:[gird,form] //将准备好的表格和表单引入中间布局区域;
}]
});
});
<div id='north-div'>标题栏:viewport加panel实现复杂布局</div>
<div id='south-div'>状态栏:Copyright by www.xxx.com</div> //这个Viewport中的每个子组件都是Panel类型;而Panel包含:TreePanel/GridPanel/FormPanel
//所以Panel的配置参数它们也都可以用;
//在任何一个Panel里设置layout:'border',就可以将它再次分成5各区域;并用region参数指定各自所在位置;
Viewport Panel
north:north-div;
south:south-div;
west:tree;
center:Panel;
north:grid;
center:form;