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,