Ext JS のデータグリッドを素早くカスタマイズする方法 (Part 3/6)

この記事は 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 :

次回の記事では、「グリッド表示データ」の方法について説明します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です