Ext JS Data Gridをすばやくカスタマイズする方法（part 2/6）

March 11, 2020 114 Views

全6回構成の「Ext JS Data Gridカスタマイズ」ブログシリーズの最初の記事では、GridやColumnのプロパティをカスタマイズしてデータグリッドを外観や機能を変更する方法を説明しました。この記事ではデータ表示用のメソッドグリッドを用いてデータグリッドをすばやくカスタマイズする方法を説明します。

ここで使用するグリッドの例ではNBA 2020プレイヤーのレーティングを表示します。

このブログでは、「グループ化のメソッド」を使用したグリッドのカスタマイズについて説明します

グループ化されたグリッド

グループ化されたグリッドは、フィールドのデータによるグループ化を実現し、行/列データの見やすい表示を提供します。

この機能を有効にするコードは次のとおりです。

1.グリッド構成で grouping の features をアクティブにします。

    features: [{
        ftype: 'grouping'
    }],

2.ストアのコンフィグで groupField を定義します。

    store: {
        model: 'Player',
        //グループ化するフィールドを指定する
        groupField: 'team',
        data: [/* ... */]
    },

3.グリッドをカスタマイズします（ヘッダのカスタマイズやサマリ行の追加を行います）

    features: [{
          ftype: 'grouping',
          //グループヘッダーをカスタマイズ
          groupHeaderTpl: 'Team: {name}',
          //グループごとにサマリ行を表示
          showSummaryRow: true
    }],
 
    columns: [{
    	  dataIndex: 'player',
    	  flex: 1,
          text: 'Name',
          //サマリ行に件数を出力
          summaryType: 'count',
          //サマリの表示形式をカスタマイズする
          summaryRenderer: function (value) {
              return Ext.String.format('{0} player{1}', value, value !== 1 ? 's' : '');
          }
          }, {
    	  dataIndex: 'rating',
          text: 'Rating',
          //サマリ行に平均値を出力
          summaryType: 'average',
          flex: 1
        }
    ]

このコードをFiddle Toolで確認して実行する

グループ化されたグリッドヘッダ

ユーザーはグループ化されたグリッドヘッダを使用してヘッダ表示をカスタマイズできます

Columnの表示ヘッダをグループ化するコードは次のように columns をネストして記述します。

columns: [
    {
        dataIndex: 'player',
        flex: 1,
        text: 'Name',
    },{
        //親カラム
        text: 'Rating',
        //親カラムに入れる子カラム
        columns: [{
            dataIndex: 'rating',
            text: 'Overall rating',
            flex: 1
        },{
            dataIndex: 'threePointRating',
            text: '3PT rating',
            flex: 1
        },{
            dataIndex: 'dunkRating',
            text: 'Dunk rating',
            flex: 1
        }]
    }, {
        dataIndex: 'position',
        text: 'Position',
        flex: 1
    },{
        dataIndex: 'ht',
        text: 'Height',
        flex: 1
    }
]