案例: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 : 'column' ,
11
              xtype: 'layout-column',
12
            requires: ['Ext.layout.container.Column'],
13
            width : 600,
14
            items: [{
15
               title : 'First Component width 30%',
16
               html : 'This is First Component',
17
               columnWidth : 0.30
18
            },{
19
               title : 'Second Component width 40%',
20
               html : '<p> This is Second Component </p> <p> Next line for second component </p>',
21
               columnWidth : 0.40
22
            },{
23
               title : 'Third Component width 30%',
24
               html : 'This is Third Component' ,
25
               columnWidth : 0.30
26
            }]
27
         });
28
      });
29
   </script>
30
</head>
31
<body>
32
</body>
33
</html>