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() {

}

}]

});

});