グリッド « 株式会社ゼノフィ

グリッド

Ext.grid.Panel は Ext JS の中心をなす部分の一つです。信じられないほど多機能なコンポーネントであり、データの表示、ソート、グループ化、編集などの機能を簡単な方法で提供します。

基本的な GridPanel

まずは、基本的な Ext.grid.Panel を生成しましょう。ここではシンプルな Grid を使い始めるための全ての情報を提供します。

Model と Store

Ext.grid.Panel は、簡単に言うと Ext.data.Store. に含まれているデータを表示するコンポーネントです。 Ext.data.Store. は、レコードまたは Ext.data.Model のインスタンスのコレクションと考えて下さい。

この仕組みの長所は、責務を分けることです。 Ext.grid.Panel は、データの表示に関してのみ責任をもち、 Ext.data.Store は、 Ext.data.proxy.Proxy. を使って、データの取得や保存の世話をします。

まず、 Ext.data.Model. を定義する必要があります。 Model はあるデータの種類を表すフィールドの集まりです。”User” を表すモデルを定義しましょう。

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email', 'phone' ]
});

次に、いくつかの User のインスタンスを格納する Ext.data.Store を生成しましょう。

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
        { name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
        { name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
        { name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
    ]
});

簡単にするため、 Ext.data.Store が data コンフィグでデータをインラインで指定しています。実際のアプリケーションでは、サーバーからデータを読み込む Ext.data.proxy.Proxy を使うよう Ext.data.Store を構成する場合がほとんどです。

Grid Panel

これで、データ構造を定義する Model ができました。また、いくつかの Model インスタンスを Ext.data.Store にロードしました。これで、 Ext.grid.Panel. を使ってデータを表示できます。

このサンプルでは、Grid を即座に HTML ドキュメントに描画するために、 renderTo コンフィグを指定しています。

多くの場合、Grid は Ext.container.Viewport に配置して、描画されることになります。

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

以上で完了です。

ここでは Body 要素に描画する Ext.grid.Panel を生成しています。また、GridPanel にその前に生成した userStore からデータを取得するように指示しています。

最後に、GridPanel の columns を定義し、dataIndex プロパティを指定しています。この dataIndex は、Model のフィールドとカラムを関連づけます。

Name カラムは、100px の固定幅があり、ソートや非表示はできないようにしています。Email Address カラムは、デフォルトで非表示になっています（他のカラムのメニューを使用って再表示できます）。最後に、 Phone Number カラムは、flex が指定されているので Grid の残りの幅に合わせられます。

もう少し大きなサンプルを見たい人は、 Array Grid Example をご覧ください。

Renderer

カラムのコンフィグの renderer プロパティを使って、データの表示方法を変更できます。 renderer は、元になる値を変更し、表示用の新しい値を返す関数です。通常よく使われる renderer は、 Ext.util.Format, に含まれていますが、自分でも作成できます。

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        // Ext.util.Format クラスのメソッドを renderer にして日付をフォーマット
        renderer: Ext.util.Format.dateRenderer('m/d/Y')
    },
    {
        text: 'Email Address',
        dataIndex: 'email',
        // 自前の関数でメールアドレスをフォーマット
        renderer: function(value) {
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
        }
    }
]

カスタムレンダラーのライブのデモは Kitchen Sink の Array Grid でご覧ください。

Grouping

行をグループに編制するのは簡単にできます。まず、ストアに Ext.data.Store#groupField プロパティを指定します。

Ext.create('Ext.data.Store', {
    model: 'Employee',
    data: ...,
    groupField: 'department'
});

次に、グリッドのコンフィグに行をグループで表示する操作をする Ext.grid.feature.Feature を設定します。

Ext.create('Ext.grid.Panel', {
    ...
    features: [{ ftype: 'grouping' }]
});

ライブのデモは Kitchen Sink の Grouping Grid Panel でご覧ください。

SelectionModel

GridPanel は単純にデータを表示するために使用できます。しかし、Grid のデータを操作する必要があることがよくあります。全ての GridPanel には、 Ext.selection.Model があり、それを使うとデータの洗濯状態が分かります。 SelectionModel にはいくつかの種類があり主なものは、行が全部選択される Ext.selection.RowModel, と、個々のセルが選択される Ext.selection.CellModel, です。

GridPanel は、デフォルトでは Ext.selection.RowModel を使用しますが、 Ext.selection.CellModel: に簡単に切り替えられます。

Ext.create('Ext.grid.Panel', {
    selType: 'cellmodel',
    store: ...
});

Ext.selection.CellModel を使うと、二つの部分が変更されます。まずは、セルをクリックすると、行全体の選択ではなく、そのセルだけを選択するようになります。次に、キーボードのナビゲーションは、行から行への移動ではなく、セルからセルの移動に変わります。セルベースの SelectionModel は、編集機能とともによく使用されます。

編集プラグイン

GridPanel には、編集のサポートが組み込まれています。主な二つの編集モードを紹介します：CellEditing と RowEditing です。それぞれプラグインを導入して有効化します。

CellEditing プラグイン

CellEditing によって、GridPanel のそれぞれのセルでデータを編集できます。セル編集を実装するには、GridPanel の編集可能にする Ext.grid.column.Column にエディターを構成する事から始めます。そのためには Ext.grid.column.Column#editor を使います。エディターとして使用したいフィールドの xtype を指定するのが最もシンプルな方法です。

Ext.create('Ext.grid.Panel', {
    ...
    columns: [
        {
            text: 'Email Address',
            dataIndex: 'email',
            editor: 'textfield'
       }
    ]
});

もしエディターフィールドの動作に関して、より細かい管理が必要な場合には、 Ext.grid.column.Column#editor コンフィグをにフィールドのコンフィグオブジェクトに指定できます。例えば、 Ext.form.field.Text を使って、値を必須にしたい場合は次の様にします。

columns: [
    text: 'Name',
    dataIndex: 'name',
    editor: {
        xtype: 'textfield',
        allowBlank: false
    }
]

エディターフィールドとしては、Ext.form.field パッケージのどのクラスでも利用可能です。日付が含まれているカラムを編集したいとしましょう。 Ext.form.field.Date エディターを利用できます。

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        editor: 'datefield'
    }
]

Ext.grid.Panel で Ext.grid.column.Column#editor が構成されていない Ext.grid.column.Column は編集できない状態になります。

さて、編集可能なカラムを構成し、データを編集するために使用されるエディターフィールドも構成しましたので、次の手順は、 SelectionModel を指定します。 Ext.grid.Panel のコンフィグで Ext.selection.CellModel Ext.selection.CellModel を使いましょう。

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'cellmodel'
});

最後に、編集を可能にするために、 Ext.grid.Panel のコンフィグに Ext.grid.plugin.CellEditing: を追加する必要があります。

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ]
});

以上で、CellEditing プラグインを使って、編集可能がグリッドが出来ました。動作するサンプルは、 Cell Editing をご覧ください。

RowEditing プラグイン

RowEditing プラグインでは、セルを個々に編集するのではなく、行全体を編集できるようになります。行の編集はセルの編集と同じように動作します。プラグインの種類を Ext.grid.plugin.RowEditing に変更し、selType を rowmodel にセットするだけです。

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ]
});

サンプルは、 Row Editing をご覧ください。

ページング

時に、データが大きすぎて一つのページに表示できない場合があります。 Ext.grid.Panel は、 Ext.toolbar.Paging, を使って、データセットから個々のページを表示することをサポートしています。前へ/次へボタンでページをロードします。

Store の設定

Ext.grid.Panel, にどれかのページングを設定する前に、 Ext.data.Store がページングをサポートするように構成する必要があります。下記のサンプルでは、 Ext.data.Store に Ext.data.Store#pageSize を追加し、 Ext.data.reader.Reader で Ext.data.reader.Reader#totalProperty: を構成しています。

Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 4,
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            totalProperty: 'total'
        }
    }
});

Ext.data.reader.Reader#totalProperty コンフィグによって Ext.data.reader.Json に、JSON レスポンスの合計数を取得できる場所を指定しています。この Ext.data.Store は、JSON の次の様なレスポンスを使用するように構成されています。

{
    "success": true,
    "total": 12,
    "users": [
        { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" },
        { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" },
        { "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" },
        { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" }
    ]
}

PagingToolbar

Ext.data.Store がページングをサポートするように設定しましたので、最後は、 Ext.toolbar.Paging. を構成するだけです。 Ext.toolbar.Paging は、アプリケーションのレイアウト内のどこでも配置してもいいですが、通常は、 Ext.grid.Panel: にドッキングさせます。

Ext.create('Ext.grid.Panel', {
    store: userStore,
    columns: ...,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: userStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
});

動作するサンプルは、 Paging Grid をご覧ください。

Buffered Rendering

グリッドは、大規模なデータセットを描画するために、PagingToolbar を利用する代わりに、バッファードレンダリングにも対応しています。ユーザーは、全てのレコードを同時に画面にレンダリングしたときに発生するパフォーマンス劣化を避け、何千ものレコードをスクロールできます。グリッドは pageSize が指定されているストアにバインドします。

バッファードレンダリングを使うには、グリッドのコンフィグに bufferedrenderer プラグインを設定します。大規模なデータセットでストアが完全にロードできます。

Grid の表示エリアと、スクロールするための前後のわずかなバッファゾーン (Ext.grid.plugin.BufferedRenderer#leadingBufferZone) に必要な行だけが描画されます。スクロールされると、スクロールの方向に新しい行が描画され、反対側からは行が削除されていきます。

Ext.create('Ext.grid.Panel', {
    // Use a BufferedRenderer plugin
    plugins: {
        ptype: 'bufferedrenderer'
    },
    // Configure the rest as usual
    ...
});

動作するサンプルは Buffered Renderer をご覧ください。