Layout Controls
Auto Layout
Fit Layout
Ext.onReady(function() {
Ext.create("Ext.panel.Panel", {
layout: "fit", //fit布局
title : "Fit layout panel",
height: 400,
width: 600,
renderTo: "panel",
items: [{
xtype: "textfield",
fieldLabel: "Email"
}]
});
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Anchor Layout
anchor : "width% height%"
(or)
anchor : "offsetWidth offsetHeight"
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
layout: "anchor",
title : "Anchor layout panel",
width: 600,
height: 400,
items: [{
xtype: "textfield",
fieldLabel: "Name",
anchor: "95% 15%"
}, {
xtype: "button",
text: "Resize",
anchor: "-50, 15%",
listeners: {
"click": function() {
panel.setWidth(panel.getWidth() + 5);
panel.setHeight(panel.getHeight() + 5);
}
}
}],
renderTo: "panel"
});
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Ext.onReady(function() {
var panel1 = new Ext.Panel({
title : "Panel1",
height : 100,
anchor : '-50',
html : "高度等于100，宽度=容器宽度-50"
});
var panel2 = new Ext.Panel({
title: "Panel2",
height: 100,
anchor: '50%',
html: "高度等于100,宽度=容器宽度的50%"
});
var panel3 = new Ext.Panel({
title: "Panel3",
anchor: '-10, -250',
html: "宽度=容器宽度-10,高度=容器高度-250"
});
var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
layout: 'anchor',
items: [panel1, panel2, panel3]
});
win.show();
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Box Layout
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
title : "VBox layout panel",
width: 600,
height: 400,
layout : {
type : "vbox",
pack : "center", //水平居中
align : "center" //垂直居中
},
defaults : {
xtype : "button",
margin: "10"
},
items: [
{text : "A"},
{text : "B"},
{text : "C"}
],
renderTo: "panel"
});
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
title : "VBox layout panel",
width: 600,
height: 400,
layout : {
type : "hbox",
pack : "center",
align : "middle"
},
defaults : {
xtype : "button",
margin: "10"
},
items: [
{text : "A"},
{text : "B"},
{text : "C"}
],
renderTo: "panel"
});
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Accordion Layout
Ext.onReady(function() {
var panel = new Ext.panel.Panel({
renderTo : 'panel',
title : '容器组件',
layout : 'accordion',
width : 600,
height : 400,
items : [{
title : '元素1',
html : '元素1'
}, {
title : '元素2',
html : '元素2'
}, {
title : '元素3',
html : '元素3'
}, {
title : '元素4',
html : '元素4'
}]
});
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Table Layout
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
title : "Table layout panel",
width: 600,
height: 400,
layout : {
type : "table",
columns: 2
},
defaults : {
xtype : "button",
margin: "10"
},
items: [
{text : "A"},
{text : "B"},
{text : "C"},
{text : "D"},
{text : "E"},
{text : "F"}
],
renderTo: "panel"
});
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Ext.onReady(function() {
var panel = Ext.create("Ext.panel.Panel", {
title : "Table layout panel",
width: 600,
height: 400,
layout : {
type : "table",
columns: 3
},
items : [{
title : "子元素1",
html : "这是子元素1中的内容",
rowspan : 2,
height: 108
}, {
title : "子元素2",
html : "这是子元素2中的内容",
colspan : 2,
width: 400
}, {
title : "子元素3",
html : "这是子元素3中的内容"
}, {
title : "子元素4",
html : "这是子元素4中的内容"
}],
renderTo: "panel"
});
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Column Layout
Ext.onReady(function() {
new Ext.Panel({
renderTo : document.body,
layout : "column",
width : 500,
height : 400,
items : [{
title : "列1",
width : 200
}, {
title : "列2",
columnWidth : .3
}, {
title : "列3",
columnWidth : .3
}, {
title : "列4",
columnWidth : .4
}]
});
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Border Layout
Ext.onReady(function() {
new Ext.Viewport({
layout : 'border',
items : [{
region : "north",
height : 50,
title : "顶部面板"
}, {
region : "south",
height : 50,
title : "底部面板"
}, {
region : "center",
title : "中央面板"
}, {
region : "west",
width : 100,
title : "左边面板"
}, {
region : "east",
width : 100,
title : "右边面板"
}]
})
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Card Layout
Ext.onReady(function() {
var testpanel = new Ext.Panel({
layout : 'card', // 卡片式布局
activeItem : 0, // 设置默认显示的第一个子面板
title : 'Ext.layout.CardLayout',
frame : true,
renderTo : Ext.getBody(),
bodyPadding : 5,
width : 600,
height : 400,
defaults : {
bodyStyle : 'background-color:#FFFFFF'
},
// 面板items配置项默认的xtype类型为panel 该默认值可以通过defaultType配置项进行更改
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(testpanel.layout.activeItem.id.substring(1));
if (btn.text == '上一页') {
index -= 1;
if (index < 1) {
index = 1;
}
} else {
index += 1;
if (index > 3) {
index = 3;
}
}
testpanel.layout.setActiveItem('p' + index);
}
});![ExtJS布局控件-LMLPHP]( "ExtJS布局控件-LMLPHP")
Summary
