案例: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.get('tag2').hide()
9
            Ext.create('Ext.Button', {
10
               renderTo: Ext.getElementById('helloWorldPanel'),
11
               text: 'My Button',
12
               listeners: {
13
                  click: function() {
14
                     this.hide();
15
                  },
16
                  hide: function() {
17
                     Ext.get('tag1').hide();
18
                     Ext.get('tag2').show();
19
                  }
20
               }
21
            });
22
         });           
23
      </script> 
24
   </head>
25
   <body>
26
   <div id = "tag1">Please click the button to see event listener.</div>
27
   <div id = "tag2">The button was clicked and now it is hidden.</div>
28
   <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
29
   </body>
30
</html>