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>