案例: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
         win = new Ext.Window({
9
            title:'Email Window',
10
            layout:'form',
11
            width:400,
12
            closeAction:'close',
13
            target : document.getElementById('buttonId'),
14
            plain: true,
15
            items: [{
16
               xtype : 'textfield',
17
               fieldLabel: 'To'
18
            },{
19
               xtype : 'textfield',
20
               fieldLabel: 'CC'
21
            },{
22
               xtype : 'textfield',
23
               fieldLabel: 'BCC'
24
            },{
25
               xtype : 'textfield',
26
               fieldLabel: 'Subject'
27
            },{
28
               xtype : 'textarea',
29
               fieldLabel: 'Email Message'
30
            }],
31
            buttons: [{
32
               text: 'Save Draft',
33
               handler: function(){Ext.Msg.alert('Save Draft', 'Your msg is saved');}
34
            },{
35
               text: 'Send',
36
               handler: function(){Ext.Msg.alert('Message Sent', 'Your msg is sent');}
37
            },{
38
               text: 'Cancel',
39
               handler: function(){win.close(); Ext.Msg.alert('close', 'Email window is closed');}
40
            }],
41
            buttonAlign: 'center',
42
         });
43
         Ext.create('Ext.Button', {
44
            renderTo: Ext.getElementById('buttonId'),
45
            text: 'Click Me',
46
            listeners: {
47
               click: function() {
48
                  win.show();