案例: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" src="//cdn.bootcss.com/extjs/6.2.0/classic/locale/locale-fr.js"></script>
7
      <script type="text/javascript">
8
          Ext.onReady(function() {
9
         var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
10
         var ds = Ext.create('Ext.data.Store', {
11
            fields: ['month'],
12
            remoteSort: true,
13
            pageSize: 6,
14
            proxy: {
15
               type: 'memory',
16
               enablePaging: true,
17
               data: monthArray,
18
               reader: {type: 'array'}
19
            }
20
         });
21
         Ext.create('Ext.grid.Panel', {
22
            renderTo: 'grid',
23
            id : 'gridId',
24
            width: 600,
25
            height: 200,
26
            title:'Month Browser',
27
            columns:[{
28
               text: 'Month of the year',
29
               dataIndex: 'month',
30
               width: 300
31
            }],
32
            store: ds,
33
            bbar: Ext.create('Ext.toolbar.Paging', {
34
               pageSize: 6,
35
               store: ds,
36
               displayInfo: true
37
            })
38
         }); 
39
         Ext.getCmp('gridId').getStore().load();
40
      });
41
      </script>
42
   </head>
43
   <body>
44
      <div id="grid" />
45
   </body>
46
</html>