案例:Extjs案例     状态:可编辑再运行    进入竖版
 运行结果 
AخA
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
   <link href="//cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
5
   <script type="text/javascript" src="//cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
6
   <script type="text/javascript">
7
      Ext.onReady(function() {
8
         Ext.create('Ext.panel.Panel', {
9
            renderTo : Ext.getBody(),
10
            layout : {
11
               type :'vbox',
12
               align: 'stretch'               
13
            },
14
            requires: ['Ext.layout.container.VBox'],
15
            xtype: 'layout-vertical-box',
16
            width : 600,
17
            height :400,
18
            frame :true,
19
            items : [{
20
               title: 'Panel 1',
21
               html : 'Panel with flex 1',
22
               margin: '0 0 10 0',
23
               flex : 1
24
            },{
25
               title: 'Panel 2',
26
               html : 'Panel with flex 2',
27
               margin: '0 0 10 0',
28
               flex : 2
29
            },{
30
               title: 'Panel 3',
31
               flex : 2,
32
               margin: '0 0 10 0',
33
               html : 'Panel with flex 2'
34
            },{
35
               title: 'Panel 4',
36
               html : 'Panel with flex 1',
37
               margin: '0 0 10 0',
38
               flex : 1
39
            }]
40
         });
41
      });
42
   </script>
43
</head>
44
<body>
45
</body>
46
</html>