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',
html : 'ffff',
title : 'Tools--header',
tools : [{
type : 'close',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'collapse',
tooltip: 'collapse the window',
handler : function() {
}
}, {
type : 'down',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'expand',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'gear',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'help',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'left',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'maximize',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'minimze',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'minus',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'next',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'pin',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'plus',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'prev',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'print',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'refresh',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'restore',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'right',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'save',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'search',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'toggle',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'unpin',
tooltip: 'close the window',
handler : function() {
}
}, {
type : 'up',
tooltip: 'close the window',
handler : function() {
}
}]
});


});