LearningExtJS_new 之 Layout 的运用学习(五)

Ext.onReady(function(){
//1.使用布局(第一个布局)
//	1>认识布局中的几个元素 panel 小容器,region 小容器存放位置,viewport 大容器
//	2>布局中的参数 
//		@collapsible 是否可以折叠,双击时折叠
//		@collapseMode 折叠模式,出现小图标
//		@minSize 拖拉的最小宽度
//		@maxSize 拖拉的最大宽度
//		@margins 上下左右间格度
//		@cmargins 折叠时间格度
//		@bodyStyle 内容样式
//2.使用tab panel
//	1>使用tabpanel时,把原来xtype找成tabpanel(注意这里大小写敏感),增加activeTab项(可选),配置items项
//	2>增加gridPanel到对应的tab项中,增加xtype:'grid',配置对应的store和cm项
//	3>使用accordion 配置title和autoLoad()
//3.增加工具栏
//	1>类型 为toolbar,设置items选项
//4.增加form
//	1>类型 为form ,设置items选项
//5.嵌套布局	
//	1>设置 在已有的布局中,增加layout为border.配置items选项,
//	2>设置图标,ie:iconCls:'de',
//6.给viewport设置ID值
//	1>getCmp 取容器,findById,取容器中的子元素
//	2>根据需要动态增加 tabpanel
	var store =  new Ext.data.Store({
					//定义数据 data
					data:[[
								"de.png",
								1,
								"Office Space",
								"Mike Judge",
								"1999-02-19",
								1,
								"Work Sucks",
								"19.95",
								1
							],[
								"us.png",
								3,
								"Super Troopers",
								"Jay Chandrasekhar",
								"2002-02-15",
								2,
								"Altered State Police",
								"14.95",
								2
							]
					],
					reader:new Ext.data.ArrayReader({
														id:"id"
														
													},[
														'image',
														'id',
														'title',
														'director',
														{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
														'genre',
														'tagline',
														'price',
														'available'
													]
						)
				});
				
	var myFirstViewport = new Ext.Viewport({
												layout:"border",//描述布局类型
												renderTo:Ext.getBody(),
												id:"myFirstViewport",
												items:[		{
																region:"north",
																xtype:"toolbar",
																items:[
																		{
																			xtype:"tbspacer"
																		
																		},{
																			xtype:"tbbutton",
																			text:"button",
																			handler:function(btn){
																				btn.disable();
																			}
																		},{
																			xtype:"tbfill"
																		}
																	]
															},{
																region:"west",
																xtype:"form",
//																html:"西",
																split:true,
																width:400,
																collapsible: true,
																title:"西方",
																collapseMode:"mini",
																minSize:100,
																maxSize:250,
																margins:'10 0 0 3',
																cmargins:'1 0 0 3',
																bodyStyle:'padding:5px;',
																items:[
																		{
																			xtype:"textfield",
																			fieldLabel:"标题",
																			name:"title"
																		},{
																			xtype:"textfield",
																			fieldLabel:"导演",
																			name:"director",
																			vtype:"name"
																		},{
																			xtype:"datefield",
																			fieldLabel:"发布日期",
																			name:'released'	
																		},{
																			//radio
																			xtype:"radio",
																			fieldLabel:"影片颜色",
																			boxLabel:"黑白",
																			name:"rdFilmColor",
																			checked:true
																		},{
																			xtype:"radio",
																			hideLabel:false,//default false 
																			labelSeparator:"",//替换默认的:
																			boxLabel:"彩色",
																			name:"rdFilmColor"
																		}
																]
															},{
																region:"center",
																xtype:"tabpanel",//注意大小写
																activeTab:0,
																id:"tplCenter",
																items:[{
																			title:"first tabPanel",
																			html:"first tabpanel here!!!"
																		},{
																			title:"second tabPanel",
																			xtype:"grid",
																			store:store,
																			columns:[{
																						header:"图片",dataIndex:"image",renderer:function(val){
																																	return "<img src='image/" + val + "'>";
																																}
																					},{
																						id:"title",header:"标题",dataIndex:"title",renderer:function(val,x,curStore){
																																	return "<b>" + val + "</b><br/>" + curStore.get("tagline");
																																}
																					},{
																						header:"导演",dataIndex:"director"
																					},{
																						header:"发布日期",dataIndex:"released",renderer:Ext.util.Format.dateRenderer("m/d/y")
																					},{
																						header:"喜剧类型",dataIndex:"genre"
											//											,renderer:function(val){
											//																					return genreStore.queryBy(function(rec){
											//																											return rec.get("id") == val;
											//																										},this).itemAt(0).get("name");
											//																				}
																					},{
																						header:"说明",dataIndex:"tagline"
																					},{
																						id:"price",header:"价格",dataIndex:"price"
																					}
																				]
																		},{
																			title:"accordion",
																			layout:"accordion",
																			items:[{
																						title:"director info",
																						autoLoad:"./html/director.txt"
																					},{
																						title:"genre info",
																						autoLoad:"./html/genre.txt"
																					},{
																						title:"name",
																						autoLoad:"./html/name.txt"
																					}]
																		},{
																			title:"嵌套布局",
																			layout:'border',
																			iconCls:'de',
																			border:false,
																			items:[{																				
																						title:"",
																						region:"north",
																						html:"north",
																						height:100,
																						split:true
																					},{
																						title:"",
																						region:"center",
																						html:"center"
																					}
																				]
																		}
																	]
															},{
																region:"east",
																xtype:"panel",
																html:"东",
																id:"plEast",
																split:true,
																width:200
															},{
																region:"south",
																xtype:"panel",
																html:"南"
															}
														]
											});
	//查找元素
	var eastPanel = Ext.getCmp("myFirstViewport").findById("plEast");
//	console.debug(eastPanel.isVisible());
	if(!eastPanel.isVisible()){
		eastPanel.expand();
	}
	//取元素,动态增加组件
	var centerPanel = Ext.getCmp("myFirstViewport").findById("tplCenter");
	centerPanel.add({title:"test",html:"text"});
});