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 });

效果图