このページの本文へ

入門Ext JS:グリッドパネルの使い方をマスター (3/5)

2009年08月20日 14時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

グリッドパネルを表示する

 次に、(2)グリッドパネルの表示処理です。グリッドパネルは、 new Ext.grid.GridPanel() を使って生成できます。あらかじめHTML側に、<div id="dataGridArea"></div> として表示するコンテナを用意しておいてください。

 グリッドパネルに表示に必要なオプションを設定していきます。

 データストアにより読み込まれたデータは store を使って指定します。グリッドパネルの表示先は renderTo を使い、表示先のコンテナ(div要素)のID名を指定します。

 XMLデータのフィールドとカラムの対応は、columns配列で設定します。パネルのヘッダーに表示する項目名を header に書き、カラム幅を width にピクセル単位で指定します。表示するXMLのフィールド名は dataIndexに指定します。たとえば dataIndex: 'name' とすると事業所名が、dataIndex: 'address' なら住所が表示されます。該当するデータが存在しない場合はエラーにはならず空欄になります。

 最後にグリッドパネル全体のサイズをwidthheightにピクセル単位で指定します。

 ここまでをまとめたものがサンプル01です。なお、作成したスクリプトはWebサーバーにアップロードしないと正しく動作しません(グリッドパネルの内容が表示されない)。


XMLデータが読み込まれグリッドパネルに表示されます

XMLデータが読み込まれグリッドパネルに表示されます


サンプル01のソースコード


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Sample</title>
        <link rel="stylesheet" href="resources/css/ext-all.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="js/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-all.js"></script>
        <script type="text/javascript"><!--
            Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
            Ext.onReady(function(){
                var myStoreData = new Ext.data.Store({
                    url: 'maplist.xml',
                    reader: new Ext.data.XmlReader({
                        record: 'company'
                    }, [
                            { name:'name' },
                            { name:'address' },
                            { name:'lat' },
                            { name:'lng' }
                        ]
                    )
                });
                myStoreData.load();
                var grid = new Ext.grid.GridPanel({
                    store: myStoreData,
                    renderTo : 'dataGridArea',
                    columns: [
                        { header: '名 称', width: 150, dataIndex: 'name' },
                        { header: '住 所', width: 150, dataIndex: 'address' }
                    ],
                    width:310,
                    height:120
                });
            });
        // --></script>
    </head>
    <body>
        <h1>Ext JS グリッド表示サンプル</h1>
        <p>ページが読み込まれるとグリッドパネルが表示されます。</p>
        <div id="dataGridArea"></div>
    </body>
</html>


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています