Ext_ContainerLayout容器布局

1.自适应布局：Ext.layout.FitLayout(布局的基础类)

/* Ext.layout.FitLayout布局的基础类 自适应布局 */ Ext.onReady(function(){ var config = { //面板布局 layout:'fit', title:'Ext.layout.FitLayout(自适应)布局示例', frame:true, height:150, width:250, renderTo:'panel', defaults:{ collapsible:true, bodyStyle:'background-color:#ffffff' }, //面板items配置默认的xtype为panel,该值可通过defaultType更改 items:[ { title:'嵌套面板一', html:'面板一' }, //由于使用fit布局，使面板子元素自动充满容器,如存在多个子面板将只显示第一个 { title:'嵌套面板二', html:'面板二' } ] } var panel = new Ext.Panel(config); });

 

2.折叠布局配置表：Ext.layout.Accordion

/* Ext.layout.Accordion折叠布局配置表: activeOnTop Boolean 是否保持展开子面板处于父面板顶端 animate Boolean 是否在展开收缩时使用滑动方式 fill Boolean 设置子面板是否自动调整高度充满父面板剩余空间 hideCollapseTool Boolean 设置是否隐藏子面板的展开收缩按钮，如设置true，titleCollapse也为true titleCollapse Boolean 设置是否允许单击子面板标题展开收缩面板 */ Ext.onReady(function(){ var config = { //面板布局 layout:'accordion', //布局配置信息 layoutConfig:{ activeOnTop:false, //activeOnTop:true, //设置打开的子面板置顶 fill:true, //子面板自动充满父面板剩余空间 hideCollapseTool:false, //显示展开收缩按钮 titleCollapse:true, //允许通过单击子面板标题展开收缩面板 animate:true //展开收缩使用动画效果 }, title:'Ext.layout.Accordion(折叠)布局示例', frame:true, height:150, width:250, renderTo:'panel', //所有面板全局默认样式 defaults:{ bodyStyle:'background-color:#ffffff;padding:15px' }, items:[ { title:'嵌套面板一', html:'说明一' }, { title:'嵌套面板二', html:'说明二' }, { title:'嵌套面板三', html:'说明三' } ] } var panel = new Ext.Panel(config); });

 

3.卡片式布局：Ext.layout.CardLayout

/* Ext.layout.CardLayout卡片式布局 Ext.layout.CardLayout方法: setActiveItem(String/Number item):void 根据子面板id或索引切换当前显示的子面板 */ Ext.onReady(function(){ var config = { //面板布局 layout:'card', activeItem:0, //设置默认显示第一个子页面 title:'Ext.layout.CardLayout(卡片)布局示例', frame:true, height:150, width:250, renderTo:'panel', defaults:{ bodyStyle:'background-color:#ffffff;padding:15px' }, items:[ { id:'p1', //指定id title:'嵌套面板一', html:'说明一' }, { id:'p2', //指定id title:'嵌套面板二', html:'说明二' }, { id:'p3', //指定id title:'嵌套面板三', html:'说明三' } ], buttons:[ { text:'上一页', handler:changePage //处理函数 }, { text:'下一页', handler:changePage //处理函数 } ] } var panel = new Ext.Panel(config); function changePage(btn) { var index = Number(panel.layout.activeItem.id.substring(1)); //获取当前面板中显示的子面板id,并截取1，2，3数字标示 if(btn.text == '上一页') { index -= 1; if(index < 1) { index = 1; } } else { index += 1; if(index > 3) { index = 3; } } panel.layout.setActiveItem('p' + index); //设置当前应显示的子面板 } });

 

4.锚点布局：Ext.layout.AnchorLayout

/* Ext.layout.AnchorLayout锚点布局 根据容器大小为其包含子面板进行定位的布局，容器大小变化，所有子面板将重新计算 */ /*Percentage(百分比)定位*/ Ext.onReady(function(){ var config = { //面板布局 layout:'anchor', title:'Ext.layout.AnchorLayout百分比定位布局示例', frame:false, //不渲染 height:150, width:300, renderTo:'panel', defaults:{ bodyStyle:'background-color:#ffffff;padding:15px' }, items:[ { anchor:'50% 50%', //设置子面板的宽高为父面板50% title:'子面板' } ] } var panel = new Ext.Panel(config); }); /*Offsets(偏移值)定位*/ Ext.onReady(function(){ var config = { //面板布局 layout:'anchor', title:'Ext.layout.AnchorLayout偏移值定位布局示例', frame:false, //不渲染 height:150, width:300, renderTo:'panel', defaults:{ bodyStyle:'background-color:#ffffff;padding:15px' }, items:[ { anchor:'-10 -10', //子面板到父面板右边和下边都为10像素 title:'子面板' } ] } var panel = new Ext.Panel(config); }); /*Sides(参考边)定位*/ Ext.onReady(function(){ var config = { //面板布局 layout:'anchor', title:'Ext.layout.AnchorLayout参考边定位布局示例', frame:false, //不渲染 height:150, width:300, renderTo:'panel', defaults:{ bodyStyle:'background-color:#ffffff;padding:15px' }, items:[ { anchor:'r b', //相对应父容器的右边和底边的差值进行定位 width:200, height:100, title:'子面板' } ] } var panel = new Ext.Panel(config); /* 参考边定位子容器最终宽高计算: 宽:298(说明:300减左右两边)-(300-200)(说明:右边和子容器宽度差值)=198 高:123(说明:150减上下边宽和header高度)-(150-100)(说明:底边和子容器高度差值)=73 */ });

 

5.绝对位置布局：Ext.layout.AbsoluteLayout

/* Ext.layout.AbsoluteLayout绝对位置布局 根据子面板中配置的x/y坐标定位 */ Ext.onReady(function(){ var config = { //面板布局 layout:'absolute', title:'Ext.layout.AbsoluteLayout绝对位置布局示例', frame:false, //不渲染 height:200, width:300, renderTo:'panel', defaults:{ bodyStyle:'background-color:#ffffff;padding:15px' }, items:[ { x:'10%', //横坐标为距父容器宽度10%位置 y:10, //纵坐标为距离父容器上边缘10的位置 width:100, height:50, title:'子面板一' }, { x:90, //横坐标为距父容器左边90像素的位置 y:70, width:100, height:50, title:'子面板二' } ] } var panel = new Ext.Panel(config); });

 

6.表单布局：Ext.layout.FormLayout

/* Ext.layout.FormLayout表单布局 通常可直接使用Ext.form.FormPanel表单面板 Ext.layout.FormLayout配置表: elementStyle String 应用到每个布局中元素上的样式列(默认'') labelStyle String 应用到每个字段标签上的样式(默认'') */ Ext.onReady(function(){ Ext.QuickTips.init(); var panel = new Ext.Panel({ //面板布局 layout:'form', title:'Ext.layout.FormLayout表单布局示例', labelSeparatorL:':', frame:true, height:110, width:300, renderTo:'panel', defaultType:'textfield', //指定容器子元素的默认类型 //默认属性 defaults:{ msgTarget:'side' //指定默认错误信息显示方式 }, items:[ { fieldLabel:'用户名', allowBlank:false }, { fieldLabel:'密码', allowBlank:false } ] }); });

 

7.列布局：Ext.layout.ColumnLayout

/* Ext.layout.ColumnLayout列布局 */ /*指定固定列宽*/ Ext.onReady(function(){ var config = { //布局方式 layout:'column', title:'Ext.layout.ColumnLayout列布局(指定固定宽度)示例', frame:true, height:150, width:400, renderTo:'panel', defaults:{ bodyStyle:'background-color:#ffffff', frame:true }, items:[ { title:'子面板一', width:100, height:100 }, { title:'子面板二', width:100, height:100 } ] } var panel = new Ext.Panel(config); }); /*使用百分比指定列宽*/ Ext.onReady(function(){ var config = { //布局方式 layout:'column', title:'Ext.layout.ColumnLayout列布局(百分比宽度)示例', frame:true, height:150, width:400, renderTo:'panel', defaults:{ bodyStyle:'background-color:#ffffff', frame:true }, items:[ { title:'子面板一', columnWidth:.3, //指定列宽为容器的30% height:100 }, { title:'子面板二', columnWidth:.7, //指定列宽为容器的70% height:100 } /*所有columnWidth的值和必须等于1*/ ] } var panel = new Ext.Panel(config); }); /*固定值，百分比结合使用*/

 

8.表格布局：Ext.layout.TableLayout

/* Ext.layout.TableLayout表格布局 */ Ext.onReady(function(){ var config = { //布局方式 layout:'table', layoutConfig:{ columns:4 //设置表格布局默认为4列 }, title:'Ext.layout.TableLayout表格布局示例', frame:true, height:150, width:300, renderTo:'panel', defaults:{ bodyStyle:'background-color:#ffffff', frame:true, height:50 }, items:[ { title:'子面板一', colspan:3 //设置跨列 }, { title:'子面板二', rowspan:2, //设置跨行 height:100 }, {title:'子面板三'}, {title:'子面板四'}, {title:'子面板五'} ] } var panel = new Ext.Panel(config); });

 

9.边框布局：Ext.layout.BorderLayout

/* Ext.layout.BorderLayout边框布局 将整个布局分5部分:east,south,west,north,center */ Ext.onReady(function(){ var config = { //布局方式 layout:'border', title:'Ext.layout.BorderLayout边框布局示例', height:250, width:400, renderTo:'panel', items:[ { title:'north Panel', html:'上边', region:'north', //定义子面板所在区域 height:50 }, { title:'south Panel', html:'下边', region:'south', height:50 }, { title:'west Panel', html:'左边', region:'west', height:100 }, { title:'east Panel', html:'右边', region:'east', height:100 }, { title:'main Panel', html:'中间', region:'center' } ] } var panel = new Ext.Panel(config); });