目标：
介绍Panel布局的各种类
Panel布局类在VS中的介绍
内容：
Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局
1，Ext.layout.ContainerLayout 容器布局
提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在
2，Ext.layout.FitLayout 自适应布局
使用layout:'fit' 将使面板子元素自动充满容器，如果有多个子面板也只会第一个会被显示
3，Ext.layout.AccordionLayout 折叠布局 （很常有哦！！！）
扩展自适应布局，layout:'accordion' 它包含了多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都有展开和收缩的功能
4 ，Ext.layout.CardLayout 卡片式布局 （也很有用的哦！！）
扩展自适应布局，layout:'card' 它包含了多个子面板，只有一个面板处于显示状态，它用来制作向导或标签页，使用setActiveItem来激火面板
5，Ext.layout.AnchorLayout 锚点布局
根据容器的大小为其所包含的子面板进行定位的布局 layout:'anchor' 分为：百分比，偏移，参考边 三种方式的定位
6，Ext.layout.AbsoluteLayout 绝对位置布局
根据面板中配置 x/y 坐标进行定位，layout:'absolute' 坐标值支持使用固定值和百分比两种形式
7，Ext.layout.FormLayout 表单布局
用来管理表单字段的显示，内制了表单布局，提供了表单提交，读取等表单功能，layout:'form'
8, Ext.layout.ColumnLayout 列布局
多列风格的布局格式，每一列的宽度都可以通过百分比和数值确定宽度，layout:'column'
9, Ext.layout.TableLayout 表格布局
可以指定列数，跨行，跨列，可以创建出复杂的表格布局 layout:'table'
10, Ext.layout.BorderLayout 边框布局
该布局包含多个面板，是一个面向应用的UI风格的布局，它包含5个部分：east,south,west,north,center,layout:'border' 通过region来配置面板
viewport的应用：作为浏览器窗口的整个显示部分，其有着panel的功能，但是一定要注意的是一个页面只有一个viewport
示例分析部分
1 Extjs面板布局介绍 2 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext6.aspx.cs" Inherits="EXT1.Ext6"%> 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 5 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head runat="server"> 8 <title>第六课,Extjs中面板布局的应用</title> 9 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css"/> 10 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script> 11 <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 function Read1() { 14 var MyPanel=new Ext.Panel({ 15 title:'自适应布局', 16 250, 17 height:200, 18 x:300, 19 y:50, 20 floating:true, 21 renderTo:id1, 22 frame:true, 23 layout:'fit', 24 items:[ 25 { 26 title:"面板一", 27 html:"面板一内容" 28 }, 29 { 30 title:'面板二', 31 html:'面板二内容' 32 } 33 ] 34 }); 35 } 36 function Read2() { 37 var Mypanel=new Ext.Panel({ 38 layout:'accordion', 39 title:'折叠布局', 40 renderTo:id1, 41 250, 42 height:300, 43 x:300, 44 y:50, 45 floating:true, 46 frame:true, 47 collapsible:true, 48 titleCollapse:true, 49 layoutConfig:{ 50 activeOnTop:false, 51 fill:true, 52 hideCollapseTool:false, 53 titleCollapse:true, 54 animate:true 55 }, 56 items:[ 57 { 58 title:"面板一", 59 html:"面板一内容" 60 }, 61 { 62 title:'面板二', 63 html:'面板二内容' 64 }, 65 { 66 title:'面板3', 67 html:'面板3内容' 68 }, 69 { 70 title:'面板4', 71 html:'面板4内容' 72 }, 73 { 74 title:'面板5', 75 html:'面板5内容' 76 } 77 78 ] 79 }); 80 } 81 function Read3() { 82 var Mypanel=new Ext.Panel({ 83 layout:'card', 84 title:'卡片布局', 85 renderTo:id1, 86 250, 87 height:300, 88 x:300, 89 y:50, 90 floating:true, 91 frame:true, 92 collapsible:true, 93 titleCollapse:true, 94 activeItem:0, 95 96 items:[ 97 { 98 title:"面板一", 99 html:"面板一内容", 100 id:'p1' 101 }, 102 { 103 title:'面板二', 104 html:'面板二内容', 105 id:'p2' 106 }, 107 { 108 title:'面板三', 109 html:'面板三内容', 110 id:'p3' 111 } 112 ], 113 buttons:[ 114 { 115 text:'上一页', 116 handler:change 117 }, 118 { 119 text:'下一页', 120 handler:change 121 } 122 ] 123 }); 124 function change(btn) { 125 var index=Number(Mypanel.layout.activeItem.id.substring(1)); 126 if (btn.text=='上一页') { 127 index-=1; 128 if (index<1) { 129 index=1; 130 } 131 } 132 else 133 { 134 index+=1; 135 if (index>3) { 136 index=3; 137 } 138 } 139 Mypanel.layout.setActiveItem('p'+index); 140 } 141 } 142 function Read4() { 143 var Mypanel=new Ext.Panel({ 144 title:'锚点布局', 145 renderTo:id1, 146 frame:true, 147 300, 148 height:200, 149 x:300, 150 y:50, 151 floating:true, 152 collapsible:true, 153 titleCollapse:true, 154 layout:'anchor', 155 items:[{ 156 anchor:'50%,50%', 157 draggable:true, 158 title:'子面板' 159 }, 160 { 161 anchor:'-10,-10', 162 title:'子面板2' 163 }] 164 }); 165 } 166 function Read5() { 167 var Mypanel=new Ext.Panel({ 168 title:'绝对位置布局', 169 renderTo:id1, 170 frame:true, 171 300, 172 height:200, 173 x:300, 174 y:50, 175 floating:true, 176 collapsible:true, 177 titleCollapse:true, 178 layout:'absolute', 179 items:[{ 180 x:'10%', 181 y:10, 182 100, 183 height:50, 184 title:'子面板' 185 }, 186 { 187 x:90, 188 y:70, 189 100, 190 height:50, 191 title:'子面板2' 192 }] 193 }); 194 } 195 function Read6() { 196 var MyPanel=new Ext.Panel({ 197 layout:'form', 198 title:'表单布局', 199 renderTo:id1, 200 frame:true, 201 300, 202 height:200, 203 x:300, 204 y:50, 205 floating:true, 206 collapsible:true, 207 titleCollapse:true, 208 defaultType:'textfield', 209 labelSeparator:':', 210 defaults:{msgTarget:'side'}, 211 items:[ 212 { 213 fieldLabel:'用户名称', 214 allowBlank:false 215 }, 216 { 217 fieldLabel:'用户密码', 218 allowBlank:false 219 } 220 ] 221 }); 222 } 223 function Rand7() { 224 Ext.QuickTips.init(); 225 var MyPanel=new Ext.Panel({ 226 title:'列布局', 227 renderTo:id1, 228 frame:true, 229 300, 230 height:200, 231 x:300, 232 y:50, 233 floating:true, 234 layout:'column', 235 items:[ 236 { 237 title:'面板1', 238 100, 239 height:100 240 }, 241 { 242 title:'面板2', 243 100, 244 height:100 245 } 246 ] 247 }); 248 } 249 function Read8() { 250 var Mypanel=new Ext.Panel({ 251 title:'表格布局', 252 renderTo:id1, 253 frame:true, 254 400, 255 height:300, 256 x:350, 257 y:50, 258 floating:true, 259 collapsible:true, 260 titleCollapse:true, 261 draggable:{ 262 insertProxy: false,//拖动时不虚线显示原始位置 263 onDrag : function(e){ 264 var pel =this.proxy.getEl(); 265 this.x = pel.getLeft(true); 266 this.y = pel.getTop(true);//获取拖动时panel的坐标 267 var s =this.panel.getEl().shadow; 268 if (s){ 269 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 270 } 271 }, 272 endDrag : function(e){ 273 this.panel.setPosition(this.x, this.y);//移动到最终位置 274 } 275 }, 276 layout:'table', 277 layoutConfig:{ 278 columns:3 279 }, 280 items:[ 281 { 282 title:'面板1', 283 html:'面板一内容', 284 rowspan:2, 285 height:80 286 }, 287 { 288 title:'面板2', 289 html:'面板2内容', 290 colspan:2 291 292 }, 293 { 294 title:'面板3' 295 }, 296 { 297 title:'面板4' 298 } 299 300 ] 301 }); 302 } 303 function Read9() { 304 var Mypanel=new Ext.Viewport({ 305 layout:"border", 306 items:[ 307 { 308 region:"north", 309 height:50, 310 title:"顶部面板" 311 }, 312 { 313 region:"south", 314 height:50, 315 title:"底部面板" 316 }, 317 { 318 region:"center", 319 title:"中央面板" 320 }, 321 { 322 region:"west", 323 100, 324 title:"左边面板" 325 }, 326 { 327 region:"east", 328 100, 329 title:"右边面板" 330 } 331 ] 332 }); 333 } 334 function Read10() { 335 var b =new Ext.Button({ 336 id:"show-btn", //定义按钮的ID 337 text:"弹出按钮", //定义按钮的标题 338 renderTo:document.body//将弹出按钮渲染到窗体上 339 }); 340 var button = Ext.get('show-btn'); 341 var win; 342 button.on('click', function() { 343 //创建TabPanel 344 var tabs =new Ext.TabPanel({ 345 region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间 346 margins: '3 3 3 0', 347 activeTab: 0, //当前选项卡是第1个(从0开始) 348 defaults: { 349 autoScroll: true 350 }, 351 items: 352 [ 353 { 354 title: 'Bogus Tab', 355 html: "第一个Tab的内容." 356 }, 357 { 358 title: 'Another Tab', 359 html: "我是另一个Tab" 360 }, 361 { 362 title: 'Closable Tab', 363 html: "这是一个可以关闭的Tab", 364 closable: true//显示关闭按钮 365 } 366 ] 367 368 }); 369 370 //定义一个Panel 371 var nav =new Ext.Panel({ 372 title: 'Navigation', 373 region: 'west', //放在西边，即左侧 374 split: true, //设置为分割 375 200, 376 377 collapsible: true, //允许伸缩 378 margins: '3 0 3 3', 379 cmargins: '3 3 3 3' 380 }); 381 382 //如果窗口第一次被打开时才创建 383 if (!win) { 384 win =new Ext.Window({ 385 title: 'Layout Window', 386 closable: true, //显示关闭按钮 387 600, 388 389 height: 350, 390 391 border : false, 392 plain: true, 393 layout: 'border', 394 closeAction:'hide', 395 items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局 396 }); 397 398 } 399 400 win.show(button); 401 402 }); 403 }; 404 Ext.onReady(Read10); 405 </script> 406 </head> 407 <body> 408 <form id="form1" runat="server"> 409 <div id="id1"> 410 411 </div> 412 </form> 413 </body> 414 </html>