Ext JS Data Gridをすばやくカスタマイズする方法（part 3/6）– 編集機能の追加や行の折りたたみ表示
全6回構成の「Ext JSグリッドのカスタマイズ」ブログシリーズの3回目の記事では、Row Editingを使用してデータグリッドをカスタマイズすることにフォーカスします。 シリーズの第1回と第2回は次のリンクよりお読みいただけます。
第１回：GridとColumnのプロパティをカスタマイズする
第２回：グループ化されたグリッド
ここで用いるグリッドのサンプルではNBA 2020プレーヤーのレーティング情報をサンプルデータとして使用します。
Cell Editing/Row Editing
1. Gridのコンフィグでcelleditingのプラグインをアクティブにする
plugins: { cellediting: { clicksToEdit: 1 } }
2. カラムのコンフィグでエディタを定義する（エディタは、テキストフィールド、日付フィールド、または数値フィールドを指定可能）
{ dataIndex: 'position', text: 'Position', flex: 1, editor: { xtype: 'combo', typeAhead: true, triggerAction: 'all', selectOnFocus: false, store: [ 'SG', 'PG','SF', 'C','PF' ] } }
RowExpander
グリッド行の下にはネストされた行を簡単な手順で追加できます。ネストされた行は折りたたむことができます。
Gridのコンフィグで rowexpander プラグインを使用し、折りたたみ行で表示する情報のテンプレートを設定します
plugins: { rowexpander: { rowBodyTpl: new Ext.XTemplate( '<p><b>Team:</b> {team}</p>', '<p><b>Overall rating:</b> {rating:this.formatRating}</p>', { formatRating: function(v) { var color = v >= 85 ? 'red' : 'blue'; return '<span style="color: ' + color + '">' + v + '</span>'; } }) } }
RowWidgets [classic]
折りたたみ表示の行には、widget を追加して別のパネルやグリッドを表示できます。
rowwidgetプラグインをgridのコンフィグに記述し、表示したいコンポーネント（ここではPanel）のコンフィグを記述します。
plugins: { rowwidget: { widget: { xtype: 'panel', title: 'Panel in rowwidget', bind: { html : '{record.bio}' } } } }
次回の記事では、カラムに表示するデータの表示形式を柔軟にカスタマイズする方法を解説します。
Ext JS 7.2でデータグリッドを作成する
Ext JS 7.2の30日間無料トライアルは、製品の全ての機能にアクセスできます、アプリケーションに高性能なデータグリッドを作成する方法をお読みいただき、Get Started のドキュメントから始めましょう！
Ext JSのバージョン 3.x、4.x、5.x、6.xから最新の7.8にアップグレードするのは、大がかりな作業です。レガシーコードをレビューし、非推奨関数の対応、複数のバージョンにわたる互換性の問題への対応などが要求されるため、開発チームは相応の時間と労力を必要とします。
近年、さまざまな業界でグリッドの使用が著しい増加傾向にあります。これは、より大きなデータセットの処理と分析の必要性が増していることに起因します。金融、ヘルスケア、物流などの分野では、データを正確に操作する必要性が高まっています。これらの業界では、意思決定にスピードと正確性が求めらます。そうしたプロセスを強化するために JavaScriptグリッドが必要とされているのです。
Senchaチームは、GWT (旧 Google Web Toolkit) コンパイラを使用してWebアプリケーション開発を行う包括的なSencha Javaフレームワーク「GXT」のバージョン4.2をリリースしました。GXTを用いれば、Javaコードをコンパイルすることで、高度に最適化されたクロスプラットフォームHTML5アプリケーションを構築できます。
