ExtJS面板与布局
本例演示版为ext-4.2.1
面板（Panel）
ExtJS不但在Web开发中成功引入了丰富的组件，也引入了桌面程序中常用到的面板和布局概念。这些概念的引入在很大程度上改变了传统的Web开发方式。
面板（panel）是ExtJS中一个很重要的概念，它相当于一幅画板，我们可以在它的上面放置需要的各种组件，并使用不同的布局类对组件的摆放位置进行格式化，掌握这些布局类的特点及使用方式是突波ExtJS页面设计的关键。我们可以在面板中随意地排版布局，面板在ExtJS中起着页面骨架的作用，所以学习面板是学习ExtJS页面布局的基础和起点。ExtJS面板共支持10中不同风格的布局样式，并且允许无限制的进行嵌套。
Ext.panel.Panel扩展自Ext.container.Container，它可以应用布局（默认为Auto），也可以作为各种组件的容器，并且可以扩展出功能更加强大的面板。作为标准的面板组件主要包括如下5部分：底部工具栏（buttom toolbars）、顶部工具栏（top toolbars）、面板头部（header）、面板底部（footer）和面板体（body），面板组件还内置了折叠、展开和关闭功能。
Ext.panel.Panel示例
Ext.onReady(function(){
// Ext.panel.Panel示例 标准面板的创建演示
Ext.create('Ext.panel.Panel',{
title:'面板顶部（header）',
tbar:['顶部工具栏（top toolbars）'],
bbar:['底端工具栏（bottom toolbars）'],
height:200,
width:300,
frame:true,
renderTo:Ext.getBody(),
bodyPadding:5,
bodyStyle:'background-color:#FFFFFF',
html:'面板体（body）',
tools:[
{id:'toggle'},
{id:'close'},
{id:'maximize'}
],
buttons:[{
text:'面板底部（footer）'
}]
});
});
标准布局类
面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就显得越凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类为面板提供支持，主要包括如下11种：
Auto(自动布局)
Fit(自适应布局)
Accordion(折叠布局)
Card(卡片式布局)
Anchor(锚点布局)
Absolute(绝对位置布局)
CheckboxGroup(复选框布局)
Column(列布局)
Table(表格布局)
Border(边框布局)
Box(盒布局)
Auto自动布局
Ext.layout.container.Auto自动布局是容器在没有指定布局方式中默认采用的布局类型，它使用原始的HTML文件流来布局子元素，并把布局调用传递到子容器中，对应面板布局配置(layout)名称为Auto。
Auto(自动布局)示例
Ext.onReady(function(){
//P136 Auto(自动布局)示例
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Auto布局示例',
frame:true,//渲染面板
width:300,
renderTo:Ext.getBody(),
bodyPadding:5,
layout:'auto',//自动布局
defaults:{//设置默认属性
bodyStyle:'backgroud-color:#FFFFFF' //设置面板体的背景色
},
//面板items配置项默认的xtype类型panel,
//该默认值可以通过defaultType配置项进行更改
items:[{
title:'嵌套面板一',
html:'面板一'
},{
title:'嵌套面板二',
html:'面板二'
}]
});
});
Ext.layout.container.Fit是布局的基础类，对应面板布局配置项(layout)的名称为Fit，Fit布局将使唯一的子元素充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。
注：组件的xtype类型，xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建。
Fit(自适应布局)示例
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
layout:'fit',
title:'Ext.layout.container.Fit布局示例',
frame:true,//渲染面板
height:150,
width:250,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
},
//面板items配置项默认的xtype类型为panel
//该默认值可以通过defaultType配置项进行更改
items:[{
title:'嵌套面板一',
html:'面板一'
},{
title:'嵌套面板二',
html:'面板二'
}]
});
});
Accordion折叠布局
Ext.layout.container.Accordion折叠布局，对应面板布局（layout）配置项的名称为Accordion。该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每一个子面板都内置了对展开和收缩功能的支持。
Accordion（折叠布局）示例
Ext.onReady(function(){
// Accordion（折叠布局）示例
Ext.create('Ext.panel.Panel',{
layout:'accordion',
title:'Ext.layout.container.Accordtion布局示例',
frame:true,//渲染面板
height:200,
width:250,
renderTo:Ext.getBody(),
bodyPadding:5,
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items:[{
title:'嵌套面板一',
html:'说明一'
},{
title:'嵌套面板二',
html:'说明二'
},{
title:'嵌套面板三',
html:'说明三'
}]
});
});
Ext.layout.container.Card对应面板布局（layout）配置项的名称为Card。该布局会包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常来制作向导和标签页。该布局的重点方法是setActiveItem，因为一次只能显示一个子面板，所以切换子面板的唯一途径就是调用setActiveItem方法，它接受一个子面板id或索引作为参数。Card布局并没有提供一个子面板的导航机制，导航逻辑需要开发人员自己实现。
Card（卡片式布局）示例
Ext.onReady(function(){
// Card(卡片式布局)示例
var panel = Ext.create('Ext.panel.Panel',{
layout:'card',
activeItem:0,//设置默认显示第一个子面板
title:'Ext.layout.container.CardLayout布局示例',
frame:true,
height:150,
width:250,
renderTo:Ext.getBody(),
bodyPadding:5,
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
}]
});
//切换子面板
function changePage(btn){
var index = 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);
}
});
Anchor锚点布局
Ext.layout.container.Anchor是根据容器大小为其所包含的子面板进行定位的布局，对应面板布局（layout）配置项的名称为Anchor。如果容器大小发生变化，所有子面板的位置都会根据规则重新计算，并自动渲染。使用Anchor布局需要注意配置项的使用。
•anchorSize（父容器提供）
Anchor布局提供了anchorSize配置型用来设置虚拟容器的大小，默认情况下Anchor布局是根据容器自身的大小来进行计算定位的，如果提供了anchorSize属性则Anchor布局就会根据该尺寸生成一个虚拟容器，然后根据这个虚拟容器的大小来进行计算定位。
•anchor(子容器提供)
加入到使用Anchor布局面板中的子面板也都支持一个anchor配置项，它是一个包含2个值的字符串，水平值和垂直值，例如：’100% 50%’，这个值告知父容器应该怎样为加入到其中的子面板进行定位，有效值包括如下3类。
■百分比（Percenge）：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配置项才会有正确的效果，例如’r b’，说明父容器会计算与子容器宽度和高度的差值，然后按父容器体（body）的实际宽度和高度减去这个差值，重新为子面板定位。
以上3种赋值类型可以组合使用，例如’-50 75%’。
百分比（Percentage）定位
Ext.onReady(function(){
//百分比（Percentage）定位示例
Ext.create('Ext.panel.Panel',{
layout:'anchor',
title:'Ext.layout.container.Anchor布局示例',
frame:false,//渲染面板
height:150,
width:300,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板的背景色
},
items:[{
anchor:'50% 50%',//设置子面板的宽高为父面板的50%
title:'子面板'
}]
});
});
偏移值（Offsets）定位
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
layout:'anchor',
title:'Ext.layout.container.Anchor布局示例',
frame:false,//渲染面板
height:150,
width:300,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板的背景色
},
items:[{
anchor:'-10 -10',//设置子面板的宽高偏移父面板10像素
title:'子面板'
}]
});
});
参考边（Sides）定位
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
layout:'anchor',
title:'Ext.layout.container.Anchor布局示例',
autoScroll:true,//自动显示滚动条
frame:false,//渲染面板
height:150,
width:300,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板的背景色
},
items:[{
anchor:'r b',//相对于父容器的右边和底边的差值进行定位
width:200,
height:100,
title:'子面板'
}]
});
});
Absolute绝对位置布局
Ext.layout.container.Absolute对应面板布局（layout）配置项的名称为Absolute。它可以根据子面板中配置的x/y坐标进行定位。
Absolute（绝对位置布局）示例
Ext.onReady(function(){
//Absolute绝对位置布局示例
Ext.create('Ext.panel.Panel',{
layout:'absolute',
title:'Ext.layout.container.Absolute布局示例',
frame:false,//渲染面板
height:150,
width:300,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
frame:true,
height:70,
width:100,
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items:[{
x:10,//横坐标为距父容器左边缘90像素的位置
y:10,//纵坐标为距父容器上边缘10像素的位置
html:'子面板一',
title:'子面板一'
},{
x:130,//横坐标为距父容器左边缘130像素的位置
y:40,//纵坐标为距父容器上边缘40像素的位置
html:'子面板二',
title:'子面板二'
}]
});
});
CheckboxGroup复选框组布局
Ext.layout.container.CheckboxGroup复选框组布局，对应面板布局（layout）配置项的名称为CheckboxGroup。它实现了按列布局表单组件Ext.form.CheckboxGroup和Ext.form.RadioGroup的功能。
Column列布局
Ext.layout.container.Column对应面板布局（layout）配置项的名称为Column。这是一种多列风格的布局样式，每一列的宽度都可以根据百分比或固定值来进行设置，高度允许根据内容进行变化，它支持一个特殊的属性columnWidth，每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值，来确定列宽。
width配置项是以像素为单位的固定宽度，必须是大于或等于1的数字。columnWidth配置项是以百分比为单位的相对宽度，必须是大于0小于1的小数，例如“.25”。
注：所有列的columnWidth值相加必须等于1或者100%
指定固定宽度
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Column布局示例',
layout:'column',
frame:true,//渲染面板
height:150,
width:250,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF',
height:100,
frame:true
},
items:[{
title:'子面板一',
width:100//指定列宽为100像素
},{
title:'子面板二',
width:100//指定列宽为100像素
}]
});
});
使用百分比指定列宽
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Column布局示例',
layout:'column',
frame:true,//渲染面板
height:150,
width:250,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF',
height:100,
frame:true
},
items:[{
title:'子面板一',
columnWidth:.3//指定列宽为容器宽度的30%
},{
title:'子面板二',
columnWidth:.7//指定列宽为容器宽度的70%
}]
});
});
固定值与百分比结合使用
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Column布局示例',
layout:'column',
frame:true,//渲染面板
height:150,
width:350,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF',
height:100,
frame:true
},
items:[{
title:'子面板一',
width:100//指定列宽为100像素
},{
title:'子面板二',
columnWidth:.3//指定列宽为容器宽度的70%
},{
title:'子面板三',
columnWidth:.7//指定列宽为容器宽度的70%
}]
});
});
Table表格布局
Ext.layout.container.Table对应面板布局（layout）配置项的名称为Table。这种布局允许你非常容易地渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。
注：必须使用配置对象来配置此布局而不能只使用字符串，table布局有columns和tableAttrs两个配置项，其子面板会具有rowspan和colspan两个配置项。
Table（表格布局）示例
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Table布局示例',
layout:{
type:'table',//表格布局
columns:4//设置表格布局默认列数为4列
},
frame:true,//渲染面板
height:250,
width:450,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
frame:true,
width:70,
height:70
},
items:[{
title:'子面板一',
width:210,
colspan:3 //设置跨列
},{
title:'子面板二',
rowspan:2,
height:140
},
{title:'子面板三'},
{title:'子面板四'},
{title:'子面板五'}]
});
});
Border边框布局
Ext.layout.container.Border对应面板布局（layout）配置项的名称为Border。该布局包含多个子面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是：east（东）、south（南）、west（北）、center（中）。加入到容器中的子面板需要指定region配置型来告知容器需要加入到那个部分，并且该布局还内建了对面板分隔栏的支持。
关于border布局有以下几点需要说明：
□任何使用border布局的容器都必须有一个子元素配置为region:’center’占据中心位置，该子元素会填充布局的剩余空间。
□任何占据west或者east位置的子元素都必须指定初始化宽度、flex值或者百分比字符串，center的flex值为1。
□任何占据north或south位置的子元素都必须指定初始化高度、flex值或者百分比字符串，center的flex值为1。
□Border布局在渲染完毕后不允许动态增加或删除子元素，如果需要必须通过附加的包装容器来操作。
Border（边框布局）示例
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Border布局示例',
layout:'border',//边框布局
height:250,
width:400,
frame:true,
renderTo:Ext.getBody(),
defaults:{//设置默认属性
collapsible:true
},
items:[{
title:'north Panel',
html:'上边',
region:'north',//指定子面板所在区域为north
height:50
},{
title:'south Panel',
html:'下边',
region:'south',//指定子面板所在区域为south
height:50
},{
title:'west Panel',
html:'左边',
region:'west',//指定子面板所在区域为west
width:100
},{
title:'east Panel',
html:'右边',
region:'east',//指定子面板所在区域为east
width:100
},{
title:'main Content',
html:'中间',
region:'center'//指定子面板所在区域为center
}]
});
});
Box盒布局
Ext.layout.container.Box盒布局又分为HBoxLayout（水平盒布局）和VBoxLayout（垂直盒布局）两个子类，该布局通过子元素的flex配置项来划分父容器的空间。
HBox（水平布局）示例
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.HBox布局示例',
layout:{
type:'hbox',//水平盒布局
align:'stretch'//子面板高度充满父容器
},
height:150,
width:300,
frame:true,
renderTo:Ext.getBody(),
items:[{
title:'子面板一',
flex:1,
html:'1/4宽（flex=1）'
},{
title:'子面板二',
flex:1,
html:'1/4宽（flex=1）'
},{
title:'子面板三',
flex:2,
html:'1/2宽（flex=2）'
}]
})
});
三个子面板水平依次排开，Flex值的和为4，因此第一个面板flex值为1占总宽度的1/4，第三个子面板的flex值为2占总宽度的1/2，VBox的使用方式与HBox的相同。
ViewPort的使用
Ext.container.Viewport代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个ViewPort实例，此外它没有提供对滚动条的支持，如果需要使用滚动条应该在其子面板中进行设置。
ViewPort使用示例
Ext.onReady(function(){
Ext.create('Ext.container.Viewport',{
layout:'border',//表格布局
items:[{
title:'North Panel',
html:'上边',
region:'north',//指定子面板所在区域为north
height:100
},{
title:'West Panel',
html:'左边',
region:'west',//指定子面板所在区域为west
width:150
},{
title:'Main Panel',
html:'中间',
region:'center'//指定子面板所在区域为center
}]
});
});