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 のドキュメントから始めましょう！
Senchaチームは、GWT (旧 Google Web Toolkit) コンパイラを使用してWebアプリケーション開発を行う包括的なSencha Javaフレームワーク「GXT」のバージョン4.2をリリースしました。GXTを用いれば、Javaコードをコンパイルすることで、高度に最適化されたクロスプラットフォームHTML5アプリケーションを構築できます。
Ext JS開発を効率化し、生産性を加速する革新的なローコードエディター「Rapid Ext JS」の正式リリース「バージョン 1.0」の提供を開始しました。Sencha Ext JSを利用している開発者は、開発プロセスを効率化し、スムーズかつスピーディにWeb開発を推進できます。この記事では、Rapid Ext JSがExt JS開発プロジェクトの効率化にどのように貢献するのか、その主要な機能とともに紹介します。
Senchaチームは、Sencha Architect バージョン4.3.6の提供開始を発表します。この新バージョンでは、4.3.5リリースをベースとして、Ext JS 7.8での品質強化を受け、Classicツールキット向けの新機能Froalaサポートが追加されたほか、シームレスなインストール、容易なアップグレードプロセス、さらなる品質向上が図られています。
