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

Read the rest of this entry »

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　位置指定の追加と削除

Read the rest of this entry »

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

はてなブックマーク - 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入門17　グリッド・パネル　基本編

Read the rest of this entry »

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

グリッド関連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, サンプル, チュートリアル, 勉強会

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入門13 Ext.DomHelperの使い方

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 tips Htmleditorフィールドを必須項目にする

はてなブックマーク - ExtJS tips Htmleditorフィールドを必須項目にする

Livedoorクリップ - ExtJS tips Htmleditorフィールドを必須項目にする

ExtJSのフォームフィールドにHtmleditorが有ります。このHtmleditorフィールドは文字通りTEXTの編集ができるリッチエディタのフィールド作ります。

このフィールドはExt.form.HtmlEditorクラスで定義されています。このクラスはExt.form.Fieldクラスを継承しています、同じサブクラスのExt.form.TextFieldにはallowBlankのコンフィグオプションがありますが、HtmlEditorクラスにはallowblankがないため必須項目にできません。
なんとなく頑張れば出来そうな気もしますが、他の人もきっとつまづいていそうなポイントだと思いフォーラムで解決方法を探してみると、簡単にみつかりました。
やり方はいくつかあるようですが、一番簡単そうなExt.form.HtmlEditorクラスをオーバーライドするを使ってみました。

Ext.form.HtmlEditorクラスをオーバーライドして必須にする
allowBlank:false, on html editor not working ? – Ext JS Forums
http://www.extjs.com/forum/showthread.php?t=37285より
コードはフォーラムのものそのままでは、エラーメッセージが英語なので、
日本語に変更しておきます。以下のコードでオーバーライドします。


    Ext.override(Ext.form.HtmlEditor, {
        markInvalid: function(msg){
            if(!this.rendered || this.preventMark){
                return;
            }
            msg = msg || this.invalidText;
            switch(this.msgTarget){
                case 'qtip':
                this.iframe.qtip = msg;
                this.iframe.qclass = 'x-form-invalid-tip';
                Ext.get(this.iframe).addClass(this.invalidClass);

                break;
            }
            return Ext.form.TextArea.superclass.markInvalid.call(this, [msg]);
        },
        clearInvalid: function(){
            if(!this.rendered || this.preventMark){
                return;
            }
            switch(this.msgTarget){
                case 'qtip':
                    this.iframe.qtip = '';
                    Ext.get(this.iframe).removeClass(this.invalidClass);
                    break;
            }
            return Ext.form.TextArea.superclass.clearInvalid.call(this);
        },
        validateValue:function(){
            if(this.allowBlank==false){
                  var value =this.getRawValue();
                  value = value.replace(/&amp;amp;amp;nbsp;/gi,"");
                  value = value.replace(/<br>/gi,"");
                  value = value.trim();
                  if(value != ''){
                      this.clearInvalid();
                      return true;
                  }
                  else{
                      this.markInvalid("この項目は必須項目です。")
                          return false;
                  }
            }else{
                this.clearInvalid();
                return true;
            }
        }
    });

このコードをHtmlFieldを使うところに設定しておいてあげれば、allowBlank有効になります。
オーバーライドしたことによりHtmlEditorフィールドの妥当性チェックが有効になったので、送信ボタンをvalidationの状態と連動されることもできるようになります。

今回のフォームのようなよくありそうなつまづきポイントは、フォーラムに既に議論された解決方法が載っている場合がよくあります。本家のフォーラムは英語ではかなりの議論が行われているので、頑張って探してみると意外と良いものが転がっていたりします。

Ext本家のフォーラム(英語)
http://www.extjs.com/forum/

佐竹裕行

Written by 佐竹裕行

1 月 12th, 2010 at 1:20 pm

Posted in ExtJSチュートリアルｓｕｓ４版, 未分類

Tagged with Tips, サンプル, 勉強会, 業務ウェブアプリケーション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入門　タブパネルを閉じるときのイベント

タブパネルを閉じるときのイベントは少しややこしいので、簡単にまとめておきます。
以下のようなコードを使って、イベントの発火の順番をfirebugのコンソールに出力します。
要firefox + firebugです。

・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名古屋勉強会　タブパネルのイベント</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="tabpanel_event.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>

・javascript
Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

11 月 24th, 2009 at 12:50 pm

Tagged with ExtJS, Tips, サンプル, チュートリアル

フォーカスが当たっていないExt.grid.GridPanelをキー操作で選択させる方法