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

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

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

    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
        }
    ]

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
    }
]