- Sencha.com—Japanese

Ext JS Data Gridをすばやくカスタマイズする方法（part 1/6）

2020-03-10 360 Views

Ext JS Data Gridは、高速で強力かつ柔軟に利用できます。Ext JSを使用すると、ユーザーは自分のアプリケーションに合わせてグリッドの外観をすばやくカスタマイズできます。全6回構成のブログシリーズでExt JS Data Gridをカスタマイズするさまざまな方法をカバーします。

ここではNBA 2020プレーヤーの評価を表示する単純なグリッドを作成します。

最初のブログ記事では、GridとColumnに予め用意されているプロパティを使ったデモを用いて説明します

Ext JS Grid のセットアップ

最初に定義するのはExt.data.Modelです。これは基本的にデータのタイプを表すフィールドのコレクションです。ここでは ‘player’, ‘team’, ‘rating’ のフィールドを定義しています。

Ext.define('Player', {
    extend: 'Ext.data.Model',
    fields: ['player', 'team', {
        name: 'rating',
        type: 'int'
    }]
});

次にExt.data.Storeをセットアップします。これはユーザインスタンスを含みます。この例は個々のデータをStoreに直接記述して静的な情報として定義していますが、実際のアプリケーションでは、データをサーバーからロードすることもできます。この操作は Ext.data.proxy.Proxy を用いて容易に行えます。

ここでは ’player’, ’team’. ‘rating’ として扱うデータを保持しています。

 var store = Ext.create('Ext.data.Store', {
    model: 'Player',
    data: [{
        player: 'Kemba Walker',
        team: 'Boston Celtics',
        rating: 88
    }, {
        player: 'Josh Richardson',
        team: 'Philadelphia 76ers',
        rating: 79
    }]
});

データの表示は Ext.grid.Panel を使用し、必要なカスタマイズを行います。

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    title: 'NBA 2K20 player rating',
    //使用するストアの定義
    store: store,
    columns: [{
        dataIndex: 'player',
        text: 'Name',
    }, {
        dataIndex: 'rating',
        text: 'Rating',
    }, {
        dataIndex: 'team',
        text: 'Team',
    }]
});

GridとColumnのプロパティをカスタマイズする

先程作成したGridはカスタマイズを行っておらず、魅力的なものとは感じられません。そこでGridの機能をより使いやすくカスタマイズする際に使用できる一般的なプロパティを次に示します。

Gridのプロパティ:

collapsible：Gridのヘッダに配置されたアイコンで展開/折りたたみ操作を可能にする
headerBorders [Classic]：Gridの境界線の表示、非表示を設定する
selModel [Classic]：Gridに表示したデータの選択方法の設定
hideHeaders：Columnのヘッダを非表示にする
title：Columnのタイトルバーにタイトルを表示する
width, height：Gridの幅と高さを指定する
store：表示されるデータが含まれるStoreを指定する

Column のプロパティ:

dataIndex : Modelのフィールド名を指定する
text：Columnヘッダーのテキストを設定する
locked：特定のColumnを固定表示する
sortable：Columnのソートを許可する
width：Columnの幅を調整する
flex：Columnのflexを調整する
align：Columnの整列方法を調整する

Ext.create('Ext.grid.Panel', {
　　renderTo: document.body,
　　title: 'NBA 2K20 player rating',
　　//グリッドパネルの折り畳み/展開を有効にする
　　collapsible: true,
　　//ヘッダの境界線を表示
　　headerBorders: true,
　　//使用するストアの定義
　　store: store,
　　columns: [{
　　　　dataIndex: 'player',
　　　　text: 'Name',
　　　　//このカラムを固定表示する
　　　　locked: true,
　　　　width: 150,
　　　　//カラムのソート機能を無効化
　　　　sortable: false
　　}, {
　　　　dataIndex: 'rating',
　　　　text: 'Rating',
　　　　flex: 1
　　}, {
　　　　dataIndex: 'team',
　　　　text: 'Team',
　　　　flex: 1,
　　　　//カラムのソート機能を無効化
　　　　sortable: false
　　}]
});

このコードをFiddle Toolで確認して実行する

その他のコンフィグやプロパティについては Ext JS Grid と Panel のドキュメントをお読みください。

次回のブログ記事ではGridに「グループ化」機能を追加するカスタマイズ方法を説明します。ご期待ください。

Part2の記事を読む

Ext JS 7.1でデータグリッドを作成する

Ext JS 7.1の30日間無料トライアルは、製品の全ての機能にアクセスできます、アプリケーションに高性能なデータグリッドを作成する方法をお読みいただき、Get Started のドキュメントから始めましょう！