Extjs4.0常见的几种布局详解


 
 
Ext.onReady(function() {
 
/**
* 1.auto布局使用（默认布局）
*/
var panel1 = Ext.create('Ext.panel.Panel', {
title : 'panel1',
html : 'panel1ddd',
height : 80,
width : 100
});
var panel2 = Ext.create('Ext.panel.Panel', {
title : 'panel2',
html : 'panel2ffff',
height : 80,
width : 100
});
var panel3 = Ext.create('Ext.panel.Panel', {
title : 'panel3',
html : 'panel3yyyy',
height : 80,
width : 100
});
var panel4 = Ext.create('Ext.panel.Panel', {
title : 'panel4',
html : 'panel4GGG',
height : 80,
width : 100
});
var auto = Ext.create('Ext.window.Window', {
title : 'auto Layout',
width : 100,
height : 420,
layout : 'auto',
defaults : {
bodyStyle : 'padding:15px'
},
items : [panel1, panel2, panel3, panel4]
});
auto.show();
 
 
/**
* 2 anchor布局（按百分比显示）
*/
var panel5 = Ext.create('Ext.panel.Panel', {
title : 'panel5',
html : '100% 30%',
anchor : '100% 30%'
});
var panel6 = Ext.create('Ext.panel.Panel', {
title : 'panel6',
html : '100% 25%',
anchor : '1000% 25%'
});
 
 
var panel7 = Ext.create('Ext.panel.Panel', {
title : 'panel7',
html : '100% 15%',
anchor : '100% 15%'
});
 
 
var panel8 = Ext.create('Ext.panel.Panel', {
title : 'panel8',
html : '100% 30%',
anchor : '100% 30%'
});
 
 
var anchor = Ext.create('Ext.window.Window', {
title : 'Anchor Layout',
width : 250,
height : 300,
layout : 'anchor',
defaults : {
bodyStyle : 'padding:10px'
},
items : [panel5, panel6, panel7, panel8]
});
anchor.show();
 
 
/**
* 3 HBox 布局（水平）
*/
var pp1 = Ext.create('Ext.panel.Panel', {
title : 'pp1',
html : 'pp1',
flex : 1
});
 
 
var pp2 = Ext.create('Ext.panel.Panel', {
title : 'pp2',
html : 'pp2',
flex : 2
// 设置pp1与pp2显示宽度的比例为1:2
});
 
 
var hbox = Ext.create('Ext.window.Window', {
title : 'Hbox Layout',
width : 300,
height : 100,
layout : {
type : 'hbox',
align : 'stretch'// 水平方向拉伸
},
defaults : {
bodyStyle : 'padding:10px'
},
items : [pp1, pp2]
});
hbox.show();
 
 
/**
* 4. VBox布局(垂直)
*/
var p1 = Ext.create('Ext.panel.Panel', {
title : 'p1',
html : 'p1',
flex : 2
});
 
 
var p2 = Ext.create('Ext.panel.Panel', {
title : 'p2',
html : 'p2',
flex : 1
});
var vbox = Ext.create('Ext.window.Window', {
title : 'VBox Layout',
width : 82,
height : 300,
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
bodyStyle : 'padding:15px'
},
items : [p1, p2]
});
vbox.show();
 
 
/**
* 5.accordion(折叠布局)
*/
var pa1 = Ext.create('Ext.panel.Panel', {
title : 'pa1',
html : '<b>pa1</b>'
});
var pa2 = Ext.create('Ext.panel.Panel', {
title : 'pa1',
html : '<b>pa2</b>'
});
var pa3 = Ext.create('Ext.panel.Panel', {
title : 'pa3',
html : '<b>pa3</b>'
});
var pa4 = Ext.create('Ext.panel.Panel', {
title : 'pa4',
html : '<b>pa4</b>'
});
var pa5 = Ext.create('Ext.panel.Panel', {
title : 'pa5',
html : '<b>pa5</b>'
});
 
 
var accordion = Ext.create('Ext.window.Window', {
title : 'Accordion Layout',
margins : '5 0 5 5',
split : true,
width : 210,
height : 250,
layout : 'accordion',
defaults : {
bodyStyle : 'padding:35 15 0 50'
},
items : [pa1, pa2, pa3, pa4, pa5]
});
accordion.show();
 
 
/**
* 6. fit布局（显示一个单独的组件在一容器上，填满容器空间）
* 
*/
var pan1 = Ext.create('Ext.panel.Panel', {
title : 'pan1',
bodyStyle : 'padding:15px',
html : 'Fit content'
});
var fit = Ext.create('Ext.window.Window', {
title : 'fit layout',
width : 100,
height : 150,
layout : 'fit',
items : [pan1]
});
fit.show();
 
 
/**
* border布局
*/
var border = Ext.create('Ext.window.Window', {
width : 700,
height : 400,
title : 'Border Layout',
layout : 'border',
defaults : {
xtype : 'panel'
},
items : [{
title : 'North Region is resizable',
region : 'north',
height : 100,
split : true
}, {
title : 'South Region is resizable',
region : 'south',
height : 100,
split : true
}, {
title : 'West Region is collapsible',
region : 'west',
width : 200,
collapsible : true,
layout : 'fit'
}, {
title : 'East Region is collapsible',
region : 'east',
width : 200,
collapsible : true,
layout : 'fit'
}, {
title : 'Center Region',
region : 'center',
layout : 'fit'
}]
});
border.show();
 
 
/**
* tools 布局
*/
var tp = Ext.create('Ext.panel.Panel', {
width : 500,
renderTo : 'toolId'

补充：web前端 , JavaScript ,