<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 ,//指定宽度100
html : '列宽<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' ,//指定区域north
height : 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宽三'
}]
});
});
