案例：Extjs案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
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
            requires: [
11
            'Ext.layout.container.Card'],
12
            layout: 'card',
13
            width: 600,
14
            height: 200,
15
            bodyPadding: 15,
16
            defaults: {
17
               border:false
18
            },
19
            defaultListenerScope: true,
20
            bbar: ['->',
21
            {
22
               itemId: 'card-prev',
23
               text: '« Previous',
24
               handler: 'showPrevious',
25
               disabled: true
26
            },{
27
               itemId: 'card-next',
28
               text: 'Next »',
29
               handler: 'showNext'
30
            }],
31
​
32
            items: [{
33
               id: 'card0',
34
               html: '<h2> This is card wizard layout </h2> <p> This is first card </p> <p> Please click the "Next" button to continue... </p>'
35
            },{
36
               id: 'card1',
37
               html: '<p> This is second card </p> <p> Please click the "Next" button for next card and "Previous" button for previous card... </p>'
38
            },{
39
               id: 'card2',
40
               html: '<p> This is final card </p> <p> Please click the "Previous" button for previous card... </p>'
41
            }],
42
43
            showNext: function () {
44
               this.cardPanelNavigation(1);
45
            },
46
47
            showPrevious: function (btn) {
48
               this.cardPanelNavigation(-1);