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

株式会社sus4 開発チーム

タグ ‘php’ 一覧

ExtJS入門16 ListViewの使い方

without comments

このエントリーを含むはてなブックマークはてなブックマーク - ExtJS入門16 ListViewの使い方 この記事をクリップ!Livedoorクリップ - ExtJS入門16 ListViewの使い方 Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This

DataViewと同じストアを簡易に表示させるクラスに、Ext.ListViewがあります。DataViewでは項目に対してHTMLのテンプレートを用意してストアの内容を表示させていましたが、ListViewでは簡易のグリッドのようにリスト項目を並べてくれます。

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

Ext.DataViewの使い方はこちらから

ExtJS入門15 DataViewの使い方

・PHP


<?php
    $row = array();

    for ($i = 0; $i < 10; $i++){
        $row[$i] = array(
            'title' => 'データ' . $i,
            'datetime' => date('Y/m/d H:i:s')
        );
    }

    $arr = array(
        'total' => $i,
        'row' => $row,
        'success' => true
    );

    header("Content-Type: text/javascript; charset=utf-8");
    echo json_encode($arr);
    die();
?>

今回はJsonStoreへのデータは動的にPHPから提供するようにします。ここでは単純にtitleと時刻を生成してJSONで出力しています。

・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名古屋勉強会 ListViewの使い方</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="listview.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>

HTMLは基本的にいつもと同じですね。

・JS


Ext.onReady(function(){

    //ストアを用意する
    var store = new Ext.data.JsonStore({
        url:'listview.php',
        totleProperty:'total',
        root:'row',
        autoLoad:true,
        fields:['title','datetime']
    });

    new Ext.Panel({
        renderTo:Ext.getBody(),
        id:'myPanel',
        title:'ListViewでStoreの内容を表示する',
        items:{
            xtype:'listview',
            store: store,
            autoHeight:true,
            emptyText: 'No images to display',
            reserveScrollOffset: true,
            columns: [{
                header: '項目',
                width: .5,
                dataIndex: 'title'
            },{
                header: '日付',
                width: .5,
                dataIndex: 'datetime',
            }]
        },

        //ボタン設定
        buttonAlign:'center',
        buttons:[
            {
                text:'更新',
                handler:function(){
                    store.reload();
                }
            }
        ]
    });
});

・実行結果

ListViewサンプル

ListViewサンプル

Ext.ListViewのxtypeはlistviewです。戻り値はBoxComponentですので親にパネルを設定して、そのitemsにListViewを設定します。
基本はDataViewとよく似ています。違いはtplコンフィグが無くcolumnsを指定します。columnsの書き方はグリッドのcolumModelとよく似ています。グリッドについてはまた詳しく解説します。

columnにはオブジェクトを配列で表示設定を指定します。

  • headerは項目の見出しテキストを設定します
  • dataIndexがストアに保持されているデータのプロパティ名を指定します。JsonStoreで指定したfieldsの項目の一つになります。/li>
  • widthは各列の幅のパーセンテージを指定します。0.5とすると画面の50%ということになります。

実行すると、綺麗なグリッドが自動的に作られています。見出しをクリックするとソートの方向も変更できます。

APIドキュメントでは以下のような特徴を上げています。
Ext.ListViewは、Gridの様な高速で軽いリストビュー機能を提供します。 主な機能は、次の通りです。
・カラムのリサイズ
・カラム選択
・カラム幅は、初期状態でコンテナの比率に自動的に調整されます。
・あらゆる形式に対応するためレンダーとしてテンプレートが使用できます。
・水平スクロールはサポートされません。
・カラム編集はサポートされません。

より多機能はグリッドはExt.grid.GridPanelクラスを使うべきですが、お手軽にストアの内容をグリッド表示させてたい場合は有効です。

  • Share/Bookmark

佐竹 裕行

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

Get Adobe Flash playerPlugin by wpburn.com wordpress themes