ExtJSで楽しくRIA業務アプリ開発

株式会社sus4 開発チーム

ExtJS入門17 グリッド・パネル 基本編

コメントが1件あります

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門17 グリッド・パネル 基本編 この記事をクリップ!Livedoorクリップ - ExtJS入門17 グリッド・パネル 基本編 Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

いよいよグリッド・パネルをサンプルをやっていこうと思います。
まず基本として、ごくシンプルなグリッドパネルを作成します。

グリッド関連APIリファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridPanel
http://extdocs.xenophy.com/?class=Ext.grid.GridPanel

ExtJS -3.0 日本語APIドキュメント – Ext.data.JsonStore
http://extdocs.xenophy.com/?class=Ext.data.JsonStore

ExtJS -3.0 日本語APIドキュメント – Ext.grid.ColumnModel
http://extdocs.xenophy.com/?class=Ext.grid.ColumnModel

グリッドパネルについて
グリッドパネルはスプレッドシートのような表を作るウィジェットで様々なデータを一覧表示させるのに便利です。ExtJSではExt.grid.GridPanelやExt.grid.EditorGridなどが用意されており、高機能なグリッドを作成することができます。

グリッドパネルの作るために必要な要素はデータソースと表示列(カラム)の設定です。
データソースはExtJSではストア(store)と呼ばれます。ストアはJSONやXML等のデータをExtJS内で保持するためのかたちです。
ストアに渡すデータはローカル変数でもリモートのAPIでも構いません。JsonStoreやXmlStoreを使えば簡単にJSON形式、XML形式のデータをストア格納できます。

表示列の設定は、ストアに格納しているデータをどのようなカラムでグリッドに表示するかを設定します。Ext.grid.ColumnModelクラスを使います。

簡単なグリッドであれば以上の2つをグリッドクラスのコンフィグに設定するだけで、あとはGridクラスがすべてやってくれます。
早速サンプルを紹介します。

シンプルなグリッドパネルのサンプル

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJS名古屋勉強会 Gridの使い方 基本編</title>

    <!--Ext JS CSS-->
    <link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
    <!--Ext JS-->
    <script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../js/ext/ext-all.js"></script>
    <script type="text/javascript" src="grid-basic.js"></script>
</head>
<body>

</body>
</html>

Java Script


Ext.onReady(function(){

    //1.データを用意
    var data = [
        {
            id:1,
            rank:1,
            name:'IE',
            percentage:62.69
        },
        {
            id:2,
            rank:2,
            name:'Firefox',
            percentage:24.61
        },
        {
            id:3,
            rank:3,
            name:'Chrome',
            percentage:4.63
        },
        {
            id:4,
            rank:4,
            name:'Safari',
            percentage:4.46
        },
        {
            id:5,
            rank:5,
            name:'Opera',
            percentage:2.40
        },
        {
            id:6,
            rank:6,
            name:'Opera Mini',
            percentage:0.53
        }
    ];

    //2.データストアを用意
    var store = new Ext.data.JsonStore({
        data:data,
        fields:[
            {name:'id'},
            {name:'rank'},
            {name:'name'},
            {name:'percentage',type:'float'}
        ]
    });

    //3.カラムモデルを用意
    var column = new Ext.grid.ColumnModel([
        {
            header:'順位',
            sortable:true,
            dataIndex:'rank',
            width:50
        },
        {
            header:'ブラウザ名',
            sortable:true,
            dataIndex:'name',
            width:100
        },
        {
            header:'シェア',
            sortable:true,
            dataIndex:'percentage',
            width:80
        },
        {
            header:'ID',
            sortable:true,
            dataIndex:'id',
            width:20
        }
    ]);

    //4.グリッドパネルの作成
    new Ext.grid.GridPanel({
        renderTo:Ext.getBody(),
        id:'my-grid',
        title:'初めてのグリッドパネル',
        height:185,
        width:260,
        cm:column,
        store:store
    });
});

実行結果

シンプルなグリッド

シンプルなグリッド

やることは4つです。
1.データの用意(今回はローカル変数として作成)
2.ストアの作成(データに合わせてJsonStoreを選択)
3.カラムモデルの作成
4.グリッドの作成

データ(data)はJSに直に書いています。なんとなく2009年12月のブラウザシェアにしています。今回はソートもできるのでpercentageという項目にシェアの割合を入れておきます。JSの配列なのでJSONです。これに対応するストアにJsonStoreを使えば簡単にストアを作成できます。

ストアはデータ(data)を元データとしてストアとして保持します。dataコンフィグはさっき作ったブラウザシェアデータ(JSON形式)を設定します。JSON形式のデータを読み込むのでJsonStoreクラスでストアを作ります。
fieldsコンフィグには元データの項目を設定します。ここで設定されない項目はストアに保持されないので必要な項目はすべて列挙しておく必要が有ります。今回はオブジェクトの配列を指定しています。nameには元データのJSONのプロパティ名をtypeは任意で、ソート等の機能を正しく使うときに指定します。今回はpercentageにだけfloatを設定しています。
typeの指定がない場合はfieldsは以下のように書くこともできます。


    var store = new Ext.data.JsonStore({
        data:data,
        fields:[
	        'id',
            'rank',
            'name',
            'percentage'
        ]
    });

次にカラムモデルを作成します。カラムモデルはグリッドの列を決定します。Ext.grid.ColumModelクラスを使って作成します。設定はオブジェクト配列で今回は簡単に以下の4つを設定しました。
・header:列の見出し部分のテキスト
・sortable:ソート設定 真偽値で設定
・dataIndex:表示するデータのインデックス名
・width:列の幅指定

ストアとカラムモデルができれば、あとはこの2つをGridクラスに設定するだけです。
Ext.grid.GridPanelクラスを使います。cmにカラムモデルをstoreにストアをそれぞれ設定します。

これでシンプルなグリッドの完成です。
たったこれだけの設定にもかかわらず、各項目のソートや列をドラッグアンドドロップで並び換え、列の幅の変更ができるグリッドが完成します。
今回のグリッドのサンプルは数あるExtJSのグリッドの機能のうちほんの少しの機能しか使っていません。次回以降ExtJSのグリッドの様々な機能を使っていきます。

  • Share/Bookmark


佐竹 裕行

1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。

One Response to 'ExtJS入門17 グリッド・パネル 基本編'

Subscribe to comments with RSS or TrackBack to 'ExtJS入門17 グリッド・パネル 基本編'.

  1. [...] ExtJS入門17 グリッド・パネル 基本編 ※時間があればここまで進みます [...]

コメントを残す

Get Adobe Flash playerPlugin by wpburn.com wordpress themes