<1>FitLayout 自適應(yīng)布局

FitLayout 是布局的基礎(chǔ)類，對(duì)應(yīng)面板布局配置項(xiàng)（layout）的名稱為 fit，使用 fit 布局將使面板子元素自動(dòng)充滿容器，如果在當(dāng)前容器中存在多個(gè)子面板則只有第一個(gè)會(huì)被顯示。

Ext.onReady(function(){
				//數(shù)據(jù)存儲(chǔ)
				var store = new Ext.data.SimpleStore(
					{
						fields: ['id', 'name', 'desc'],
						data: [
								['1', '埃爾克森', '廣州恒大'],
								['2', '埃杜', '遼寧宏運(yùn)'],
								['3', '布魯諾', '青島中能'],
								['4', '武磊', '上海東亞'],
								['5', '高迪', '杭州綠城'],
								['6', '艾德華', '上海申花'],
								['7', '王永珀', '山東魯能'],
						]
					}
				);
				//表格
				var grid = new Ext.grid.GridPanel(
					{
						title: '2013中超射手榜',
						viewConfig: {forceFit: true},
						store: store,
						columns: [
							{header:'排名', dataIndex: 'id'},
							{header:'姓名', dataIndex:'name'},
							{header:'球隊(duì)', dataIndex:'desc'}
						],
						//工具條
						tbar: new Ext.Toolbar(['添加','修改','刪除']),
						bbar: new Ext.PagingToolbar(
							{
								pageSize: 15,
								store: store
							}
						)
					}
				);
				//布局
				/*
					Fitlayout:
					<1>layout: 'fit',組件的items只能放一個(gè)組件。即使放幾個(gè)組件，也只有第一個(gè)組件會(huì)起作用。
					<2>items中的表格里千萬(wàn)不要使用aotuHeight:true參數(shù)，這個(gè)參數(shù)會(huì)使Fitlayout失效。
				*/
				var viewport = new Ext.Viewport(
					{
						layout: 'fit',
						items: [grid]
					}
				);
			}
		);

<2>BorderLayout邊框布局

因?yàn)長(zhǎng)itLayout布局每次只能使用一個(gè)組件，更復(fù)雜的布局它根本無(wú)法勝任。

現(xiàn)實(shí)中使用最多的就是邊框布局，他將整個(gè)區(qū)域分成東西南北中五部分。除了中間區(qū)域其他區(qū)域都是可以省略的。

Ext.onReady(function()
				{
					var viewport = new Ext.Viewport(
						{
							layout: 'border',
							items: [
								//north和south兩個(gè)區(qū)域只能指定高度值，寬度值由BorderLayout自動(dòng)計(jì)算。
								//east和west兩個(gè)區(qū)域只能指定寬度值，高度值由BorderLayout自動(dòng)計(jì)算。
								{region:'north',html:'north',height:120},
								{region:'south',html:'south',height:30},
								{region:'east',html:'east',width:40},
								{region:'west',html:'west',width:100},
								{region:'center',html:'center'}
							]
						}	
					);
				}
			);

使用split并限制他的范圍

使用了就可以允許用戶自行拖放以改變某一區(qū)域的大小。

//north和south兩個(gè)區(qū)域只能上下拖放east和west兩個(gè)區(qū)域只能左右拖放
								//minSize:菜單區(qū)域的最小范圍maxSize:菜單區(qū)域的最大范圍
								{region:'west',html:'west',width:100,split:true,minSize:80,maxSize:120},

子區(qū)域的折疊和展開(kāi)

Ext.onReady(function()
				{
					var viewport = new Ext.Viewport(
						{
							layout: 'border',
							items: [
								//north和south兩個(gè)區(qū)域只能指定高度值，寬度值由BorderLayout自動(dòng)計(jì)算。
								//east和west兩個(gè)區(qū)域只能指定寬度值，高度值由BorderLayout自動(dòng)計(jì)算。
								{region:'north',html:'north',height:120},
								{region:'south',html:'south',height:30},
								{region:'east',html:'east',width:40},
								//collapsible:true激活了west區(qū)域的折疊功能。title是必須的，如果沒(méi)有設(shè)置標(biāo)題，折疊按鈕就無(wú)法顯示。
								{region:'west',html:'west',width:100,title:'菜單欄',width:150,collapsible:true},
								{region:'center',html:'center'}
							]
						}	
					);
				}
			);

<3>制作伸縮菜單的布局 Accordion

/*
			設(shè)置layout: 'accordion',在使用items添加三個(gè)元素，每個(gè)子元素都要加上title參數(shù)。
			*/
			Ext.onReady(function()
				{
					var viewport = new Ext.Viewport(
						{
							layout:'border',
							items:[
								{
									region: 'west',
									width: 200,
									layout: 'accordion',
									//與布局有關(guān)的參數(shù)
									layoutConfig: {
											titleCollapse: true,//點(diǎn)擊標(biāo)題時(shí)就可以折疊面板
											animate: true,//展開(kāi)和折疊都是用動(dòng)畫
											activeOnTop: false//默認(rèn)是false執(zhí)行展開(kāi)和折疊操作后子面板的順序不會(huì)變。如果是true展開(kāi)的子面板總是放在上面。
									},
									items: [
										{
											title: '中超',
											html: '山東魯能  19'
										},
										{
											title: '中甲',
											html: '河南建業(yè)	22'
										},
										{
											title: '英超',
											html: '	曼聯(lián)	85'
										}
									]
								},
								{
									region: 'center',
									split: true,
									border: true
								}
							]
						}
					);
				}
			);

<4>AnchorLayout   控制位置和大小的布局

/*
			AnchorLayout提供了一種比較靈活的布局方式，既可以為items中的每個(gè)組件指定與總體布局大小的差值，也可以
			設(shè)置一個(gè)比例使子組件可以根據(jù)整體自己計(jì)算本身的大小。
			<1>使用百分比進(jìn)行配置
			anchor:'50% 80%' 寬度占整體寬度的50% 高度占整體高度的80%
			anchor:'50%'  寬度占整體寬度的50% 高度自動(dòng)設(shè)置為auto
			<2>直接設(shè)置與右側(cè)和底部的邊距
			anchor:'-50 -100' 距右側(cè)50像素 距底部100像素
			<3>使用前提是為作為整體布局的父組件和布局內(nèi)的子組件都設(shè)置好width,height和auchorSize屬性
			Anchor會(huì)記錄布局整體與子組件在大小的差值
			anchor：'r b' 也可寫成anchor:'right buttom'
			*/
			Ext.onReady(function()
				{
					var viewport = new Ext.Viewport(
						{
							layout: 'anchor',
							items: [
								{
									title:'panel 1',
									html:'panel 1',
									anchor:'-50 -100'
								},
							]
						}	
					);
				}
			);

Ext.onReady(function()
				{
					var viewport = new Ext.Viewport(
						{
							layout: 'anchor',
							anchorSize:{width:400,height:300},
							items: [
								{
									title:'panel 1',
									html:'panel 1',
									width:200,
									height:100,
									anchor:'r b'
								},
								{
									title:'panel 2',
									html:'panel 2',
									width:100,
									height:200,
									anchor:'r b'
								},
							]
						}	
					);
				}
			);

<5>表單布局 formLayout

Ext.onReady(function()
				{
					var viewport = new Ext.Viewport(
						{
							layout: 'fit',
							items: [
								{
									xtype:'form',
									title:"name",
									labelAlign:"right",
									labelWidth:50,
									frame:true,
									defaultType:"textfield",
									items:[
										{
											fieldLabel:"名稱",
											name:"name",
											anchor:'90%',
										},
										{
											fieldLabel:"生日",
											name:"birthday",
											xtype:'datefield',
											anchor:'90%',
										},
										{
											fieldLabel:"備注",
											name:"desc",
											xtype:'textarea',
											anchor:'90% -100',
										},
									]
								},
							]
						}	
					);
				}
			);

<6>TabPanel

Ext.onReady(function()
				{
					var simple = new Ext.FormPanel(
						{
							labelWidth: 70,
							frame: true,
							title: 'Simple Form',
							bodyStyle: 'padding:5px 5px 0',
							width: 800,
							defaults: 
							{
								width: 300
							},
							defaultType: 'textfield',
							items: [
								{
									xtype : "tabpanel",
									//初始顯示第幾個(gè)Tab頁(yè)  
									activeTab : 0,
									plain : true,
									height : 195,
									defaultType : "panel",
									bodyStyle : "padding:5px;",
									//當(dāng)Tab標(biāo)簽過(guò)多時(shí),出現(xiàn)滾動(dòng)條
									enableTabScroll: true,   
									items : [
										{
											title : "聯(lián)系方式",
											layout : "form",
											defaultType : "textfield",
											defaults : {
												widht : 400,
												anchor : "96%,96%"
											},
											items : [
												{
													fieldLabel : "單位負(fù)責(zé)人",
													name : "principal",
													id : "principal"
												}, 
												{
													fieldLabel : "傳真",
													name : "customer.fax",
													xtype : "numberfield",
													id : "fax"
												}, 
												{
													fieldLabel : "網(wǎng)址",
													name : "customer.site",
													id : "site"
												},   
											]
										}, 
										{
											title : "公司信息",
											layout : "form",
											defaults : {
											widht : 400,
												anchor : "96%,96%"
											},
											defaultType : "textfield",
											items : [
												{
													fieldLabel : "公司規(guī)模",
													hiddenName : "customer.companyScale",
													id : "companyScale",
													xtype : "combo",
													mode : "local",
													editable : false,
													triggerAction : "all",
													store : [
														["1", "1-20人"],
														["2", "20-50人"],
														["3", "50-100人"],
														["4", "100-200人"],
														["5", "200-500人"],
														["6", "500-1000人"],
														["7", "1000人以上"]
													]
												},  
												{
													fieldLabel : "開(kāi)戶銀行",
													name : "customer.openBank",
														id : "openBank"
												}, 
												{
													fieldLabel : "銀行賬號(hào)",
													xtype : "numberfield",
													name : "customer.accountsNo",
													id : "accountsNo"
												}, 
												{
													fieldLabel : "稅號(hào)",
													name : "customer.taxNo",
													id : "taxNo"
												}
											]
										}, 
										{
											title : "其它信息",
											layout : "form",
											defaultType : "textarea",
											defaults : {
												widht : 400,
												anchor : "96%,96%"
											},
											items : [
												{
													fieldLabel : "公司描述",
													name : "customer.otherDesc",
													id : "otherDesc"
												}, 
												{
													fieldLabel : "備注",
													name : "customer.notes",
													id : "notes"
												}
											]
										}
									]
								}
							]
						}
					);
					simple.render('spinner');
				}
			);