课程表

Ext.js课程

工具箱
速查手册

Ext.js 网格

当前位置：免费教程 » JS/JS库/框架 » Ext.js

描述

网格：这个组件是显示数据的简单组件，它是以表格格式存储在Ext.data.Store中的记录的集合。

语法

这里是创建网格的简单语法

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

例

下面是一个简单的例子显示网格

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
  5.    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
  6.    <script type="text/javascript">
  7.       // Creation of data model
  8.       Ext.define('StudentDataModel', {
  9.          extend: 'Ext.data.Model',
  10.          fields: [
  11.          {name: 'name', mapping : 'name'},
  12.          {name: 'age', mapping : 'age'},
  13.          {name: 'marks', mapping : 'marks'}
  14.          ]
  15.       });
  17.       Ext.onReady(function(){
  18.          // Store data
  19.          var myData = [
  20.             { name : "Asha", age : "16", marks : "90" },
  21.             { name : "Vinit", age : "18", marks : "95" },
  22.             { name : "Anand", age : "20", marks : "68" },
  23.             { name : "Niharika", age : "21", marks : "86" },
  24.             { name : "Manali", age : "22", marks : "57" }
  25.          ];
  26.          // Creation of first grid store
  27.          var gridStore = Ext.create('Ext.data.Store', {
  28.          model: 'StudentDataModel',
  29.          data: myData
  30.          });
  31.          // Creation of first grid
  32.          Ext.create('Ext.grid.Panel', {
  33.             id                : 'gridId',
  34.             store             : gridStore,
  35.             stripeRows        : true,
  36.             title             : 'Students Grid', // Title for the grid
  37.             renderTo          :'gridDiv', // Div id where the grid has to be rendered
  38.             width             : 600,
  39.             collapsible       : true, // property to collapse grid
  40.             enableColumnMove  :true, // property which alllows column to move to different position by dragging that column.
  41.             enableColumnResize:true, // property which allows to resize column run time.
  42.             columns           :
  43.                [{ 
  44.                   header: "Student Name",
  45.                   dataIndex: 'name',	
  46.                   id : 'name',    
  47.                   flex:  1,  		 // property defines the amount of space this column is going to take in the grid container with respect to all.	
  48.                   sortable: true, // property to sort grid column data. 
  49.                   hideable: true  // property which allows column to be hidden run time on user request.
  50.                },{
  51.                   header: "Age", 
  52.                   dataIndex: 'age',
  53.                   flex: .5, 
  54.                   sortable: true,
  55.                    hideable: false // this column will not be available to be hidden.
  56.                },{
  57.                   header: "Marks",
  58.                   dataIndex: 'marks',
  59.                   flex: .5, 
  60.                   sortable: true, 
  61.                   // 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'.
  62.                   renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
  63.                      if (value > 75) {
  64.                         return "Distinction";	  
  65.                      } else {
  66.                         return "Non Distinction";
  67.                      }
  68.                   }
  69.             }]
  70.          });
  71.       });
  72.    </script>
  73. </head>
  74. <body>
  75.    <div id = "gridDiv"></div>
  76. </body>
  77. </html>

尝试一下

网格属性：

可折叠：此属性用于向网格添加折叠功能。 在网格属性中添加“Collapsible：true”功能以添加此功能。
排序：此属性是为网格添加排序功能。 在网格中添加列属性“sortable：true”以应用排序ASC / DESC。 默认情况下为true，因此如果您不想显示此功能，可以将其设为false。

  1. columns : [{ 
  2.    header: "Student Name",
  3.    dataIndex: 'name',	
  4.    id : 'name',    
  5.    flex:  1,  			
  6.    sortable: true // property to sort grid column data 
  7. }]

默认情况下，可以使用属性分类器应用soring：{property：'id'，direction：'ASC'} In store。 在将数据呈现到网格之前，它将基于分拣机中提供的属性和给定的方向对网格数据进行分类。
启用列调整大小：可以使用网格属性“enableColumnResize：true”调整列的大小（可以增大或减小其宽度）。
列可隐藏：在网格中添加列属性“hideable：true”，使列显示为隐藏或显示。 默认情况下为true，因此如果您不想显示此功能，可以将其设为false。

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

可拖动列：添加列属性“enableColumnMove：true”是网格属性，我们可以使用它移动网格中的列。
渲染器：这是基于我们从商店获得的数据显示网格数据的自定义视图的属性。

  1. columns : [{
  2.    header: "Marks",
  3.    dataIndex: 'marks',
  4.    flex: .5, 
  5.    sortable: true, 
  6.    // 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'.
  7.    renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
  8.       if (value > 75) {
  9.          return "Distinction";	  
  10.       } else {
  11.          return "Non Distinction";
  12.       }
  13.    }
  14. }]
转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号