この記事は Sencha 公式ブログ
How to Quickly Customize Ext JS Data Grid (Part 3/6) –Row Editing Methods
を翻訳したものです
6回シリーズ「Ext JSグリッドのカスタマイズ」の3回目の記事では、行の編集方法を使ってデータグリッドをカスタマイズすることに焦点を当てます。 シリーズの第1部と第2部を読み逃した場合は、こちらをご覧ください。
ここで紹介するグリッドの例は、NBA 2020年の選手レーティングデータのサンプルです。
セル編集/ 行編集
1. グリッド設定でプラグインを有効にする
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'
]
}
}
Sencha Fiddle:
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>';
}
})
}
}
Sencha Fiddle:
RowWidgets [classic]
追加のウィジェット（パネルやグリッドなど）は、ネストされたグリッド行で追加することができます。その方法をご紹介します。
グリッド設定でrowwidgetプラグインを有効にする:
plugins: {
rowwidget: {
widget: {
xtype: 'panel',
title: 'Panel in rowwidget',
bind: {
html : '{record.bio}'
}
}
}
}
Sencha Fiddle :