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

Ext.XTemplateの補足というか真髄の機能にテンプレート内でforやifによる制御ができる点です。

Ext.XTempalteでは、テンプレートにセットするデータの値によって処理を分岐したり、配列の値をループで取り出すことができます。
サンプルではダミーのデータ(data)をオブジェクトで用意して、その内容に対してテンプレート側で制御をしながらHTMLを構築しています。

佐竹裕行

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

Written by 佐竹裕行

2 月 26th, 2010 at 11:10 am

Tagged with Ext.XTeplate, ExtJS, JavaScript, JSON, Tips, サンプル, チュートリアル, 勉強会

ExtJS入門　DomHelperの使い方3　位置指定の追加と削除

はてなブックマーク - ExtJS入門　DomHelperの使い方3　位置指定の追加と削除

Livedoorクリップ - ExtJS入門　DomHelperの使い方3　位置指定の追加と削除

DomHelperで要素を追加するの追加項目です。
DomHelperで要素の追加を行うときappendでは対象の要素の子の要素として要素を追加しましたが、insertBefore,insertAfterでは対象の要素の前後に要素を追加します。
今回はあえてパネルを使わずにやってみます。

DomHelperについてはこちらにサンプルがあります。

佐竹裕行

Written by 佐竹裕行

2 月 25th, 2010 at 3:47 pm

Tagged with DOM, DomHelper, ExtJS, Tips, サンプル, チュートリアル, 勉強会, 業務ウェブアプリケーションTips

ExtJS入門18　グリッド　レンダラーを使ってデザインを変える

はてなブックマーク - ExtJS入門18　グリッド　レンダラーを使ってデザインを変える

Livedoorクリップ - ExtJS入門18　グリッド　レンダラーを使ってデザインを変える

グリッドのデザインを変更するための機能として、レンダラー機能があります。
レンダラーを使うと、グリッドに設定する値を調整したり、デザインを変更することができます。

レンダラーはカラムごとに設定します。そのためカラムモデルで各カラム設定に追加します。

前回のグリッドのサンプルを使って、レンダラーを使ってデザインを変更してみます。
Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

2 月 5th, 2010 at 12:14 pm

Tagged with ExtJS, grid, サンプル, チュートリアル, 勉強会, 業務ウェブアプリケーションTips

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

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

グリッド関連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クラスがすべてやってくれます。
早速サンプルを紹介します。

佐竹裕行

Written by 佐竹裕行

2 月 3rd, 2010 at 11:56 am

Tagged with ExtJS, grid, JSON, Tips, サンプル, チュートリアル, 勉強会

第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

第2回ExtJS勉強会＠名古屋勉強会Ext.onReadyからはじめるExtJSのまとめ

はてなブックマーク - 第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

Livedoorクリップ - 第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

第4回ExtJS勉強会＠名古屋のチュートリアルセクション用の資料用のまとめです。
前回までのセッションでパネルを作るところまで行きました。今回はそのパネルの中に表示するHTML要素を生成するためのクラスを中心に扱います。クラスとしては以下の3つが中心になります。

Ext.XTemplateではHTMLをテンプレートと記述して、パネルに設定します。
Ext.DomHelperではDOMの追加や削除を行います。
Ext.DataView,ListViewはストアの内容をパネルに配置する簡単な方法を紹介します。

前回までのセッションのまとめはこちらです。

第3回ExtJS勉強会＠名古屋 11/27　Ext.Panelからはじめるコンポーネントの基礎

各チュートリアル記事へのリンク

・ExtJS入門10　Ext.XTemplateを使う
http://extjs.blog.sus4.co.jp/2009/12/03/extjs-tutorial10/

・ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
http://extjs.blog.sus4.co.jp/2009/12/04/extjs-tutorial11/

・ExtJS入門13 Ext.DomHelperの使い方
http://extjs.blog.sus4.co.jp/2010/01/14/extjs-tutorial13-domhelper1/

・ExtJS入門14　DomHelperの使い方2
http://extjs.blog.sus4.co.jp/2010/01/14/extjs-tutorial14-domhelper2/

・ExtJS入門14　DomHelperの使い方3　
http://extjs.blog.sus4.co.jp/2010/02/25/extjs-domhelper-insert-remove/

・ExtJS入門15 DataViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/26/extjs-tutrorial15/

・ExtJS入門16 ListViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/27/extjs-tutorial16/

佐竹裕行

Written by 佐竹裕行

1 月 28th, 2010 at 11:48 am

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料, 未分類

Tagged with チュートリアル, ビジネスExtJS, 勉強会, 勉強会まとめ

ExtJS入門16 ListViewの使い方

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サンプル

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クラスを使うべきですが、お手軽にストアの内容をグリッド表示させてたい場合は有効です。

佐竹裕行

Written by 佐竹裕行

1 月 27th, 2010 at 10:59 am

Tagged with ExtJS, JavaScript, JSON, php, サンプル, チュートリアル, 勉強会, 業務ウェブアプリケーションTips

ExtJS入門15 DataViewの使い方

テンプレートの関連のクラスとしてもう一つ、Ext.DataViewクラスがあります。
DataViewはStoreに保持しているデータをページに表示できる形式でアウトプットしてくれるクラスです。
Ext.DataViewでは、BoxComponentが帰ってきます。

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

DataViewではストアに登録されているデータをシンプルに表示させるのに使います。
以下がサンプルコードです。

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

</body>
</html>

今回はJS側でテンプレートを生成するんので、ほとんど何もありません。

・JS


Ext.onReady(function(){

    var calcData = function() {
        var data = [];
        var item = {}

        for (var i =0; i < 50; i++) {

            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);

            item = {
                id:i,
                rgb:String.format('rgb({0},{1},{2})', r, g, b)
            };
            data[i] = item;
        }
        return data;
    };

    var initData = calcData();
    var store = new Ext.data.JsonStore({
        autoLoad:true,
        data:initData,
        fields:['id','rgb']
    });

    //XTemplate.fromだとstyleに値を設定できない(Firefox)
    var dataViewTpl = new Ext.XTemplate(
        '<tpl for=".">',
        '<div class="paul">',
            '<div>',
                '<div style="background:{rgb};width:100%;height:15px;color:#EEE; font-size:small;">',
                '<div>',
            '</div>',
        '</div>',
        '</tpl>'
    );

    new Ext.Panel({
        renderTo:Ext.getBody(),
        id:'myPanel',
        title:'DataViewでカラーバーを表示',
        bodyStyle:{
            'text-align':'center'
        },
        items:{
            xtype:'dataview',
            tpl:dataViewTpl,
            store: store,
            autoHeight:true,
            itemSelector:'div.paul'
        },
        buttonAlign:'center',
        buttons:[{
            scale:'large',
            text:'New Color!',
            handler:function(){
                var newData  = calcData();
                store.loadData(newData);
            }
        }]
    });
});

まずストアを用意して、データを設定します。今回はJava Scriptでデータを生成していますが、urlでJSONを取得することもできます。
今回はランダムな色を生成してJsonStoreに保持します。アップデートボタンをつけてJsonStoreの値を変更するため関数を作っておきます。
dataViewはそのままではBoxComponentですので、パネルのアイテムとして設定します。これで階層が少し深くなりますが、パネルの機能が使えるようになります。

・実行結果

DataViewサンプル

ランダムに生成された色の値をdivに設定して表示します。ボタンをクリックして内容を更新することができます。なんちゃって横ポールスミスみたいな画面です。
XTemplateなどでは、毎回overwriteメソッドのように上書きを自分で指定していましたが、DataViewの場合はStoreの内容が更新されると自動的に再描画されます。
ストアの内容をさっと表示したい場所では便利です。また外部にAPIを持っていて、頻繁に更新するような場合もDataViewの方が簡単に表示を更新できます。

さらにストアの内容を簡易のグリッドとして表示するExt.ListViewクラスもあります。
ExtJS入門16 ListViewの使い方
http://extjs.blog.sus4.co.jp/2010/01/27/extjs-tutorial16/

佐竹裕行

Written by 佐竹裕行

1 月 26th, 2010 at 3:41 pm

Tagged with ExtJS, JavaScript, JSON, Tips, サンプル, チュートリアル, 勉強会, 業務ウェブアプリケーションTips

ExtJS入門14　DomHelperの使い方2

DOMヘルパーを使って、DOMのテンプレートを作ることができます。
イメージとしてはDomHelperでXTemplateを作る感じですね。
Ext.XTemplateについてはこちらを

サンプルコード2 テンプレート化して使う。

佐竹裕行

Written by 佐竹裕行

1 月 14th, 2010 at 11:56 am

Tagged with ExtJS, JavaScript, サンプル, チュートリアル, 勉強会, 業務ウェブアプリケーションTips

ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う

はてなブックマーク - ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う

Livedoorクリップ - ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う

前回はExt.XTemplateクラスのfromメソッドでHTML内のファイルをテンプレートに使いましたが、今回はJavascriptのファイル内にテンプレートを書く方法を紹介します。

前回の記事
ExtJS入門10　Ext.XTemplateを使う

Ext.XTemplateクラス – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.XTemplate

・HTML


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJS名古屋勉強会　xtemplateの使い方(Javascript内のテンプレート)</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>
    <!--my App JS-->
    <script type="text/javascript" src="xtemplate-new.js"></script>
</head>
<body>
<h1 style="background-color:#BDD3EF;">JS内のテンプレートを使ったXTempalte</h1>
	<div id="tpl-target">
	</div>
</body>
</html>

・Javascript


Ext.onReady(function(){
    var data = {
        name:'株式会社sus4',
        url:'http://www.sus4.co.jp',
    };

    /**
     * テンプレート
     * 中括弧でdataオブジェクトのプロパティ名を指定する。
     * js内の文字列でテンプレートを指定する場合は,
     * new Ext.XTemplate(テンプレート文字列)とする。newしないとエラーになります。
     * カンマで区切ることで複数行に渡ってテンプレート文字列を書くことができます。
     * 最後にカンマがつくとエラーになります。
     */
    var tpl = new Ext.XTemplate(
        '<h2>リンクを作る</h2>',
        '<a href="{url}">{name}</a>',
        '<h2>テーブルを作る</h2>',
        '<table>',
        '<tr>',
            '<th style="padding:3px;">{name}:</th><td>{url}</td>',
        '</tr>',
        '</table>'
    );

    //htmlファイルに作った要素のIDを指定
    var tplHtml = tpl.apply(data);
    var panel = new Ext.Panel({
		renderTo:'tpl-target',
        title:'テンプレートを使ったパネル',
        bodyStyle:'padding:20px',
        html:tplHtml
    });
});

・実行結果

Ext.XTemplateでJS内にテンプレートを書く

Ext.XTemplateのテンプレートはJavascript内に記述しています。


var tpl = new Ext.XTemplate(
        '<h2>リンクを作る</h2>',
        '<a href="{url}">{name}</a>',
        '<h2>テーブルを作る</h2>',
        '<table>',
        '<tr>',
            '<th style="padding:3px;">{name}:</th><td>{url}</td>',
        '</tr>',
        '</table>'
    );

文字列でテンプレートとなるHTMLを記述しています。テンプレート文字列が長くなって改行する場合は一旦文字列を区切って「,」(カンマ)で新しい文字列を連結して書いていきます。
例：


new Ext.XTemplate(
　　　'文字列',
　　　’文字列’
);

文字列を区切らずそのまま改行するとエラーになります。連結した最後の文字列のあとにカンマがついてもダメです。
データの設定する箇所は「{}」(中括弧)でデータオブジェクトのプロパティ名を指定します。
HTMLファイルにテンプレートを記述する、Ext.XTemplate.from()ではnewしていませんでしたが、JSファイル内に文字列としてテンプレートを記述して使う場合はnewしなければいけません。Ext.XTemaplate.from()メソッドを使うとHTMLに描いた文字列からテンプレートオブジェクトを生成して返しているためnewしなくても良かったのですが、今回は自分できちんとnewして文字列からテンプレートオブジェクトを生成します。

あとはExt.XTemplate.fromと同じようにapplyでデータの設定して、パネルの要素に設定しています。

佐竹裕行

Written by 佐竹裕行

12 月 4th, 2009 at 12:05 pm

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料, 未分類

Tagged with ExtJS, JavaScript, Tips, サンプル, チュートリアル, ビジネスExtJS, 勉強会

ExtJS入門10　Ext.XTemplateを使う

with 3 comments

Livedoorクリップ - ExtJS入門10　Ext.XTemplateを使う

ExtJSでパネル内にHTMLを作成したいときに便利なのがExt.TemplateとExt.XTemplateです。
今回はExt.XTemplateのExt.XTemplat.fromとoverwriteを使って、テンプレートで作ったエレメントをパネル内に配置するサンプルを紹介します。

Ext.XTemplateクラス – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.XTemplate

・HTML


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJS名古屋勉強会　xtemplateの使い方(from,overwriteを使う)</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="xtemplate.js"></script>
</head>
<body>
<div class="body">
</div>
<div style="display: none;">
    <div id="sampleTpl">
        <table>
            <tr>
                <td>{a_value}</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

・Javascript


Ext.onReady(function(){
    var data = {
        a_value:'テンプレートの初期値を設定します。'
    };

    //htmlファイルに作った要素のIDを指定
    var panelTpl = Ext.XTemplate.from('sampleTpl');
    var panelHtml = panelTpl.apply(data);

    var panel = new Ext.Panel({
		renderTo:Ext.getBody(),
        title:'テンプレートを使ったパネル',
        bodyStyle:'padding:20px',
        html:panelHtml,
        tbar:[
            {
                text:'テンプレート書き換え',
                handler:function(){
                    //アップデートした時間をつける
                    var dt = new Date();
                    var newData = {
                        a_value:dt.format('A g:i s秒に上書きしました')
                    };
                    //テンプレートの上書き
                    panelTpl.overwrite(panel.body,newData);
                }
            }
        ]
    });
});

・実行結果

Ext.XTemplateを使う

テンプレートを使ってエレメントを生成
Ext.XTemplateを使うとHTMLファイルに記述した要素をテンプレートとして読み込むことができます。Ext.XTemplate.from(’要素のID’)という形で指定することでテンプレートとして読み込まれます。
ここでは簡単なテーブルをテンプレートとなる要素にしています。


<div style="display: none;">
    <div id="sampleTpl">
        <table>
            <tr>
                <td>{a_value}</td>
            </tr>
        </table>
    </div>
</div>

テンプレートを記述した部分全体を表示しないように”display:none”のdivで囲っておきます。HTMLに記述したテンプレートをfromで使う場合、HTMLに書かれた部分が書き換わるのではなく、テンプレートとして読み込まれているだけなので画面の最背面に描画されてたままです。非表示にしておかないとパネルの下にテンプレートが見えてしまいます。

要素の書き換え箇所を「{,}」(中括弧)で設定します。ここでは{a_value}としています。Javascript側では、テンプレートにセットするデータを用意してapplyメソッドでセットしています。データはオブジェクトの形で渡します。

テンプレートの上書き
テンプレートの上書きにはoverwriteメソッドを使います。新しいデータを用意して、overwirteで指定した要素を書き換えます。panel.bodyとしてパネルのbody要素を書き換えています。

ここでは書き換えたときの時間を表示するためにDateクラスを使っています。Dateクラスのインスタンスにformatメソッドを渡して、日付のフォーマットを指定します。この指定の方法はPHPのdate関数と同じような書式を渡します。

佐竹裕行

Written by 佐竹裕行

12 月 3rd, 2009 at 10:42 am