HOME > Learning Place >  No.3 コンポーネントの利用 – (2)グリッド

No.3 コンポーネントの利用 – (2)グリッド

前回には、ボーダーレイアウトの画面を定義して、west リージョンにデータビューを配置しました。

今回は、center リージョンに社員名簿を表示するグリッドを表示してみましょう。

グリッドについて

まずは、グリッドについて。 Ext JS の最もポピュラーなコンポーネントの一つです。 Excel のワークシートが画面上に現れたのかのような、リッチな見た目で操作性のよい一覧表を表示できます。 フィルタリングやソートにも対応していますし。

プラグインやフィーチャーによって、編集可能にしたり、グループ化したり合計行を出したりと、いろいろな機能が備わっています。 Web アプリケーションでは必須である、データのページングにも対応しますし、無限スクロールにも対応しています。

このグリッドを使って、社員名簿を表示するというのが今回のタスクです。

グリッドビューの仕様
  • 社員のリストを表示します。
  • 社員のデータには次のフィールドがあります。
    • id
    • name: 氏名
    • department_id: 部署id
    • email: メールアドレス
    • gender: 性別
    • age: 年齢
  • グリッドに表示するのは次の項目
    • name: 氏名
    • department_id: 部署id
    • gender: 性別
    • age: 年齢
  • 性別と年齢の幅は 80px 、のこりの幅を部署と氏名に割り当て
  • 年齢フィールドは数値として表示する。

社員データのモデルとストアを準備

では、No.3 (1) の時と同じように、モデルとストアを準備します。

app/model/Employee.js

1
2
3
4
5
6
7
8
9
10
11
12
13

    Ext.define('SlView.model.Employee', {
        extend: 'Ext.data.Model',
 
        fields:[
            'id',
            'name',
            'department_id',
            'email',
            'gender',
            'age'
        ]
 
    });

app/store/Employees.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    Ext.define('SlView.store.Employees', {
 
        extend: 'Ext.data.Store',
        model: 'SlView.model.Employee',
        data: [{
            id: 1,
            name: '新垣結衣',
            department_id: 1,
            email: 'aragaki@example.com',
            gender: '女',
            age: 25
        }, {
            id: 2,
            name: '石原さとみ',
            department_id: 1,
            email: 'ishihara@example.com',
            gender: '女',
            age: 27
        }, {
            id: 3,
            name: '佐々木希',
            department_id: 2,
            email: 'sasaki@example.com',
            gender: '女',
            age: 26
        }, {
            id: 4,
            name: '武井咲',
            department_id: 2,
            email: 'takei@example.com',
            gender: '女',
            age: 20
        }]
 
    });

こんな会社に勤めてみたいものですね。

コントローラーでモデルとストアを読み込ませます。

app/controller/Main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    Ext.define('SlView.controller.Main', {
 
        extend: 'Ext.app.Controller',
 
        models: [
            'Department',
            'Employee'
        ],
 
        stores: [
            'Departments',
            'Employees'
        ]
 
    });

社員の一覧を表示するグリッドを作成

モデルとストアの定義に目新しいところはありませんでしたね。 では、グリッドを定義していきましょう。

app/view/Grid.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    Ext.define('SlView.view.Grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.mygrid',
 
        requires: [
            'Ext.grid.column.Number'    // *6
        ],
 
        title: '従業員',
 
        store: 'Employees',         // *1
        columns: [{                 // *2
            xtype: 'gridcolumn',
            dataIndex: 'department_id', // *3
            text: '部署',
            flex: 1                 // *5
        }, {
            xtype: 'gridcolumn',
            dataIndex: 'name',
            text: '名前',
            flex: 1
        }, {
            xtype: 'gridcolumn',
            dataIndex: 'gender',
            text: '性別',
            width: 80               // *4
        }, {
            xtype: 'numbercolumn',  // *6
            dataIndex: 'age',
            text: '年齢',
            width: 80
        }]
 
    });
  1. データビューと同様 ‘store’ コンフィグには、ストア名をセットします。
  2. columns コンフィグで、グリッドのカラムを設定します。
  3. dataIndex コンフィグに、モデルのフィールド名を指定します。
  4. カラム幅を指定するときには、width コンフィグにピクセル値を指定します。
  5. flex を指定すると、幅を自動計算してくれます。この場合だと、グリッド全体の幅から 160px (性別と年齢のカラムの合計) を引いた幅を、部署と名前カラムで等分に分け合います。
  6. 年齢カラムを numbercolumn として、数値型カラムにしています。また、numbercolumn を使う為に、 Ext.grid.column.Number を requires 配列に追加しています。

メインビューに追加する

さて、コンポーネントができたので、それをメインビューに配置します。

app/view/Main.js

7
8
9
10
11

    requires: [
        'Ext.layout.container.Border',
        'SlView.view.List',
        'SlView.view.Grid'
    ],

まず、requires 配列にクラスを追加して、

34
35
36
37

    }, {
        xtype: 'mygrid',
        title: '社員',
        region: 'center'

center リージョンの xtype コンフィグを変更します。

ここでブラウザで表示をしてみます。 多分、グリッドの表示が思いの外イケていない状態だと思います。 これは、No.3 (1) でビルドをした状態だと、グリッドを表示する CSS が読み込まれない状態だからです。 一度、アプリケーションをビルドすると、しっかりと表示されます。

表示内容の調整

気になるところが 2点あります。 一つは、部署名ではなく、部署コードが表示されていること。 もう一つは、年齢が 20.00 と表示されていることです。

これらを解決していきましょう。

グリッドのカラムの renderer コンフィグに関数オブジェクトを指定すると、その関数の戻り値をグリッドのセルに表示することができます。

その中で、Departments ストアを引いて、部署名を表示させましょう。

app/view/Grid.js

1
2
3
4
5
6
7
8
9
10
11
12

    columns: [{
        xtype: 'gridcolumn',
        dataIndex: 'department_id',
        text: '部署',
        flex: 1,
        renderer: function(value) {     // *1
            var depts = Ext.getStore('Departments'),    // *2
                rec = depts.getById(value);             // *3
 
            return rec.get('name');                     // *4
        }
    }, {
  1. ここで、renderer コンフィグに関数を指定しています。
  2. Departments ストアを取得し、
  3. id でストアを引いて
  4. 部署名 (name) を値として返しています。

年齢の表示の小数以下を消したいですね。 numbercolumn には、format というコンフィグを指定できます。 そこで数値のフォーマットを定義できます。

数値なので、ついでに表示を右寄せにもしてみましょう。

app/view/Grid.js

1
2
3
4
5
6
7
8

    }, {
        xtype: 'numbercolumn',
        dataIndex: 'age',
        text: '年齢',
        width: 80,
        format: '0',        // *1
        align: 'right'      // *2
    }]
  1. フォーマットを指定することで、小数以下の表示をさせなくしました。 format に指定できる文字列は、Ext.util.Format.number の第1引数に渡すものです。
  2. align コンフィグでそのカラムの文字の配置を変更できます。

表示されたグリッドを触って見ると、カラムでソートさせたり、カラムの表示／非表示を切り替えたりする機能が使えるのが分かります。 標準でこれだけの機能が動くんですね。素晴らしいです。

ここまでで、中央ペインに社員名簿を一覧表示することができました。 次回は、画面の下 (south リージョン) にフォームを設置して、データを表示したり入力したりできるようにします。 お楽しみに。

Learning Placeトップに戻る

PAGETOP