extjs6-simple-examples/ExtJs/panel/panel-grid.html at master · Folgerjun/extjs6-simple-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      // Creation of data model
      Ext.define('StudentDataModel', { // 创建一个类
         extend: 'Ext.data.Model',
         fields: [
         {name: 'name', mapping : 'name'},
         {name: 'age', mapping : 'age'},
         {name: 'marks', mapping : 'marks'}
         ]
      });

      Ext.onReady(function(){
         // Store data
         var myData = [
            { name : "Asha", age : "16", marks : "90" },
            { name : "Vinit", age : "18", marks : "95" },
            { name : "Anand", age : "20", marks : "68" },
            { name : "Niharika", age : "21", marks : "86" },
            { name : "Manali", age : "22", marks : "57" }
         ];
         // Creation of first grid store
         var gridStore = Ext.create('Ext.data.Store', {
         model: 'StudentDataModel',
         data: myData
         });
         // Creation of first grid
         Ext.create('Ext.grid.Panel', { // 网格：这个组件是显示数据的简单组件，它是以表格格式存储在Ext.data.Store中的记录的集合。
            id                : 'gridId',
            store             : gridStore,
            stripeRows        : true,
            title             : 'Students Grid', // Title for the grid
            renderTo          :'gridDiv', // Div id where the grid has to be rendered
            width             : 600,
            collapsible       : true, // property to collapse grid 可折叠
            enableColumnMove  :true, // property which alllows column to move to different position by dragging that column. 移动列
            enableColumnResize:true, // property which allows to resize column run time. 调整列的大小
            columns           :
               [{
                  header: "Student Name",
                  dataIndex: 'name',	// 对应mapping中的值
                  id : 'name',
                  flex:  1,  		 // property defines the amount of space this column is going to take in the grid container with respect to all.
                  sortable: true, // property to sort grid column data.  可否排序
                  hideable: true  // property which allows column to be hidden run time on user request.  可否隐藏该列
               },{
                  header: "Age",
                  dataIndex: 'age',
                  flex: .5,
                  sortable: true,
                  hideable: false // this column will not be available to be hidden.
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5,
                  sortable: true,
                  // renderer is used to manipulate data based on some conditions here who ever has marks greater than 75 will be displayed as 'Distinction' else 'Non Distinction'.
                  renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
                     if (value > 75) {
                        return "Distinction";
                     } else {
                        return "Non Distinction";
                     }
                  }
            }]
         });
      });
   </script>
</head>
<body>
   <div id = "gridDiv"></div>
</body>
</html>