Ext面板与布局

		<link rel="stylesheet" type="text/css" href="extjs2.3/resources/css/ext-all.css" />
		<script type="text/javascript" src="extjs2.3/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="extjs2.3/ext-all.js"></script>
	
		<script type="text/javascript">

			Ext.onReady(function(){
				
				/*
				//显示一个窗口
				new Ext.Window({
						title:"窗口",
						width:300,
						height:300,
						maximizable:true,
						html:"<h2>this is a window</h2>",
						//添加事件监听器
						listeners:
							//窗口关闭前事件
							{"beforedestroy":function(obj){
								Ext.MessageBox.alert("事件","触发了关闭窗口前事件");
							}}
				}).show();
				*/
				
				//panel面板
				new Ext.Panel({
							renderTo:"panel",//把面板填充在id为panel的div中
							title:"panel面板头部",
							width:300,
							height:200,
							html:"panel面板主区域",
							tbar:[{text:"顶部工具栏tbar"},
							      //这里相当于一个按钮
							      {pressed:true,text:'刷新'}],
							bbar:[{text:"底部工具栏bbar"},
							      {text:"bbar2"}], 
							buttons:[{text:"按钮位于footer"}],
							//工具栏
							tools:[{id:"save"},
							       {id:"help",
									//点击help时的触发事件
									handler:function(){
							    	   Ext.Msg.alert('help','please help me!');
							    	}},
							    	{id:"close"}]
				});
				
				//tab选项面板，并在指定div中显示
				new Ext.TabPanel({
							renderTo:"tabPanel",//把面板填充在id为tabPanel的div中
							width:300,
							height:200,
							items:[{title:"面板1",height:30,html:"面板1"},
							       {title:"面板2",height:30,html:"面板2"},
							       {title:"面板3",height:30,html:"面板3"}]
							//html:"tabPanel面板，并在指定div中显示"
				});
				
				//form面板，即表单
				new Ext.form.FormPanel({
					renderTo:"formPanel",
					title:"表单",
					width:300,
					height:150,
					labelAlign:"right",//表单label对齐方式
					defaultType:"textfield",
					items:[
					   {fieldLabel:"用户名", name:"name" },
					   {fieldLabel:"密码", name:"password" }
					],
					buttons: [
					   {text: 'Save'},
					   {text: 'Cancel'}
					]
				});
				
				//折叠面板
				new Ext.Panel({
					renderTo:"accordion",
					title:"折叠布局面板",
					width:300,
					height:300,
					layout:"accordion",//折叠布局
					layoutConfig:{
			        	titleCollapse: false,
			        	animate: true//是否引用折叠动画效果
			        	//activeOnTop: true //当前活动区置顶
			    	},
			    	items:[
						{title:"子元素1",html:"这是子元素1中的内容"},
						{title:"子元素2",html:"这是子元素2中的内容"},
						{title:"子元素3",html:"这是子元素3中的内容"}
			    	]
				});
				
				//表格布局
				new Ext.Panel({
					renderTo:"tableLayout",
				    title: "表格布局",
				    width:500, 
				    height:200,
				    layout:"table",
				    layoutConfig: {
				        // 这里指定总列数
				        columns: 3
				    },
				    items:[
				       {title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
				       {title:"子元素2",html:"这是子元素2中的内容",colspan:2},
				       {title:"子元素3",html:"这是子元素3中的内容"},
				       {title:"子元素4",html:"这是子元素4中的内容"}
					]
				});

				
			});
		</script>
	

 

		<div id="panel"></div>
		<div id="tabPanel"></div>
		<div id="formPanel"></div>
		<div id="accordion"></div>
		<div id="tableLayout"></div>