Extjs4.0常见的几种格局详解
日期：2014-05-16 浏览次数：20337 次
Extjs4.0常见的几种布局详解
* 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%',
ancho
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%',
ancho
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
