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:"面板二"
		}]
		
	});
});

Fit自适应布局
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:"说明三"
		}]
	});
});

Card卡片式布局
        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
		}]
	});
});