Ext 布局（layout）
1、card
1 var navigate = function (panel, direction) {
2 var layout = panel.getLayout();
3 layout[direction]();
4 Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
5 Ext.getCmp('move-next').setDisabled(!layout.getNext());
6 };
7
8 Ext.create('Ext.panel.Panel', {
9 title: 'Example Wizard',
10 width: 300,
11 height: 200,
12 layout: 'card',
13 bodyStyle: 'padding:15px',
14 defaults: {
15 border: false
16 },
17 bbar: [
18 {
19 id: 'move-prev',
20 text: 'Back',
21 handler: function (btn) {
22 navigate(btn.up("panel"), "prev");
23 },
24 disabled: true
25 },
26 '->',
27 {
28 id: 'move-next',
29 text: 'Next',
30 handler: function (btn) {
31 navigate(btn.up("panel"), "next");
32 }
33 }
34 ],
35 items: [{
36 id: 'card-0',
37 html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
38 }, {
39 id: 'card-1',
40 html: '<p>Step 2 of 3</p>'
41 }, {
42 id: 'card-2',
43 html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
44 }],
45 renderTo: Ext.getBody()
46 });
效果图
2、vbox
1 Ext.create('Ext.Panel', {
2 width: 500,
3 height: 400,
4 title: "VBoxLayout Panel",
5 layout: {
6 type: 'vbox',
7 align: 'center'
8 },
9 renderTo: document.body,
10 items: [{
11 xtype: 'panel',
12 title: 'Inner Panel One',
13 width: 250,
14 flex: 2
15 },
16 {
17 xtype: 'panel',
18 title: 'Inner Panel Two',
19 width: 250,
20 flex: 7
21 },
22 {
23 xtype: 'panel',
24 title: 'Inner Panel Three',
25 width: '100%',
26 flex: 1
27 }]
28 });
效果图
3、table
1 Ext.create('Ext.panel.Panel', {
2 title : 'Table Layout',
3 width : 300,
4 height : 150,
5 layout : {
6 type : 'table',
7 columns : 3
8 },
9 defaults : {
10 bodyStyle : 'padding:20px'
11 },
12 items : [{
13 html : 'Cell A content',
14 rowspan : 2
15 }, {
16 html : 'Cell B content',
17 colspan : 2
18 }, {
19 html : 'Cell C content',
20 cellCls : 'highlight'
21 }, {
22 html : 'Cell D content'
23 }
24 ],
25 renderTo : Ext.getBody()
26 });
效果图
4、hbox
1 Ext.create('Ext.Panel', {
2 width : 500,
3 height : 300,
4 title : "HBoxLayout Panel",
5 layout : {
6 type : 'hbox',
7 align : 'stretch'
8 },
9 renderTo : document.body,
10 items : [{
11 xtype : 'panel',
12 title : 'Inner Panel One',
13 flex : 2
14 }, {
15 xtype : 'panel',
16 title : 'Inner Panel Two',
17 flex : 1
18 }, {
19 xtype : 'panel',
20 title : 'Inner Panel Three',
21 flex : 1
22 }
23 ]
24 });
效果图
5、fit
1 Ext.create('Ext.panel.Panel', {
2 title : 'Fit Layout',
3 width : 300,
4 height : 150,
5 layout : 'fit',
6 items : {
7 title : 'Inner Panel',
8 html : 'This is the inner panel content',
9 bodyPadding : 20,
10 border : false
11 },
12 renderTo : Ext.getBody()
13 });
效果图
6、column
1 Ext.create('Ext.panel.Panel', {
2 title : 'Column Layout - Percentage Only',
3 width : 350,
4 height : 250,
5 layout : 'column',
6 items : [{
7 title : 'Column 1',
8 columnWidth : .25
9 }, {
10 title : 'Column 2',
11 columnWidth : .55
12 }, {
13 title : 'Column 3',
14 columnWidth : .20
15 }
16 ],
17 renderTo : Ext.getBody()
18 });
19
20 Ext.create('Ext.Panel', {
21 title : 'Column Layout - Mixed',
22 width : 350,
23 height : 250,
24 layout : 'column',
25 items : [{
26 title : 'Column 1',
27 width : 120
28 }, {
29 title : 'Column 2',
30 columnWidth : .7
31 }, {
32 title : 'Column 3',
33 columnWidth : .3
34 }
35 ],
36 renderTo : Ext.getBody()
37 });
效果图
7、anchor
1 Ext.create('Ext.Panel', {
2 width : 500,
3 height : 400,
4 title : "AnchorLayout Panel",
5 layout : 'anchor',
6 renderTo : Ext.getBody(),
7 items : [{
8 xtype : 'panel',
9 title : '75% Width and 20% Height',
10 anchor : '75% 20%'
11 }, {
12 xtype : 'panel',
13 title : 'Offset -300 Width & -200 Height',
14 anchor : '-300 -200'
15 }, {
16 xtype : 'panel',
17 title : 'Mixed Offset and Percent',
18 anchor : '-250 20%'
19 }
20 ]
21 });
效果图
8、accordion
1 Ext.create('Ext.panel.Panel', {
2 title : 'Accordion Layout',
3 width : 300,
4 height : 300,
5 layout : 'accordion',
6 defaults : {
7 bodyStyle : 'padding:15px'
8 },
9 layoutConfig : {
10 titleCollapse : false,
11 animate : true,
12 activeOnTop : true
13 },
14 items : [{
15 title : 'Panel 1',
16 html : 'Panel content!'
17 }, {
18 title : 'Panel 2',
19 html : 'Panel content!'
20 }, {
21 title : 'Panel 3',
22 html : 'Panel content!'
23 }
24 ],
25 renderTo : Ext.getBody()
26 });
效果图
9、auto
1 Ext.create('Ext.Panel', {
2 width : 500,
3 height : 280,
4 title : "AutoLayout Panel",
5 layout : 'auto',
6 renderTo : document.body,
7 items : [{
8 xtype : 'panel',
9 title : 'Top Inner Panel',
10 width : '75%',
11 height : 90
12 }, {
13 xtype : 'panel',
14 title : 'Bottom Inner Panel',
15 width : '75%',
16 height : 90
17 }
18 ]
19 });
效果图
10、border
1 Ext.create('Ext.container.Viewport', {
2 layout : 'border',
3 defaults : {
4 style : {
5 borderStyle : 'solid',
6 borderWidth : '0px'
7 }
8 },
9 items : [{
10 region : 'north',
11 html : 'Page Title',
12 title : 'north'
13 }, {
14 region : 'west',
15 collapsible : true,
16 title : 'Navigation',
17 width : 150
18 }, {
19 split : true,
20 region : 'south',
21 title : 'South Panel',
22 collapsible : true,
23 html : 'Information goes here',
24 height : 100,
25 minHeight : 100
26 }, {
27 split : true,
28 region : 'east',
29 title : 'East Panel',
30 collapsible : true,
31 width : 150
32 }, {
33 region : 'center',
34 xtype : 'tabpanel',
35 activeTab : 0,
36 items : {
37 title : 'Default Tab',
38 html : 'The first tab\'s content. Others may be added dynamically'
39 }
40 }
41 ]
42 });
效果图
