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

タグ ‘JavaScript’ 一覧

ExtJS入門　Ext.XTemplateの補足

without comments

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

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

Read the rest of this entry »

佐竹裕行

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

Written by 佐竹裕行

2 月 26th, 2010 at 11:10 am

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

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

[ExtJS事例紹介]ウェディングステージグレイセル

without comments

Livedoorクリップ - [ExtJS事例紹介]ウェディングステージグレイセル

今回は弊社で作成したExtJSを活用したサイトの紹介です。

Wedding Stage GRACEL（ウエディングステージグレイセル）は、愛知県の北東部に位置する総合結婚式場です。
今回サイトをリニューアルするにあたり管理画面をExtJSのViewportアプリで構築し、トップページやギャラリーなどではExt Coreを活用しています。

サイトはこちらになります。

Wedding Stage Gracel – 瀬戸、尾張旭、長久手エリアの結婚式場ならウェディングステージ　グレイセル

株式会社sus4ニュースリリースグレイセル様Webサイトをリニューアルしました

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

2 月 25th, 2010 at 3:51 pm

Posted in ExtJS営業向け知識集

Tagged with ExtJS情報, Ext活用事例, grid, JavaScript, JSON, UI, お知らせ, プラグイン

ExtJS Tips FirefoxでExtJSとブラウザのコンテストメニューが重なるときの対応方法

without comments

はてなブックマーク - ExtJS Tips FirefoxでExtJSとブラウザのコンテストメニューが重なるときの対応方法

Livedoorクリップ - ExtJS Tips FirefoxでExtJSとブラウザのコンテストメニューが重なるときの対応方法

今回は備忘録も兼ねてFireFoxのコンテクストメニュー（右クリックメニュー）とExtJSで設定したコンテクストメニューが重なる場合の対処方法の紹介です。

グリッドなどで独自のコンテクストメニューを作成したときに、ブラウザのメニューを出さないようにキャンセルさせるには、以下のようにコンテクストメニューのイベントでe.stopEvent();を実行します。


/**
 * コンテクストメニューを生成
 */
onContextClick: function(grid, index, e)
{
	・・・

	e.stopEvent();
	grid.contextMenu.showAt(e.getXY());

	・・・
}

通常はこれでブラウザのコンテクストメニューはキャンセルされて表示されません。

コンテクストメニュー（正常な動作）

しかしFirefoxでは、まれに以下のようにブラウザのメニューが表示されてしまい、Extのメニューを覆ってしまいます。

コンテクストメニュー（ブラウザメニューとかぶっている）

この動作はJavaScriptのコードバグではなく、ブラウザのJavaScriptの実行設定が原因のようです。

ブラウザのJavaScriptの実行設定を変更します。
Firefox　>　ツール　>　オプション　>　コンテンツ　>　JavaScriptを有効にする　＞　詳細設定　>　コンテキストメニューを無効化または変更する　にチェックを入れる

Firefoxの設定

これでExtのコンテキストメニューだけが表示されるようになります。
JavaScriptのセキュリティを強化しているFirefoxでよく見かけるので、特定のFirefoxだけおかしい場合に疑ってみてください。

佐竹裕行

Written by 佐竹裕行

2 月 16th, 2010 at 2:21 pm

Posted in ExtJSチュートリアルｓｕｓ４版

Tagged with ExtJS情報, Firefox, grid, JavaScript, Tips, サンプル

ExtJS入門16 ListViewの使い方

without comments

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

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

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

ExtJS入門15 DataViewの使い方

with one comment

テンプレートの関連のクラスとしてもう一つ、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

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

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

ExtJS入門14　DomHelperの使い方2

with one comment

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

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

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

1 月 14th, 2010 at 11:56 am

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

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

ExtJS入門13 Ext.DomHelperの使い方

with one comment

Livedoorクリップ - ExtJS入門13 Ext.DomHelperの使い方

ExtJSでDOMを操作するときはExt.DomHelperを使うと便利です。

Ext.DomHelper – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.DomHelper
詳しい解説はAPIドキュメントを見ていただくとして、ここでは使い方に重点をまとめてみます。

注意点としてはExt.DomHelperクラスはシングルトンであることです。
そのため直接インスタンスを生成してはいけません。newせずに直接メソッドを呼んであげます。
では実際の使い方です。

使い方
DomHelperクラスを起動して、メソッドを指定します。
構築するDOMのオブジェクトを渡す。

サンプルコード１
・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名古屋勉強会　DomHelperのサンプル1</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="domhelper-sample1.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>

・javascript


Ext.onReady(function(){

    var appendDom = function() {
        console.debug('dom');
        Ext.DomHelper.append('my-div',{
            id:'url-list',
            tag:'ul',
            cn:[
                {
                    tag:'li',
                    cn:[{
                        tag:'a',
                        html:'google',
                        href:'http://www.google.com'
                    }]
                },{
                    //targetが追加されているa要素
                    tag:'li',
                    cn:[{
                        tag:'a',
                        html:'yahoo',
                        href:'http://www.yahoo.com',
                        target:'_blank'
                    }]
                }
            ]
        });
    }

    new Ext.Panel({
        renderTo:Ext.getBody(),
        id:'myPanel',
        title:'DOMHelperで要素を追加する',
        //パネルの内容
        bodyStyle:{
            padding:'15px',
            'text-align':'center'
        },
        html: '<div id="my-div">',//このdivをターゲットにする。
        //ボタン設定
        buttonAlign:'center',
        buttons:[
            {
                text:'要素を追加',
                handler:function(){
                    appendDom();
                }
            }
        ]
    });
});

・実行結果

DomHelperのサンプル

パネルのhtmlに設定されているdivが構築されると、listenersに設定されているappendDom関数でDOMHelperによるDOMの追加が行われています。Ext.DomHelperはシングルトンなのでnewせずに、そのままメソッドを呼びます。
appendメソッドはターゲットとなる要素にDOMを追加します。ターゲットとなる要素は要素のidで指定します。ここでは’my-div’という名前のdivが指定しています。
追加する要素はオブジェクトで設定します。

DomHelperに渡すオブジェクトの形式は以下用になっています

DomHelperエレメントオブジェクトの仕様

DomHelperエレメントオブジェクトは、エレメントを作成するときに使用します。このオブジェクトは、次の4つの属性から成り立ちます。
tag :
タグ名
children : または cn
配列形式で、好きなだけ作成するエレメントを指定できます。また、入れ子にすることで多階層のエレメントを構築することもできます。
cls :
class属性を指定します。
html :
エレメントに追加するinnerHTML形式の文字列を指定します。

APIドキュメントより

基本的には属性:設定値という指定方法です。html属性がinnerHTMLにあたります。
childrenまたはcnとして、その要素の子要素を設定します。
aタグのhref属性など、タグ別の属性値は href:url のように設定します。ここでは’yahoo’の方にだけtarget属性を設定しています。
tagの設定を省略するとdivとして生成されます。
サンプルのオブジェクトは以下のようになっています。


{
	 id:'url-list',
	 tag:'ul',
	 cn:[
	     {
	         tag:'li',
	         cn:[{
	             tag:'a',
	             html:'google',
	             href:'http://www.google.com'
	         }]
	     },{
	         //targetが追加されているa要素
	         tag:'li',
	         cn:[{
	             tag:'a',
	             html:'yahoo',
	             href:'http://www.yahoo.com',
	             target:'_blank'
	         }]
	     }
	]
}

XTemplateはパネルの内容を一気に変更するのに向いており、DomHelperはパネル内の一部の要素を書き換えるのに向いています。
この二つのクラスをうまく使い分けることで、効率良くエレメントの操作が行えます。

佐竹裕行

Written by 佐竹裕行

1 月 14th, 2010 at 11:50 am

Posted in ExtJSチュートリアルｓｕｓ４版

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

ExtJSで作ったFlashみたいなアプリ Ajax Animator

without comments

はてなブックマーク - ExtJSで作ったFlashみたいなアプリ Ajax Animator

Livedoorクリップ - ExtJSで作ったFlashみたいなアプリ Ajax Animator

Ajax AnimatorというExtJSで作ったFlashのようなアニメーション作成アプリを見つけました。
http://antimatter15.com/

Ajax Animator

Ajax Animatorのデモは以下のリンクから
Ajax Animator　-　http://antimatter15.com/ajaxanimator/build/

Flashのようにパラパラ漫画風のアニメーションを作成できます。
まだまだベータ版ということで色々挙動がおかしい部分が多々ありますが、とても面白いアプリになりそうです。

基本的な使い方はFlashとよく似ていて、左のツールからペンや四角ツールを選んでキャンバスに配置してアニメーションのコマを一枚ずつ書いていきます。キャンバス下のpreviewタブを開くことでアニメーションの再生ができます。モーショントゥイーンのようなものはありません。下のタブのもう一つのAnimationタブでは、サンプルアニメーションを見ることができます。

またJSでマクロを書くこともできるようなので、ExtJSでprocessing.jsのように使えるようになるかも知れません。

書き出しはうまくいきませんが、SWFやアニメーションGIFに加えProcessing(p5),Silver Light,Java FXでできるようになるみたいです。また独自ファイルはファイルをテキストで保存できます(拡張子無し)。独自の保存ファイルの中身を見てみるとJavascriptのオブジェクトをテキストに書き出して保存していました。試しに
Processing形式(.pde)で書き出して、Processingで実行してみました。(winのp5では開くこともできませんが、Macのp5なら多少動きます)

Ajax Animator からProcessingに書き出し

Google Waveのガジェットとしても開発しているそうで、夢が広がります。
さらに驚くべきことは、開発者は14歳（自称）だそうです。本当に14歳なら恐ろしいことです。
vXJSというJSライブラリやwikiなんかも開発しているそうです。天才少年ドゥギー・ハウザーのようです。
http://code.google.com/p/vxjs/

14歳ということは1995年で、Windows95と同期ですね。時間のあるときにもう少し詳しく中を見てみようと思います。モチベーションをあげてもうえるのと同時に、分けのわかない焦りを感じさせてくれるExtJSのアプリの例でした。

佐竹裕行

Written by 佐竹裕行

12 月 9th, 2009 at 2:16 pm

Posted in 未分類

Tagged with ExtJS, ExtJSアプリの紹介, ExtJS情報, JavaScript

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

without comments

はてなブックマーク - 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

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

Tagged with ExtJS, JavaScript, チュートリアル, 勉強会

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

タグ ‘JavaScript’ 一覧

ExtJS入門　Ext.XTemplateの補足

佐竹裕行

[ExtJS事例紹介]ウェディングステージグレイセル

佐竹裕行

ExtJS Tips FirefoxでExtJSとブラウザのコンテストメニューが重なるときの対応方法

佐竹裕行

ExtJS入門16 ListViewの使い方

佐竹裕行

ExtJS入門15 DataViewの使い方

佐竹裕行

ExtJS入門14　DomHelperの使い方2

佐竹裕行

ExtJS入門13 Ext.DomHelperの使い方

佐竹裕行

ExtJSで作ったFlashみたいなアプリ Ajax Animator

佐竹裕行

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

佐竹裕行

ExtJS入門10　Ext.XTemplateを使う

佐竹裕行

ExtJS名古屋勉強会チュートリアル

カテゴリー

タグ

ExtJS勉強会＠名古屋からのお知らせ

名古屋勉強会Twitterアカウント

2010年3 月
月	火	水	木	金	土	日
« 2 月
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