<div class="box"><div id="myAuto" class="w_320"><h2>自动布局类</h2></div><div id="myFit" class="w_320"><h2>Fit自适应布局</h2></div><div id="myAccordion" class="w_320"><h2>Accordion折叠布局</h2></div><div id="myCard" class="w_320"><h2>Card卡片式布局</h2></div><div id="percenAnchor" class="w_320"><h2>锚点布局百分比定位1</h2></div><div id="offsetsAnchor" class="w_320"><h2>锚点布局偏移值定位2</h2></div><div id="sidesAnchor" class="w_320"><h2>锚点布局参考线定位3</h2></div><div id="myAbsolute" class="w_320"><h2>Absolute绝对位置的布局</h2></div><div id="myCheckboxGroup" class="w_320"><h2>复选框布局</h2></div><div id="myColumnWidth" class="w_320"><h2>Column列布局1:固定列宽</h2></div><div id="myColumnBaiWidth" class="w_320"><h2>Column列布局2:百分比列宽</h2></div><div id="myColumn" class="w_320"><h2>Column列布局2:固定百分比结合使用</h2></div><div id="myTable" class="w_320"><h2>表格布局</h2></div><div id="myBorder" class="w_320"><h2>边框布局</h2></div><div id="myBox" class="w_320"><h2>盒子布局</h2></div>
</div>
<!--CSS样式文件-->
<style> .box { padding:50px 0 0 50px; }* { padding:0; margin:0; }.w_320 { width:320px; float:left; }.my-foo-trigger { border-radius:5px; }.aaa { background:red; }
</style>

Ext.onReady(function(){//标准布局类(11中布局类)//如果直接在面板上添加内容会很凌乱,如果划分不同的区域,在区域中添加内容将会很整洁,就要用到布局类//1.Auto布局类(Ext.layout.container.Auto)(默认方式)Ext.create('Ext.panel.Panel',{title : '默认Auto布局类',width : 250,height : 200,renderTo : 'myAuto',frame : true,bodyPadding : 5,layout : 'auto',//自动布局defaults : {bodyStyle : 'background-color:#ffffff'},//items配置项默认的xtype类型为panel,可以通过defaultType配置项进行更改items : [{title : '面板一',html : '面板一'},{title : '面板二',html : '面板二'}]});//2.Fit自适应布局(使唯一的子元素充满容器,只显示一个面板,第二个面板并不会显示)Ext.create('Ext.panel.Panel',{title : 'Fit自适应布局',width : 250,height : 200,renderTo : 'myFit',frame : true,layout : 'fit',//使唯一的子元素充满容器,只显示一个面板,第二个面板并不会显示defaults : {bodyStyle : 'background-color:#ffffff;'},items : [{title : '面板一',html : '面板一'},{title : '面板二',html : '面板二'}]});//3.Accordion折叠布局(任何时候都只有一个自面板处于打开状态)//制作分组内容或者分组菜单Ext.create('Ext.panel.Panel',{title : 'Accordion折叠布局',width : 250,height : 200,renderTo : 'myAccordion',frame : true,bodyPadding : 5,layout : 'accordion',defaults : {bodyStyle : 'padding:15px;background-color:#ffffff'},items : [{title : '面板一',html : '面板一'},{title : '面板二',html : '面板二'},{title : '面板三',html : '面板三'}]});//4.Card卡片式布局(用于向导或者标签页)//任何时候只有一个自面板处于显示状态var myCard =  Ext.create('Ext.panel.Panel',{title : 'Card卡片式布局',width : 250,height : 200,renderTo : 'myCard',frame :true,layout : 'card',//activeItem : 0,//设置默认显示第一个子面板bodyPadding : 5,defaults : {bodyStyle : 'padding:15px; background-color:#ffffff'},items : [{title : '嵌套面板一',html : '说明一',id : 'p1'},{title : '嵌套面板二',html : '说明二',id : 'p2'},{title : '嵌套面板三',html : '说明三',id : 'p3'}],buttons : [{text : '上一页',handler : changePage},{text : '下一页',handler : changePage}]});//触发函数function changePage(btn){var index = Number(myCard.layout.activeItem.id.substring(1));console.info(index);if(btn.text == '上一页'){index -= 1;if(index < 1){index = 1;}}else {index += 1;if(index > 3){index = 3;}}myCard.layout.setActiveItem('p'+index);}//5.Anchor锚点布局//（1）百分比定位，（2）偏移值定位，（1）参考线定位//5.1百分比定位Ext.create('Ext.panel.Panel',{title : '百分比定位',width : 250,height :200,renderTo : 'percenAnchor',frame : false,//渲染面板layout : 'anchor',defaults : {bodyStyle : 'padding:15px; background-color:#ffffff'},items : [{title : '子面板',anchor : '50% 50%'}]});//5.2 offsetsAnchor偏移值定位Ext.create('Ext.panel.Panel',{title : '偏移值定位',width : 250,height : 150,renderTo : 'offsetsAnchor',frame : false,//layout : 'anchor',defaults : {bodyStyle : 'padding:15px; background-color:#ffffff'},items : [{title : '子面板',anchor : '-10 -10'//宽高偏移父元素10像素}]});//5.3 sidesAnchor参考线定位Ext.create('Ext.panel.Panel',{title : '参考线定位',width : 250,height : 150,renderTo : 'sidesAnchor',frame : false,layout : 'anchor',autoScroll : true,defaults : {bodyStyle : 'padding:15px; background-color:#ffffff'},items : [{title : '子面板',width : 200,height : 100,anchor : 'r b',//相对于父容器的右边和底边的差值进行定位html : '说明'}]});//6. Absolute绝对位置的布局Ext.create('Ext.panel.Panel',{title : '',width : 250,height : 150,renderTo : 'myAbsolute',frame : false,layout : 'absolute',defaults : {width : 100,height : 70,frame : true,bodyStyle : 'padding:5px; background-color:#ffffff'},items : [{title : '面板一',x : 10,//横坐标距离父元素组编10像素y : 10,//纵坐标距离父元素组编10像素，html : '面板一的内容'},{title : '面板二',x : 130,//横坐标距离父元素组编10像素y : 40,//纵坐标距离父元素组编10像素，html : '面板二的内容'}]});//7. myCheckboxGroup复选框布局Ext.create('Ext.panel.Panel',{title : '复选框布局',width : 250,height : 150,renderTo : 'myCheckboxGroup',frame : true,bodyPadding : 5,defaults : {width : 240,labelWidth : 40,labelSeparator : ': '},items : [{fieldLabel : '爱好',xtype : 'checkboxgroup',columns : 3,items : [{name : 'love',boxLabel : '游泳',inputValue : 'swim'},{name : 'love',boxLabel : '游戏',inputValue : 'game'},{name : 'love',boxLabel : '游戏',inputValue : 'game'},{name : 'love',boxLabel : '游戏',inputValue : 'game'},{name : 'love',boxLabel : '游戏',inputValue : 'game'}]}]});//8. Column列布局//所有的columnWidth值相加必须等于1或者100%//8.1 指定固定列宽Ext.create('Ext.panel.Panel',{title : 'Column列布局 指定固定列宽',width : 250,height : 150,frame : true,renderTo : 'myColumnWidth',layout : 'column',defaults : {height : 100,frame : true,bodyStyle : 'background-color:#ffffff'},items : [{title : '子面板一',width : 100, //指定列宽100像素html : '列宽100像素'},{title : '子面板二',width : 100, //指定列宽100像素html : '列宽100像素'}]});//8.2 百分比列宽Ext.create('Ext.panel.Panel',{title : 'Column列布局 百分比列宽',width : 250,height : 150,frame : true,renderTo :'myColumnBaiWidth',layout : 'column',defaults : {height : 100,frame : true,bodyStyle : 'background-color:#ffffff'},items : [{title : '子面板一',columnWidth : 0.3 ,//百分比宽度30%html : '列宽<span style="color:red">30%</span>'},{title : '子面板二',columnWidth : 0.7, //百分比宽度70%html : '列宽<span style="color:red">70%</span>'}]});//8.3  固定百分比结合使用Ext.create('Ext.panel.Panel',{title : '固定百分比结合使用',width : 250,height : 150,frame : true,renderTo :'myColumn',layout : 'column',defaults : {height : 100,frame : true,bodyStyle : 'background-color:#ffffff'},items : [{title : '子面板一',idth : 100 ,//指定宽度100html : '列宽<span style="color:red">指定宽度100</span>'},{title : '子面板二',columnWidth : 0.3, //百分比宽度30%html : '列宽<span style="color:red">30%</span>'},{title : '子面板三',columnWidth : 0.7, //百分比宽度70%html : '列宽<span style="color:red">70%</span>'}]});//9. Table表格布局Ext.create('Ext.panel.Panel',{title : 'Table表格布局',width : 250,heigh : 150,frame : true,renderTo : 'myTable',layout : {type : 'table',//表格布局columns : 4//设置默认4列},defaults : {width : 50,height : 50,frame : true,bodyStyle : 'bakcground-color : #ffffff'},items :  [{title : '面板一',width : 150,colspan :　3//设置跨3列},{title : '面板二',height : 100,rowspan 　: 2//跨2行},{title : '面板三'},{title : '面板四'},{title : '面板五'}]});//10. Border边框布局(面向应用的UI风格的布局)Ext.create('Ext.panel.Panel',{title : 'Border边框布局',width : 250,height : 200,frame : true,renderTo : 'myBorder',layout : 'border',defaults : {collapsible : true},items : [{title : '北部面板',region : 'north' ,//指定区域northheight : 50,html : '头部'},{title : '南部面板' ,region : 'south',height : 50,html : '底部'},{title : '西部面板',region :　'west',width : 50,html : '左边'},{title : '东部面板',region : 'east',width : 50,html : '右边'},{title : '主要内容',region : 'center',//这个必须有html : '中间区域不能缺少'}]});//11. Box盒布局//水平盒、垂直盒Ext.create('Ext.panel.Panel',{title : '盒子布局',width : 300,height : 150,frame : true,renderTo : 'myBox',layout : {type : 'hbox',align : 'stretch'//子面板高度充满父容器},items : [{title : '子面板一',flex : 1,html : '1/4宽一'},{title : '子面板二',flex : 1,html : '1/4宽二'},{title : '子面板三',flex : 2,html : '1/2宽三'}]});});