Ext.js - 網格

這是一個簡單的元件，用於以表格格式顯示資料，這些資料是儲存在 Ext.data.Store 中的記錄集合。

語法

以下是建立網格的簡單語法。

Ext.create('Ext.grid.Panel',{
   grid properties..
   columns : [Columns]
});

示例

以下是一個顯示網格的簡單示例。

演示

<!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', {
               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 allows 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',	
                  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>

以上程式將產生以下結果：

網格屬性

可摺疊 - 此屬性用於向網格新增摺疊功能。在網格屬性中新增"Collapsible : true" 功能即可新增此功能。

排序 - 此屬性用於向網格新增排序功能。在網格中新增列屬性 "sortable : true" 以應用升序/降序排序。預設情況下，它是 true。如果不想顯示此功能，可以將其設定為 false。

columns : [{ 
   header: "Student Name",
   dataIndex: 'name',	
   id : 'name',    
   flex:  1,  			
   sortable: true   // property to sort grid column data 
}]

預設情況下，可以使用儲存中的屬性sorters : {property: 'id', direction : 'ASC'}應用排序。它將在將資料渲染到網格之前，根據 sorters 中提供的屬性和給定的方向對網格資料進行排序。

啟用列調整大小 - 可以使用網格屬性"enableColumnResize: true"調整列的大小（可以增加或減少其寬度）。

列可隱藏 - 在網格中新增列屬性"hideable : true" 以顯示或隱藏列。預設情況下，它是 true。如果不想顯示此功能，可以將其設定為 false。

columns : [{ 
   header: "Student Name",
   dataIndex: 'name',	
   id : 'name',    
   flex:  1,  			
   sortable: true, 
   hideable: true   // property which allows column to be hidden run time on user request
}]

可拖動列 - 新增列屬性"enableColumnMove: true" 是網格屬性，我們可以使用它在網格中移動列。

渲染器 - 此屬性用於根據從儲存中獲取的資料自定義網格資料的檢視。

columns : [{
   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";
      }
   }
}]

注意 - 所有屬性都在上面的網格示例中新增。請在“試一試”編輯器中嘗試它們。

extjs_components.htm

列印頁面