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>

上記のプログラムは、次の結果を生成します-

グリッドPoperties

折りたたみ-このプロパティは、グリッドに折りたたみ機能を追加します。この機能を追加するには、グリッドプロパティに "Collapsible：true" 機能を追加します。

並べ替え-このプロパティは、グリッドに並べ替え機能を追加します。グリッドにColumnプロパティ「 sortable：true 」を追加して、ソートASC/DESCを適用します。デフォルトではtrueです。この機能を表示したくない場合は、偽にすることができます。

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

デフォルトでは、ストアのプロパティ sorters：\ {property： 'id'、direction： 'ASC'} で並べ替えを適用できます。データをグリッドにレンダリングする前に、ソーターで提供されたプロパティと指定された方向に基づいてグリッドデータをソートします。

列のサイズ変更を有効にする-グリッドプロパティ "enableColumnResize：true" を使用して、列のサイズを変更できます（幅を増減できます）。

列の非表示-列の表示/非表示を切り替えるには、グリッドに列プロパティ "hideable：true" を追加します。デフォルトではtrueです。この機能を表示したくない場合は、偽にすることができます。

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-grid

目次

Ext.js-グリッド

構文

例

グリッドPoperties