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

ExtJS入門39　ファイルをアップロードするフォームフィールド

佐竹裕行 — Mon, 24 May 2010 09:15:23 +0000

ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。

Ext.ux.form.FileUploadField

フォーム関連の過去の記事はこちらからです。

PHP


 true
    );

    if (!file_exists($target)) {
        $res = array(
            'success' => false,
            'msg'   => 'ファイルのアップロードに失敗しました。'
        );
    }

    header("Content-Type: text/html; charset=utf-8");
    echo json_encode($res);

HTML:






    
    ExtJS名古屋勉強会　フォーム　ファイルのアップロード

    
    
    
    

    
    

    
    
    

    
    



    
        
            Extのファイルのアップロードフォーム

            ux.fileUploadField　を使ってファイルをアップロードできるフォームを作成します。
        
        
        

        

        

        Java Script：form-fileupload.js

Java Script:


Ext.onReady(function()
{
    var form = new Ext.form.FormPanel({
        renderTo:'form',
        url:'file-upload.php',
        fileUpload: true,
        title:'フォームの簡単な紹介',
        height:280,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        defaults:{
            anchor:'100%'
        },
        items:[
            {
                xtype: 'fileuploadfield',
                id: 'form-file',
                emptyText: 'ファイルを選択',
                fieldLabel: 'ファイルアップロードフィールド',
                name: 'my-upload-file',
                buttonText: 'ファイルを選択'
            },{
                xtype:'textfield',
                fieldLabel:'キャプション',
                name:'caption'
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'送信',
                formBind:true,
                iconCls:'tick',
                handler:function(){
                    //ファイルを送信してコールバックを設定。
                    form.getForm().submit({

                        //リクエスト時にローダーを表示する
                        waitMsg: 'ファイルを送信中です...',

                        //リクエスト成功時
                        success:function(basicForm,action){

                            if (action.result.success){
                                form.getForm().reset();
                            }else{
                                Ext.Msg.alert('エラー','ファイルのアップロードに失敗しました。').setIcon(Ext.Msg.ERROR);
                            }
                        },

                        //失敗時
                        failure:function(basicForm,action){
                            Ext.Msg.alert('エラー','サーバーへの接続に失敗しました。').setIcon(Ext.Msg.ERROR);
                        }
                    });
                }
            }
        ]
    });
});

uxは都度作者のサイトやExtJSのフォーラムなどで入手する必要があります。
Ext.ux.form.FileUploadFieldはExtJSのライブラリをダウンロードしたときに含まれるexsamplesの中にもあります。

今回は
js/ext
js/ux/fileupload/FileUploadField.js
js/ux/fileupload/css/fileuploadfield.css
というディレクトリ構成になっています。

uxファイルの読み込みはext-all.jsの後、使用される処理の前に行います。
今回はファイルをポスト後にPHP側で処理を行うので、サーバーサイドも所定の位置に設定しておきます。
これで読み込みが正しくできれば準備は完了です。

では早速FileUploadFieldを使ってみます。基本的いままのフィールドと同じやり方で作成します。
formPanelには送信先のURLをurlコンフィグに設定しておきます、またfileUploadコンフィグをtrueにしてファイルを送信するためformPanelを指定します。
次にfileuploadfieldをitemsに設定します。xtypeは’fileuploadfield’です。


    var form = new Ext.form.FormPanel({
        ・・・
        url:'file-upload.php',
        fileUpload: true,
		・・・
        items:[
            {
                xtype: 'fileuploadfield',
                id: 'form-file',
                emptyText: 'ファイルを選択',
                fieldLabel: 'ファイルアップロードフィールド',
                name: 'my-upload-file',
                buttonText: 'ファイルを選択'
            },{
                xtype:'textfield',
                fieldLabel:'キャプション',
                name:'caption'
            }
        ],
		・・・・
  });

実行結果:

Ext.ux.form.FileUploadField

フォーム送信時のローディングマスク

フィールド自体の設定はこれまでのほかのフォームフィールドと同じです。formPanelのfileUploadをtrueにすることが重要です。
後は送信ボタンをつけてformPanelのurlに指定した場所にPOSTするだけです。送信されるサーバーの方は簡単なサンプルです。適時お好みの処理に変更してください。
ファイルの送信ではページの読み込みは行われません、フォームのsubmit()メソッドの引数にリクエスト成功後のコールバックを指定して。ファイルの送信が完了したら、フォームをクリアして初期状態に戻るようにします。

basicFormのsubmit()メソッドにオブジェクトでコールバックが設定できることは既に説明しました。今回もファイルの送信成功後の処理をsuccessの中で実行します。また接続などのエラーはfailureの中に記述します。今回は成功すればフォームをクリアし、失敗時はポップアップを表示します。


    var form = new Ext.form.FormPanel({

        items:[
			・・・ファイルアップロードフィールド・・・
		],
        buttonAlign:'center',
        buttons:[
            {
                text:'送信',
                formBind:true,
                iconCls:'tick',
                handler:function(){
                    //ファイルを送信してコールバックを設定。
                    form.getForm().submit({

                        //リクエスト時にローダーを表示する
                        waitMsg: 'ファイルを送信中です...',

                        //リクエスト成功時
                        success:function(basicForm,action){

                            if (action.result.success){
                                form.getForm().reset();
                            }else{
                                Ext.Msg.alert('エラー','ファイルのアップロードに失敗しました。').setIcon(Ext.Msg.ERROR);
                            }
                        },

                        //失敗時
                        failure:function(basicForm,action){
                            Ext.Msg.alert('エラー','サーバーへの接続に失敗しました。').setIcon(Ext.Msg.ERROR);
                        }
                    });
                }
            }
        ]
    });

formの送信後はファイル保存の処理はサーバーサイドで行われます。ファイルを送信するので、これまでの短いテキストのやり取りとは違いリクエストからレスポンスまでの時間が多少気になります。そのためsubmit()メソッドに渡す設定の中のwaitMsgに送信～完了までの間に表示するロードマスクで表示するテキストを設定します。このロードマスクはリクエストが完了後に自動的に消えるので手軽に使用できます。ファイルアップロードなどの処理はサーバーサイドでの処理に時間が駆るので、一般的にロードマスクを表示させるようにしておくのがよいでしょう。

今回のサンプルの注意として,FireFoxでfirerebugを起動したままファイルの送信リクエストを事項すると、レスポンスのJSONが上手く展開できないようです。上手くいかないときは一度Firebugを無効にして試してみてください。

ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する

佐竹裕行 — Thu, 20 May 2010 06:21:39 +0000

今回はExtJSのフォームのエラー表示の便利な方法を紹介します。一般的なwebアプリの場合、FormPanelからフィールドの値をサーバーに送信後サーバーサイドで値のチェックが実行されます。その際にエラーが見つかった場合にそれをフィールドへ通知する便利な方法がExtJSでは用意されています。

サーバーからのエラー結果を表示する

ポストした後、サーバーのチェックが行われエラーの結果がJSONで返ってくるフォームパネルのサンプルです。

フォーム関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.BasicFormクラス
http://extdocs.xenophy.com/?class=Ext.form.BasicForm

JSON(今回はこのファイルがフォームの送信先になっています):


{
    success:false,
    errors:{
        'samplefield1':'間違っています。' ,
        'samplefield2':'間違っています。' ,
        'samplefield4':'間違っています。' ,
        'samplefield5':'間違っています。' ,
        'samplefield6':'特に設定することも無く、エラーメッセージを表示できます。'
    }
}

HTML:





    
    ExtJS名古屋勉強会　フォーム　エラーの表示

    
    
    
    

    
    
    
    


    
        

            Extのフォームフィールドへのエラーの表示
        
        
        

        Java Script：form-errors.js

		JSON File：errors.json

Java Script:


Ext.onReady(function()
{
    var form = new Ext.form.FormPanel({
        renderTo:'form',
        autoScroll:true,

        url:'errors.json',//送信先URL　今回はエラーを返す静的なJSONファイルを指定しています。

        title:'フォームの簡単な紹介',
        height:330,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        defaults:{
            msgTarget:'under',
            anchor:'90%',
            xtype:'textfield'
        },
        items:[
            {
                name:'samplefield1',
                fieldLabel:'テキストフィールド1',
                emptyText:'入力してください',   //空のときのテキスト
            },
            {
                name:'samplefield2',
                fieldLabel:'テキストフィールド2(必須項目)',
                emptyText:'入力してください',
            },
            {
                xtype:'displayfield',
                name:'samplefield3',
                fieldLabel:'ディスプレイフィールド',
                value:'表示だけのフィールドです。',
            },
            new Ext.form.NumberField({
                name:'samplefield4',
                fieldLabel:'ナンバーフィールド',
                allowDecimals:false,    //小数点を入力できないようにします
            }),
            {
                name:'samplefield5',
                fieldLabel:'Emailフィールド',
                emptyText:'入力してください',
                vtype:'email',  //vtypeコンフィグでバリデーションが設定
            },
            {
                xtype:'datefield',
                name:'samplefield6',
                fieldLabel:'日付フィールド',
                emptyText:'入力してください',
                anchor:false,//anchorをキャンセル
                width:100
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'送信',
                //formBind:true,
                iconCls:'tick',
                handler:function(){
                    //ポストする。
                    form.getForm().submit();
                    //今回はフィールドに何を入れてもエラーが返ってきますになります。
                }
            }
        ]
    });
});

実行結果:

サーバーからのエラー結果を表示する

今回のキモになるのはサーバーから返されるJSONの型です。今回はサーバーサイドのプログラムを書かずにどんな値を送信しても静的なJSONファイルが返ってくるようにしています。


{
    success:false,
    errors:{
        'samplefield1':'間違っています。' ,
        'samplefield2':'間違っています。' ,
        'samplefield4':'間違っています。' ,
        'samplefield5':'間違っています。' ,
        'samplefield6':'特に設定することも無く、エラーメッセージを表示できます。'
    }
}

サーバーサイドで処理する際は、レスポンスとして返却するJSONを上のような形式にします。
successはエラーが合った場合必ずfalseを返すようにします。
errorsにはオブジェクトでエラーのあったフィールド名：エラーメッセージという形式でエラーを列挙します。
このJSONのフォーマットでレスポンスを返すとExtJSのフォームが自動的にエラーを表示してくれます。
ポイントはerrors:{}の形式を必ずこの形にすることです。


 {
   success:false,//or true
   errors:{
     'フィールド名':'メッセージ'
        ・・・・
   }//エラーがない場合は空
 }

実際にサンプルコードを動かしてみると、どんな値を送ってもerros.jsonのJSONが返り、各フィールドにエラーメッセージが表示されます。
msgTargetをunderにしておくと見やすくなります。
このJSONでsamplefield3:’間違っています’を付け加えた場合、displayfieldにもエラーメッセージを出してしまうので注意してください。

フォームのsubmit後の処理はsubmit()メソッドの引数にオブジェクトで処理を渡すこともできますが、簡単なエラー処理であればJSONの形をきちんとするだけで、submit()の引数になる長い処理を記述しなくてよいので便利です。

ExtJS入門34 ComboBoxの基本

佐竹裕行 — Mon, 17 May 2010 04:13:00 +0000

今回は以前紹グリッドのサンプルで簡単に紹介したコンボボックスを取り上げます。コンボボックスはHTMLフォームのセレクトボックスのような選択式のフォームを生成します。ExtJSのコンボボックスでは、項目のデータをストアから利用します。今回はグリッドの回で使ったサンプルのストアとデータを利用しています。

ComboBoxの基本

グリッド関連の記事

ExtJSで楽しくRIA業務アプリ開発のgridの記事一覧

フォーム関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.ComboBoxクラス
http://extdocs.xenophy.com/?class=Ext.form.ComboBox

JSON DATA:


{
    success:true,
    total:6,
    rows:[

        {
            'id':1,
            'rank':1,
            'name':'IE',
            'percentage':62.69,
            'url' : 'http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx',
            'img' : '../img/ie64.png'
        },
        {
            'id':2,
            'rank':2,
            'name':'Firefox',
            'percentage':24.61,
            'url' :'http://mozilla.jp/firefox/',
            'img' : '../img/firefox64.png'
        },
        {
            'id':3,
            'rank':3,
            'name':'Chrome',
            'percentage':4.63,
            'url' : 'http://www.google.com/chrome/',
            'img' : '../img/chrome64.png'
        },
        {
            'id':4,
            'rank':4,
            'name':'Safari',
            'percentage':4.46,
            'url': 'http://www.apple.com/jp/safari/',
            'img' : '../img/safari64.png'
        },
        {
            'id':5,
            'rank':5,
            'name':'Opera',
            'percentage':2.40,
            'url' : 'http://jp.opera.com/',
            'img' : '../img/opera64.png'
        },
        {
            'id':6,
            'rank':6,
            'name':'Opera Mini',
            'percentage':0.53,
            'url' : 'http://jp.opera.com/',
            'img' : '../img/opera64.png'
        }
    ]
}

HTML:





    
    ExtJS名古屋勉強会　フォーム　コンボボックス

    
    
    
    

    
    
    
    


    
        

            Extのコンボボックス
        
        
        

        

        Java Script：form-combo.js

        JSON file：data.json

Java Script:


Ext.onReady(function()
{
    var data = [
        {
            'id':1,
            'rank':1,
            'name':'IE',
            'percentage':62.69,
            'url' : 'http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx',
            'img' : '../img/ie64.png'
        },
        {
            'id':2,
            'rank':2,
            'name':'Firefox',
            'percentage':24.61,
            'url' :'http://mozilla.jp/firefox/',
            'img' : '../img/firefox64.png'
        },
        {
            'id':3,
            'rank':3,
            'name':'Chrome',
            'percentage':4.63,
            'url' : 'http://www.google.com/chrome/',
            'img' : '../img/chrome64.png'
        },
        {
            'id':4,
            'rank':4,
            'name':'Safari',
            'percentage':4.46,
            'url': 'http://www.apple.com/jp/safari/',
            'img' : '../img/safari64.png'
        },
        {
            'id':5,
            'rank':5,
            'name':'Opera',
            'percentage':2.40,
            'url' : 'http://jp.opera.com/',
            'img' : '../img/opera64.png'
        },
        {
            'id':6,
            'rank':6,
            'name':'Opera Mini',
            'percentage':0.53,
            'url' : 'http://jp.opera.com/',
            'img' : '../img/opera64.png'
        }
    ];

    var combo1 = new Ext.form.ComboBox({
        name:'combo1',
        fieldLabel:'ブラウザを選択(ローカルデータ)',
        store:new Ext.data.JsonStore({
            fields:['id','name'],
            data:data
        }),
        mode:'local',
        typeAhead:true, //入力文字から自動補完
        displayField:'name',
        valueField:'id',
        emptyText:'入力可能',
        hiddenName:'browser1'
    });

    var combo2 = new Ext.form.ComboBox({
        name:'combo2',
        fieldLabel:'ブラウザを選択(リモートデータ)',
        store:new Ext.data.JsonStore({
            fields:['id','name','img'],
            url:'data.json',
            total:'total',
            root:'rows',
            autoLoad:true
        }),
        mode:'remote',
        triggerAction:'all',
        editable:false, //自由入力不可
        displayField:'name',
        emptyText:'選択してください',
        valueField:'id',
        //hidenNameをつけないとgetValuesしたときの値はdisplayFieldの値になる
    });

    var combo3 = new Ext.form.ComboBox({
        name:'combo3',
        fieldLabel:'ブラウザを選択(テンプレート)',
        store:new Ext.data.JsonStore({
            fields:['id','name','img'],
            url:'data.json',
            total:'total',
            root:'rows',
            autoLoad:true
        }),
        mode:'remote',
        triggerAction:'all',
        editable:false, //自由入力不可
        displayField:'name',
        valueField:'id',
        hiddenName:'browser3',
        itemSelector:'div.browser-list',
        emptyText:'選択してください',
        tpl:new Ext.XTemplate(
            '',
                '',
                '
',
                '{name}',
                '',
            ''
        )
    });

    var form = new Ext.form.FormPanel({
        renderTo:'form',
        title:'コンボボックスフォーム',
        height:280,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        items:[
            combo1,combo2,combo3
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'決定',
                iconCls:'tick',
                handler:function(){
                    //フォームパネルからフィールドを取得
                    var formFields = form.getForm();
                    //フィールドから値を取得
                    var formValues = formFields.getValues();
                    //入力項目を表示する処理(普通は値をポストしますが、今回はフィールド名と値を表示する)
                    var data = [];
                    Ext.iterate(formValues,function(key,val,arr){
                        data.push({
                            fieldname:key,
                            formvalue:val
                        });
                    });

                    var tpl = new Ext.XTemplate(
                        '',
                        '{fieldname}:{formvalue}',
                        ''
                    );

                    //表示処理
                    Ext.Msg.show({
                        title:'フォームの値を取得',
                        msg:tpl.apply(data),
                        width:300,
                        buttons:Ext.Msg.OK
                    });
                }
            }
        ]
    });
});

実行結果:

ComboBoxの基本

上の2つが基本的なコンボボックスです。まずこの2つの解説です。
コンボボックスは基本的にテキストフィールドです。スーパークラスも以下のようになっています
Observable > Component > BoxComponent > Field > TextField > TriggerField > ComboBox
クリックできて、クリックすると選択項目がたちあがるTriggerFieldがコンボボックスです。同じような動きをするフィールドにDateFieldがあります。こちらはクリックするとDatePickerが立ち上がるTriggerFieldといえます。
選択項目はDataViewをして描写されます。すこしややこしくなってきましたが、Ext.form.ComboBoxクラスを使っているならば基本的に面倒なことはComboBoxクラスがやってくれます。基本的なコンフィグオプションを設定するだけでコンボボックスを作成できます。

コンボボックスで設定する基本的なコンフィグオプションは以下のようなものです。

name: フィールドの名前、getValuesしたときのプロパティ名になる
typeAhead: boolean 入力から項目を自動補完するかどうか
triggerAction: ▼をクリックしたときに送信するクエリを選択。’all’など
store: ストア
mode: ストアにデータ読み込む方法　local もしくは remote
displayField: コンボボックスの表示部分に設定するストアの項目
valueField: コンボボックスの値として設定するストアの項目
hiddenName コンボボックスの値として設定するストアの項目

typeAheadとtriggerActionで基本的な動作を制御します。typeAheadがtrueの場合、フィールドに入力を行うとそれに対応する項目が絞り込まれます。triggerActionでは▼をクリックしたときに読み込まれるデータを取得するためにサーバーに送信するクエリを選択します。’all’を指定します。全件を取得したくない場合はフィールドに入力されている項目を初期のクエリとしてサーバーに送信することができます。その場合は以下のように設定します。


 queryParam:'searchkeyword',
 triggerAction:'query',

queryParamに送信するプロパティ名、triggerActionを’query’に変更。これでコンボボックスの項目を取得する際にフィールドに入力されいる項目を送信します。ただしフィールドに入力がない場合は、サーバーへの取得を行わないので注意が必要です。

コンボボックスにもストアが必要です。今回は以前グリッドサンプルコードで使ったブラウザシェアのデータを使いたいと思います。そのためストアも以前のグリッドパネルとよく似ています。
一つ目が選択項目となるデータをJSファイルの中（ローカル）に持ってJsonStoreのdataに読み込んでいる形です。都度リクエストをかけることなく選択項目を表示します。2つ目はデータをリモートに持ちリクエストを投げてデータをストアに読み込みます。


new Ext.data.JsonStore({
	fields:['id','name','img'],
	url:'data.json',	//ローカルの場合はJSONデータを指定
	total:'total',
	root:'rows',
	autoLoad:true
})

modeの設定はストアの読み込み方法に応じて’local’と’remote’のどちらかを設定します。

displayFieldはストアのfieldsの中でコンボボックスの選択項目に表示される項目を指定します。今回はブラウザ名を表示させるためにnameを設定しました。
valueFieldはfieldsのなかで値として設定する項目を指定します。valueFieldで設定された値はhiddenNameに指定された名前でフォームの値としてgetValues()を事項したときに取得されます。
この辺りがコンボボックスの少しややこしいところです。nameは選択されている項目を表示するためのテキストフィールド名前です。nameの名前でフォームの値として設定されるのは表示されている文字列です。
表示は文字列で、実際に送信される値はidの数字がよい、といった場合は別途hiddenNameで設定する必要があります。今回のサンプルではcombo1、combo2の両方にvalueFieldが設定されています、しかしcombo1はhiddenNameが設定されていますが、combo2には設定されていません。この場合getValues()したときに取得されるのは

browser1:2 //ブラウザのID
combo2:Firefox //フィールドに表示されていた文字列

となります。フィールドに表示されている値ではないものを送信したい場合はcombo1のようにhiddenNameを設定するようにします。

以上が基本的なコンボボックスの設定です。

少しややこしい説明でしたが、まとめると

ストアを作る
ストアに応じてmodeを決める。
ストアに応じてdisplayFieldを決める。
もし表示している値でないものを送る場合はvalueFieldとhiddenNameを設定する。
基本的にtriggerAction:’all’
入力補完する場合はtypeAheadをtrueに

といった形です。

3つ目のコンボボックスはおまけえ、セレクトボックスの表示項目のデザインを変更しています。


var combo3 = new Ext.form.ComboBox({
		・・・
        itemSelector:'div.browser-list',
        tpl:new Ext.XTemplate(
            '',
                '',
                '
',
                '{name}',
                '',
            ''
        )
		・・・
    });

コンボボックスのtplのコンフィグオプションにXTemplateでテンプレートを設定します。DataViewのようにitemSelectorを設定してクリックするノードを指定します。サンプルコードではdiv.browser-listを指定しています。今回のテンプレートではブラウザの画像を表示するように設定しています。XTemplateとDataViewの知識があれば特に難しいことは無く、簡単にデザインを変更できます。

ExtJS入門　JSONP経由でTwitterの情報をDataViewに表示するその2

佐竹裕行 — Wed, 12 May 2010 02:42:00 +0000

前回のサンプルのおまけです。前回のサンプルコードExt.DataViewを使ってTwitter Search APIの情報を表示していました。今回はダブルクリックイベントとホバリング時のCSSクラスの設定を行ってもう少し使えるアプリっぽく修正しました。

DataViewのホバリング設定

ExtJS入門　JSONP経由でTwitterの情報をDataViewに表示する

関連の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.DataViewクラス
http://extdocs.xenophy.com/?class=Ext.DataView

HTML:





    
    ExtJS名古屋勉強会　Twitter API DataView

    
    
    
    

    
    
    


    
        
            Twitter Search APIを利用したデータビュー　（30秒毎に自動更新）
        

        
        

        Java Script：dataview-twitter2.js

        Twitter API：Twitter Search API Method: search

Java Script:


Ext.onReady(function(){

    //ストアの設定
    var store = new Ext.data.JsonStore({
        //Twitter Search APIをJSONPで利用
        proxy:new Ext.data.ScriptTagProxy({
            url:'http://search.twitter.com/search.json'
        }),
        baseParams:{
            q:'extjs'
        },
        paramNames:{
            start:'page',
            limit:'results_per_page'
        },
        autoLoad:true,
        root:'results',
        idProperty:'id',
        fields:[
            'profile_image_url',
            'created_at',
            'from_user',
            'metadata',
            'to_user_id',
            'text', //本文
            'id',
            'from_user_id',
            'geo',  //GEOタグ
            'iso_language_code',
            'source'    //クライアントの種類
        ]
    });

    var tpl = new Ext.XTemplate(
        '',
        '',
            '',
            '',
            '{from_user}:{1}',
                '{[Date.parseDate(values.created_at,"D, d M Y G:i:s O").format("H時m分s秒 n月j日")]} ',
            '
',
                '{text}',
            '',
        '',
    '');

    var panel = new Ext.Panel({
        renderTo:'panel',
        height:600,
        width:500,
        autoExpandColumn:'title',
            autoScroll:true,
        items:new Ext.DataView({
            tpl:tpl,
            store:store,
            autoHeight:true,
            itemSelector:'div.tweet',
            emptyText:'No Tweet',
            //ホバリング時のクラス
            overClass:'tweet-hover',
            listeners:{
                dblclick:function(dataview,index,node,e){
                    var record = dataview.getStore().getAt(index);
                    window.open(String.format(
                        'http://twitter.com/{0}/status/{1}',
                        record.get('from_user'),
                        record.get('id')
                    ));
                }
            }
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = panel.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    store.load({
                        params:{
                            q:value
                        }
                    });
                }
            }
        ]
    });

    //自動アップデート
    var task = {
        run:function(){
            store.reload();
        },
        interval:1000 * 30 //msec * sec
    };

    Ext.TaskMgr.start(task);
});

実行結果:

Twitter Data View改

DataViewのホバリング設定

HTMLファイル内でホバリング時に使用するスタイルを記述しておきます。サンプルでは背景色を青っぽく変更しているだけです。
Ext.DataViewでitemSelectorコンフィグに指定したDOMノードにイベントを設定できます。サンプルではdiv.tweet上で動作するようになっています。
データビューはこのノード上ホバリング時にoverClassで指定したCSSクラスをこのノードのCSSクラスに追加します。

次にイベント処理です。イベント処理もホバリングと同じくitemSelectorで指定することでdiv.tweetの要素にイベントハンドラを設定されます。サンプルではdblclickイベントが呼ばれると、そのtweetの単独のページを別windowで開くように処理しています。


	itemSelector:'div.tweet',
	overClass:'tweet-hover',
	listeners:{
		dblclick:function(dataview,index,node,e){
			var record = dataview.getStore().getAt(index);
			window.open(String.format(
				'http://twitter.com/{0}/status/{1}',
				record.get('from_user'),
				record.get('id')
			));
		}
	}

今回は前回のサンプルの簡単な発展形の紹介になりました。次回はチュートリアルに戻りたいと思います。

ExtJS入門　JSONP経由でTwitterの情報をDataViewに表示する

佐竹裕行 — Tue, 11 May 2010 05:05:07 +0000

JSONPでTwitter APIを利用する小ネタの紹介です。前回まではグリッドのデータソースとしてJSONPで色々なAPIを利用していました。APIから取得したデータはストアに保存されています。そのためグリッド以外にも利用することができます。今回は前回と同じTwitter Search APIをデータソースにして表示をグリッドパネルからデータビューに変更してみます。

Twitter API をDataViewの表示

グリッドパネル関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.DataViewクラス
http://extdocs.xenophy.com/?class=Ext.DataView

HTML:





    
    ExtJS名古屋勉強会　Twitter API DataView

    
    
    
    

    
    
    


    
        
            Twitter Search APIを利用したデータビュー　（30秒毎に自動更新）
        

        
        

        Java Script：dataview-twitter.js

        Twitter API：Twitter Search API Method: search

Java Script:


Ext.onReady(function(){

    //ストアの設定
    var store = new Ext.data.JsonStore({
        //Twitter Search APIをJSONPで利用
        proxy:new Ext.data.ScriptTagProxy({
            url:'http://search.twitter.com/search.json'
        }),
        baseParams:{
            q:'extjs'
        },
        paramNames:{
            start:'page',
            limit:'results_per_page'
        },
        autoLoad:true,
        root:'results',
        idProperty:'id',
        fields:[
            'profile_image_url',
            'created_at',
            'from_user',
            'metadata',
            'to_user_id',
            'text', //本文
            'id',
            'from_user_id',
            'geo',  //GEOタグ
            'iso_language_code',
            'source'    //クライアントの種類
        ]
    });

    var tpl = new Ext.XTemplate(
        '',
        '',
            '',
            '',
            '{from_user}:{1}',
                '{[Date.parseDate(values.created_at,"D, d M Y G:i:s O").format("H時m分s秒 n月j日")]} ',
            '
',
                '{text}',
            '',
        '',
    '');

    var panel = new Ext.Panel({
        renderTo:'panel',
        height:600,
        width:500,
        autoExpandColumn:'title',
            autoScroll:true,
        items:new Ext.DataView({
            tpl:tpl,
            store:store,
            autoHeight:true,
            itemSelector:'div.tweet',
            emptyText:'No Tweet'
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = panel.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    store.load({
                        params:{
                            q:value
                        }
                    });
                }
            }
        ]
    });

    //自動アップデート
    var task = {
        run:function(){
            store.reload();
        },
        interval:1000 * 30 //msec * sec
    };

    Ext.TaskMgr.start(task);
});

実行結果:

Twitter API をDataViewの表示

APIからJsonStoreへデータを読み込む流れは前回のサンプルコードと同じです。データビューの基本的な紹介はこちらをご覧下さい。第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

APIからストアにデータを読み込んでデータビュー(Ext.DataView)クラスに渡します。データビューはテンプレートを指定する必要があります。このテンプレートにデータの表示の仕方を記述します。今回は以下のようにして、tweetをグリッド状に並べています。


    var tpl = new Ext.XTemplate(
        '',
        '',
            '',
            '',
            '{from_user}:{1}',
                '{[Date.parseDate(values.created_at,"D, d M Y G:i:s O").format("H時m分s秒 n月j日")]} ',
            '
',
                '{text}',
            '',
        '',
    '');

少し変わっているところとしては、日付を以下のように処理して、フォーマットしています。


'{[Date.parseDate(values.created_at,"D, d M Y G:i:s O").format("H時m分s秒 n月j日")]} ',

テンプレート文字列内で”{[ ・・・ ]}”を囲うことで処理を記述することができます。ここではループの中の現在のデータにアクセスするためにvaluesという変数を使う必要があります。

DataViewのコンフィグで
overClassやlisternersでイベントを取得することより高機能なパネルへ発展も可能です。
Twitterには沢山のAPIが用意されているます、UPDATEや自分のタイムラインを表示できるようにすれば自分専用のTwitterクライアントを作ることも可能です。
時間があるときに作ってみるのも良いかもしれません。

ExJS入門31 GridViewでグリッドの各行の背景色を変更する

佐竹裕行 — Mon, 10 May 2010 03:04:36 +0000

もうグリッドはもうほんとにネタ切れですね、前回のTwitter APIを少し修正して最新一時間以内のtweetが分かるように背景色を変えてみたいと思います。グリッドの見た目はGridViewで変更します。GridViewはGridPanelクラスのviewConfigで設定できるということも以前のサンプルで紹介したので、今回はささっとサンプルを紹介します。

一時間以内のtweetだけ背景色を緑に

ほぼ前回のサンプルコードをそのまま使用するので、前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門30　Twitter Search APIを使ったグリッドパネル

グリッドパネル関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridViewクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridView

HTML:





    
    ExtJS名古屋勉強会　Twitter API + GridView

    
    
    
    

    
    
    


    
        
            Twitter Search APIを利用したグリッドその2　（1時間以内の更新には背景を緑に、30秒毎に自動更新）
        

        
        

        Java Script：grid-rowclass.js

        Twitter API：Twitter Search API Method: search

Java Script:


Ext.onReady(function(){

    //ストアの設定
    var store = new Ext.data.JsonStore({
        //Twitter Search APIをJSONPで利用
        proxy:new Ext.data.ScriptTagProxy({
            url:'http://search.twitter.com/search.json'
        }),
        baseParams:{
            q:'extjs'
        },
        paramNames:{
            start:'page',
            limit:'results_per_page'
        },
        autoLoad:true,
        root:'results',
        idProperty:'id',
        fields:[
            'profile_image_url',
            'created_at',
            'from_user',
            'metadata',
            'to_user_id',
            'text', //本文
            'id',
            'from_user_id',
            'geo',  //GEOタグ
            'iso_language_code',
            'source'    //クライアントの種類
        ]
    });

    //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('',
                    value,
                    store.getAt(rIndex).data.from_user
                    );
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex);
        return String.format('{0}:{1}

{2}',
            data.get('from_user'),
            value,
            Date.parseDate(data.get('created_at'),'D, d M Y G:i:s O').format('H時m分s秒 n月j日')
        );
    };

    //閾値
    var gateTime = new Date().add(Date.HOUR, -1);

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        height:600,
        loadMask:true,
        store:store,
        autoExpandColumn:'title',
        cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
                },
                {
                    id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
                }
            ]
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = grid.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    grid.getStore().load({
                        params:{
                            q:value
                        }
                    });
                }
            }
        ],
		//GridViewの設定
        viewConfig:{
            getRowClass:function(record,rIndex,rParams,store){
                var postTime = Date.parseDate(record.get('created_at'),'D, d M Y G:i:s O');
                if (postTime > gateTime) {
                    return 'recent-update';
                }
            }
        }
    });

    //自動アップデート
    var task = {
        run:function(){
            store.reload();
            //閾値の更新
            gateTime = new Date().add(Date.HOUR, -1);
        },
        interval:1000 * 30 //msec * sec
    };

    Ext.TaskMgr.start(task);
});

実行結果:

GridViewで行の背景色を変更する

APIからストアへの取得は前回のサンプルコードを参考にしてください。
前回との違いはGridViewのgetRowClassメソッドをオーバーライドして、行ごとのクラスを設定するところです。
GridViewクラスはGridPanelの見た目とUIを決定しています。GridViewを記述していないGridPanelであっても作成時にGridView自動的に生成されています。
以前のサンプルでemptyTextを使用する例を簡単に紹介しました。GridViewクラスではさらにいくつかのグリッドの見た目設定を調整できます。
今回のサンプルでは書くtweetのアップデート時の時刻から、最新一時間以内のものの背景色を変更します。各行に対してCSSのクラスを設定するにはGridViewクラスのgetRowClassメソッドをオーバーライドして、クラス名を返すことで、その行にカスタムのクラスを設定することができます。
以下がサンプルコードで設定しているgetRowClassの部分です。


 //閾値
    var gateTime = new Date().add(Date.HOUR, -1);

	・・・

		viewConfig:{
            getRowClass:function(record,rIndex,rParams,store){
                var postTime = Date.parseDate(record.get('created_at'),'D, d M Y G:i:s O');
                if (postTime > gateTime) {
                    return 'recent-update';
                }
            }
		}

gateTimeは一時間前の時刻を設定しています。
Dateオブジェクトのaddメソッドを使うことで、日付の演算ができます。Date.HOUR -1で一時間前を設定しました。
getRowClassメソッドは各行ごとに実行されるのでgateTimeは外で宣言しておくほうがよさそうです。
postTimeはTwitter APIから取得される投稿時刻をパースしてDateオブジェクトを制しえしています。Date.parseDate()の第2引数に日付のフォーマットを指定しています。Twitter APIでは’D, d M Y G:i:s O’という日付のフォーマットでした。
あとはgateTime以後の場合のみ’recent-update’という文字列を返り値にしています。これで一時間以内の行のCSSラスに’recent-update’が追加されます。

もう一つ前回からの変更点で、各tweetの日付を日本語のフォーマットにしています。これもparseDateを使っています。titleRendererを以下のように変更しています。Date.parseDate().format(’H時m分s秒 n月j日’)の部分です。


   var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex);
        return String.format('{0}:{1}

{2}',
            data.get('from_user'),
            value,
            Date.parseDate(data.get('created_at'),'D, d M Y G:i:s O').format('H時m分s秒 n月j日')
        );
    };

JSONPはYouTubeやTwitter以外の色々なサービスAPIでも供給されています。自分の良く使うサービスのAPIを調べてみてJSONPが利用できるならためしに使ってみると良いかもしれません。

ExJS入門30　Twitter Search APIを使ったグリッドパネル

佐竹裕行 — Fri, 07 May 2010 02:48:37 +0000

前回はJSONPを使ってYouTubeの情報をグリッドに表示するサンプルを紹介しました。今回も外部APIの利用第2弾ということにして、Twitter APIを使ってTwitterのアップデートをグリッドに読み込んでみます。

Twitter Search APIを利用したグリッド

今回はJSONPを使ったAPIの利用に加えて、グリッドを自動更新するためのExt.TaskMgrクラスを使ったサンプルコードの紹介になります。
前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

グリッドパネル関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.TaskMgrクラス
http://extdocs.xenophy.com/?class=Ext.TaskMgr

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

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

HTML:





    
    ExtJS名古屋勉強会　Twitter API

    
    
    
    

    
    
    


    
        
            Twitter Search APIを利用したグリッド　（30秒毎に自動更新）
        

        
        

        Java Script：grid-twitter.js

        Twitter API：Twitter Search API Method: search

Java Script:


Ext.onReady(function(){

    //ストアの設定
    var store = new Ext.data.JsonStore({
        //Twitter Search APIをJSONPで利用
        proxy:new Ext.data.ScriptTagProxy({
            url:'http://search.twitter.com/search.json'
        }),
        baseParams:{
            q:'extjs'
        },
        paramNames:{
            start:'page',
            limit:'results_per_page'
        },
        autoLoad:true,
        root:'results',
        idProperty:'id',
        fields:[
            'profile_image_url',
            'created_at',
            'from_user',
            'metadata',
            'to_user_id',
            'text', //本文
            'id',
            'from_user_id',
            'geo',  //GEOタグ
            'iso_language_code',
            'source'    //クライアントの種類
        ]
    });

    //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('',
                    value,
                    store.getAt(rIndex).data.from_user
                    );
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex).data;
        return String.format('{0}:{1}

{2}',
            data.from_user,
            value,
            data.created_at
        );
    };

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        height:600,
        loadMask:true,
        store:store,
        autoExpandColumn:'title',
        cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
                },
                {
                    id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
                }
            ]
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = grid.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    grid.getStore().load({
                        params:{
                            q:value
                        }
                    });
                }
            }
        ]
    });

    //自動アップデート
    var task = {
        run:function(){
            store.reload();
        },
        interval:1000 * 30 //msec * sec
    }

    Ext.TaskMgr.start(task);
});

実行結果:

Twitter Search APIを利用したグリッド

JSONPをストアのソースとして読み込む方法は前回紹介したので簡単に済ませますが、JSONの構造としてはYouTube DATA APIよりも簡単でresultという配列の中に対象の検索項目に対する最新のUPDATEが入っています。デフォルトでは"extjs"で検索をかけています。
またTwitter Search APIでは全件数が帰ってこないため、PagingToolbarは上手く動かないようです。’（ひょっとしたら何か解決方法があるかも知れせん…）


    //ストアの設定
    var store = new Ext.data.JsonStore({
        //Twitter Search APIをJSONPで利用
        proxy:new Ext.data.ScriptTagProxy({
            url:'http://search.twitter.com/search.json'
        }),
        baseParams:{
            q:'extjs'
        },
        paramNames:{
            start:'page',
            limit:'results_per_page'
        },
        autoLoad:true,
        root:'results',
        idProperty:'id',
        fields:[
            'profile_image_url',
            'created_at',
            'from_user',
            'metadata',
            'to_user_id',
            'text', //本文
            'id',
            'from_user_id',
            'geo',  //GEOタグ
            'iso_language_code',
            'source'    //クライアントの種類
        ]
    });

Twitter Search APIの利用時の設定は以上のようになります。後はこのストアにあわせてグリッドを作成します。レンダラーも前回と似ていますがデータの構造にあわせて少し変更を加えています。


  //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('',
                    value,
                    store.getAt(rIndex).data.from_user
                    );
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex).data;
        return String.format('{0}:{1}

{2}',
            data.from_user,
            value,
            data.created_at
        );
    };

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        height:600,
        loadMask:true,
        store:store,
        autoExpandColumn:'title',
        cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
                },
                {
                    id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
                }
            ]
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = grid.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    grid.getStore().load({
                        params:{
                            q:value
                        }
                    });
                }
            }
        ]
    });

つぎに自動アップデートの処理を作成します。ExtJSにはExt.TaskMgrクラスというシングルトンクラスが用意されています。このクラスを利用することで、一定時間ごとに実行する処理を設定できます。実行したい処理をオブジェクトの形で記述してタスクマネージャー(Ext.TaskMgrクラス)に設定します。


    var task = {
        run:function(){
            store.reload();
        },
        interval:1000 * 30 //msec * sec
    }
    Ext.TaskMgr.start(task);

run:実行する処理
interval:実行する間隔(ミリ秒で設定)

今回のサンプルでは30秒間隔でストアをリロードしています。これでTwitter検索を実行後に30秒ごとにグリッドを更新します。
前回のYouTube Data APIよりもTwitter Search APIの方が簡単でしたね。

ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

佐竹裕行 — Thu, 06 May 2010 04:44:49 +0000

今回もグリッドパネルです。今回はJSONPを使ってYouTube Data APIを呼び出して、グリッドに表示するサンプルコードになります。
JSONPを使うことで別ドメインのAPIをJavascriptで呼び出すことができます。Google Data APIはJSONPにも対応しているため、利用が簡単です。

JSONPでYouTube Data APIを利用

グリッドパネル関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.data.DataProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.DataProxy

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

HTML:





    
    ExtJS名古屋勉強会　Youtube API

    
    
    
    

    
    
    


    
        
            YouTube DATA APIを利用するグリッド（JSONPとして利用する）
        

        
        

        Java Script：grid-youtube.js

        YouTube Data API：YouTube の API とツール - Google Code

Java Script:


Ext.onReady(function(){
    //各ページ辺りの表示数
    var perPage = 10;

    //ストアの設定
    var store = new Ext.data.JsonStore({
        //クロスドメインになるYouTube Data APIをJSONPとして利用するためScriptTagProxyを使う。
        proxy:new Ext.data.ScriptTagProxy({
            url:"http://gdata.youtube.com/feeds/api/videos",
        }),
        baseParams:{
            format:1,
            'max-results':perPage,
            'start-index':1,
            vq:'extjs',
            alt:'json-in-script'
        },
        paramNames:{
            start:'start-index',
            limit:'max-results',
        },
        autoLoad:true,
        root:'feed.entry',
        idProperty:'id.$t',
        totalProperty:"feed.openSearch$totalResults.$t",
        fields:['author','id','title','media$group','link','content','published','category','updated'],
    });

    //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('{1}',
                  store.getAt(rIndex).data.media$group.media$thumbnail[0].url,
                  value.$t);
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex).data;
        return String.format('{0}
by {1}{2}',
            value.$t,
            data.author[0].name.$t,
            data.content.$t.length > 20 ? data.content.$t.substring(0,20) + '...' :data.content.$t

        );
    };

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        height:600,
        loadMask:true,
        store:store,
        autoExpandColumn:'title',
        cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'title', renderer:imgRenderer, width:120
                },
                {
                    id:'title', header:'title', dataIndex:'title', renderer:titleRenderer, width:120
                },

                {
                    id:'duration',
                    header:'Duration',
                    dataIndex:'media$group',
                    renderer:function(value){
                        var totalsec = value.yt$duration.seconds;
                        var min = Math.floor(totalsec / 60);
                        var sec = totalsec % 60;
                        return String.format('{0}:{1}',
                            String.leftPad(min,2,'0'),
                            String.leftPad(sec,2,'0'));
                    },
                    width:120
                }
            ]
        }),
        tbar:[
            '->',
            {
                xtype:'textfield',
                name:'keyword',
                itemId:'keyword'
            },
            {
                text:'Search',
                iconCls:'search',
                scope:this,
                handler:function(){
                    var tbar = grid.getTopToolbar();
                    var value = tbar.getComponent('keyword').getValue();

                    grid.getStore().load({
                        params:{
                            vq:value
                        }
                    });
                }
            }
        ],
        bbar:[
            //YouTube Data APIのリクエストの開始位置が1からであるため、いくつかバグが出ます。
            new Ext.PagingToolbar({
                displayInfo:true,
                pageSize:perPage,
                store:store
            })
        ],
        listeners:{
            //ダブルクリックで別ウィンドウで開く
            rowdblclick:function(grid,rIndex,e){
                var data = grid.getStore().getAt(rIndex).data;
                window.open(data.link[0].href);
            }
        }
    });
});

実行結果:

JSONPでYouTube Data APIを利用

今回のキモはJsonStoreになります。これまでのサンプルではurlのコンフィグでAPIのURLを設定していました。しかし別ドメインのAPIを呼び出す場合はurlにコンフィグにフルパスを設定してもXMLHttpRequestオブジェクトのセキュリティ上の制約で正しく動作しません。JavascriptではJSONの代わりにJSONPを使うとことで別ドメインのAPIを利用する仕組みがあります。

JSONPとは – はてなキーワード http://d.hatena.ne.jp/keyword/JSONP

JSON with paddingの略

Javascriptの非同期通信でよく使われるXMLHttpRequestオブジェクトにはSame-Originポリシーが存在し、クロスドメインアクセスができない。

一方，scriptタグを用いると，ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。この仕組みを利用し、scriptタグのsrcに、データを取得できるAPIのURLを指定し，ドメインの異なるサーバからデータを取得する仕組みの総称として、JSOPという言葉が使われる。JSONP用の APIでは、関数名＋取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、APIから返されるコールバック関数と同じ名前の関数 (callbackFunc(jsonData))をクライアント側で定義しておけば、データを読み込んだ際にそのコールバック関数が実行される。動的にscriptのDOMを生成することで、非同期でデータが取得できるようになる。

ただし、Same-Originポリシーが存在しないため、機密情報を APIに含める際には十分な注意が必要である。

ExtJSでJSONPを利用する場合はExt.data.ScriptTagProxyを使用してJSONPを実行します。
Ext.data.ScriptTagProxyはJsonStoreのproxyとして設定します。proxyはデータをストアに読み込む設定をカスタムで指定できます。ここにはExt.data.DataProxyクラスのオブジェクトを設定します。Ext.data.ScriptTagProxyはExt.data.DataProxyクラスのサブクラスにです。DataProxyクラスはJSONPを呼び出すための専用のクラスです。サンプルコードではurlコンフィグを指定しているだけですが、より複雑なロード方法を設定できます。
Ext.data.ScriptTagProxyで実行されたAPIはデータが実行可能な関数として取得されます。Ext.data.ScriptTagProxyはその関数を実行して、データを展開してストアに読み込んでいます。特に難しい設定をしなくても自動的に読み込んでくれるのためありがたいです。

今回のサンプルコードのJsonStoreの設定はこれまでより少しややこしくなっているのは、YouTube Data APIの仕様に合わせるためです。baseParamsの値は全て必須です。alt:’json-in-script’でJSONPで呼び出すことをAPIに伝えています。注意点としてはstart-indexが１からでないといけない点です。そのためPagingToolbarで少し不具合が起きていますが、ひとまずそのままにしておきます。また時間があれば解決方法を紹介します。
またrootでドットシンタックス（.）でrootの階層を一段深いところを指定しているのも、初めて出てきました。


	//ストアの設定
    var store = new Ext.data.JsonStore({
        //クロスドメインになるYouTube Data APIをJSONPとして利用するためScriptTagProxyを使う。
        proxy:new Ext.data.ScriptTagProxy({
            url:"http://gdata.youtube.com/feeds/api/videos",
        }),
        baseParams:{
            format:1,
            'max-results':perPage,
            'start-index':1,
            vq:'extjs',
            alt:'json-in-script'
        },
        paramNames:{
            start:'start-index',
            limit:'max-results',
        },
        autoLoad:true,
        root:'feed.entry',
        idProperty:'id.$t',
        totalProperty:"feed.openSearch$totalResults.$t",
        fields:['author','id','title','media$group','link','content','published','category','updated'],
    });

JSONPからデータを読み込んでさえしまえば、これまでのグリッドと同じです。いつものようにColumnモデル等を設定して表示を整えます。YouTube Data APIで取得されるデータは階層が深いので、レンダラーの設定は必須です。


   //各レンダラーの設定
    var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
        return String.format('{1}',
                  store.getAt(rIndex).data.media$group.media$thumbnail[0].url,
                  value.$t);
    };

    var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
        var data = store.getAt(rIndex).data;
        return String.format('{0}
by {1}{2}',
            value.$t,
            data.author[0].name.$t,
            data.content.$t.length > 20 ? data.content.$t.substring(0,20) + '...' :data.content.$t

        );
    };

		・・・

		cm:new Ext.grid.ColumnModel({
            columns:[
                {
                    id:'id', header:'ID', dataIndex:'id', hidden:true
                },
                {
                    id:'img', header:'img', dataIndex:'title', renderer:imgRenderer, width:120
                },
                {
                    id:'title', header:'title', dataIndex:'title', renderer:titleRenderer, width:120
                },

                {
                    id:'duration',
                    header:'Duration',
                    dataIndex:'media$group',
                    renderer:function(value){
                        var totalsec = value.yt$duration.seconds;
                        var min = Math.floor(totalsec / 60);
                        var sec = totalsec % 60;
                        return String.format('{0}:{1}',
                            String.leftPad(min,2,'0'),
                            String.leftPad(sec,2,'0'));
                    },
                    width:120
                }
            ]
        }),

		・・・

あとは必要におおじてtbarとbbarを設定します。この二つはこれまでにも出てきているので解説を省きます。

これでYouTubeのAPIを利用できるようになります。JSONPの使い方を覚えておけば、そのほかのAPIでJSONPに対応しているものがあれば、簡単に利用してマッシュアップが作れてしまいます。APIの仕様は変更されることもあるので、注意が必要です。今回は2010/5/6の時点のYouTube Data APIを利用しています。

ExJS入門28　チェックボックス付きグリッドパネル

佐竹裕行 — Fri, 30 Apr 2010 03:41:45 +0000

そろそろグリッドに関してもネタがなくなってきましたが、今回はグリッドにチェックボックスを追加するサンプルを紹介します。今回はExJS入門21　グリッド・セレクション・モデルのサンプルコードを使って、チェックボックス付きグリッドに変更します。

チェックボックスつきグリッドパネル

グリッドパネル関連の過去の記事はこちらからです。

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.CheckboxSelectionModelクラス
http://extdocs.xenophy.com/?class=Ext.grid.CheckboxSelectionModel

JSON:


{
    success:true,
    total:6,
    rows:[

        {
            'id':1,
            'rank':1,
            'name':'IE',
            'percentage':62.69,
            'url' : 'http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx',
            'img' : '../img/ie64.png'
        },
        {
            'id':2,
            'rank':2,
            'name':'Firefox',
            'percentage':24.61,
            'url' :'http://mozilla.jp/firefox/',
            'img' : '../img/firefox64.png'
        },
        {
            'id':3,
            'rank':3,
            'name':'Chrome',
            'percentage':4.63,
            'url' : 'http://www.google.com/chrome/',
            'img' : '../img/chrome64.png'
        },
        {
            'id':4,
            'rank':4,
            'name':'Safari',
            'percentage':4.46,
            'url': 'http://www.apple.com/jp/safari/',
            'img' : '../img/safari64.png'
        },
        {
            'id':5,
            'rank':5,
            'name':'Opera',
            'percentage':2.40,
            'url' : 'http://jp.opera.com/',
            'img' : '../img/opera64.png'
        },
        {
            'id':6,
            'rank':6,
            'name':'Opera Mini',
            'percentage':0.53,
            'url' : 'http://jp.opera.com/',
            'img' : '../img/opera64.png'
        }
    ]
}

HTML:





    
    ExtJS名古屋勉強会　セレクションモデルその2

    
    
    
    

    
    
    


    
        
            チェックボックスセレクションモデルで複数選択。
        

        
        

        Java Script：grid-selection2.js

        JSONデータ：data.json

Java Script:


Ext.onReady(function()
{
    //1.データを用意
    //今回はファイルでdata.jsonを読み込んでいます

    //2.データストアを用意
    var store = new Ext.data.JsonStore({
        url:'data.json',
        root:'rows',            //実際のデータ位置（プロパティ名）
        totalProperty:'total',  //全件数を返すプロパティ名を指定
        fields:[
            {name:'id'},
            {name:'rank'},
            {name:'name'},
            {name:'percentage',type:'float'},
            {name:'url',type:'url'},
            {name:'img',type:'url'},
        ],
        autoLoad:true           //描写後に自動的に初回のリクエストをかける
    });

    //3.SelModelの設定
    var checkSm = new Ext.grid.CheckboxSelectionModel({
        /* 一行しかチェックできなくする場合
        singleSelect:true,
        header:''
        */
    });

    //4.カラムモデルを用意
    var checkCm = new Ext.grid.ColumnModel([
        checkSm,    //セレクションモデルをカラムに設置
        {
            id:'rank',
            header:'順位',
            dataIndex:'rank',
            width:50
        },
        {
            id:'name',
            header:'ブラウザ名',
            dataIndex:'name',
            width:100
        },
        {
            id:'percentage',
            header:'シェア',
            dataIndex:'percentage',
            width:80
        },
        {
            id:'id',
            header:'ID',
            dataIndex:'id',
            width:20
        }
    ]);

    //5.グリッドパネルの作成
    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        id:'my-grid',
        autoExpandColumn:'name',
        title:'チェックボックスのグリッドパネル',
        height:210,
        width:400,
        cm:checkCm,
        sm:checkSm,
        store:store,
        tbar:[
            {
                text:'選択中のブラウザ情報',
                iconCls:'tick',
                handler:function(btn){
                    var record = grid.selModel.getSelections();
                    var msg;
                    if (!record) {
                        msg = 'ブラウザが選択されていません';
                    }else{
                        msg = new Ext.XTemplate(
                            '',
                            '',
                            '',
                            'ブラウザ名：{values.data.name}
',
                            '順位：{values.data.rank}
',
                            'シェア：{values.data.percentage}%
',
                            'DOWNLOAD
',
                            '',
                            '{xcount}',
                            '{xindex}',
                            '',
                            '',
                            '',
                            '',
                            '',
                            ''
                            ).apply(record);
                    }

                    Ext.Msg.alert('選択中のブラウザ',msg);
                }
            }
        ]
    });
});

実行結果:

チェックボックスつきグリッドパネル

複数選択時の挙動

グリッドのセレクションモデルにExt.grid.CheckboxSelectionModelクラスを指定することで、簡単にグリッドをチェックボックス付きにできます。
まずチェックボックスセレクションモデルを作成します。
Ext.grid.CheckboxSelectionModelはExt.grid.RowSelectionModelのサブクラスです。
Ext.grid.CheckboxSelectionModelのコンフィグにはいくつかのオプションがありますが、各行のチェックボックスをクリックして行を選択するだけであれば初期値のままで十分機能します。
サンプルコードの中でコメントアウトしているように、singleSelectをtrueにすることでラジオボタンのように1つしかチェックできなくすることもできます。その場合カラムのヘッダーに表示される、全て選択のチェックボックスの動作が気持ち悪くなるのでheaderを表示しないようにしています。

次に作成したセレクションモデルをカラムモデルに設置します。今回はカラムの先頭に置いていますが、任意の位置に設定できます。
以上で、チェックボックス機能を備えたグリッドが完成します。今回はシングルセレクトではなく複数のレコードが選択されています。そのためtbarの情報を表示ボタンで実行する処理を変更する必要があります。

現在選択しているレコードの取得はセレクションモデルから取得します。以前のグリッドではgrid.selModel.getSelected()で現在選択されているレコードオブジェクトを取得できました。複数選択されている場合にgetSelected()を実行すると、最後に選択されたレコードだけを取得します。複数選択時はgetSelected()ではなくgetSelections()として選択されているレコードを配列で取得します。このメソッドはExt.grid.RowSelectionModelで定義されているので、Ext.grid.CheckboxSelectionModelでもそのまま使えます。

今回のサンプルでは、取得したレコードの配列をXTemplateで展開して表示しています。XTemplateについて詳しくはこちら第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

ExJS入門27　もう一つのエディタブル・グリッド　ux.RowEditorプラグイン

佐竹裕行 — Wed, 28 Apr 2010 01:39:15 +0000

Ext.gri.EditorGridクラスは、グリッドを表計算ソフトのように編集できるグリッドです。今回はもう一つのエディターグリッドといえるRowEditorを使ったグリッドのサンプルを紹介します。

ux Grid RowEditor

RowEditorはユーザーエクステンション(ux)です。
ユーザーエクステンションは世界中のExtJS開発者が作成して、ExtJSのフォーラムの等で自身のUXを公開しています。
ExtJS Forum http://www.extjs.com/forum

Ext: User Extensions and Plugins

またUXの情報が集められているhttp://extjs-ux.org/もあります。ここにはUX版のAPIドキュメントをまとめたものもあります(全てのUXを網羅しているわけではありませんが)。
UXはExtJSの基本ライブラリ以外には含まれないので、使いたいUXを見つけた場合は開発者のページ等からJS,CSS,画像等のファイルを入手する必要があります。
今回のRowEditorはextjs-ux.orgには無いようです。ExtJSのサンプルのページのRowEditorのサンプルからダウンロードするか、
以下の作者のサイトからも入手できます。
Using the ExtJS Row Editor

グリッドパネル関連の過去の記事はこちらからです。

HTML:





    
    ExtJS名古屋勉強会　Row Editor プラグイン

    
    
    
    

    

    
    
    
    
    



    
        
        UX RowEditorを使ってグリッド項目の編集を行います。
        
        
        

        Java Script：roweditorgrid.js

Java Script:


//Row Editor グリッド
Ext.onReady(function()
{
    var editor = new Ext.ux.grid.RowEditor({
        saveText:'変更',
        cancelText:'キャンセル'
    });

    var grid = new Ext.grid.GridPanel({
        renderTo:'grid',
        title:'UX RowEditorをグリッドに設置',
        height:210,
        width:400,
        plugins:[editor],
        //カラムモデル
        cm:new Ext.grid.ColumnModel([
            {
                id:'id',
                header:'ID',
                width:30,
                dataIndex:'id'
            },
            {
                id:'name',
                header:'ブラウザ名',
                dataIndex:'name',
                width:100,
                editor:new Ext.form.TextField({
                    allowBlank:false
                }),
                renderer:function(v){   //カラムのデータが空のとき表示
                    return v ? v : 'ダブルクリックで編集';
                }
            },
            {
                id:'url',
                header:'URL',
                dataIndex:'url',
                width:100,
                editor:new Ext.form.TextField(),
                renderer:function(v){   //カラムのデータが空のとき表示
                    return v ? v : 'ダブルクリックで編集';
                }
            }
        ]),

        //セレクションモデル
        sm:new Ext.grid.RowSelectionModel({
            singleSelect:true
        }),

        //ストア
        store:new Ext.data.JsonStore({
            url:'data.php',//php等が使えない場合はここをdata:'data.json'としてローカルファイルの取得してもよいです。
            root:'rows',            //実際のデータ位置（プロパティ名）
            totalProperty:'total',  //全件数を返すプロパティ名を指定
            successProperty:'success',
            idProperty:'id',
            fields:[
                {name:'id'},
                {name:'name'},
                {name:'url'},
            ],
            autoLoad:true           //描写後に自動的に初回のリクエストをかける
        }),

        //GridViewのコンフィグを設定
        viewConfig:{
            deferEmptyText:false,
            emptyText:'グリッド項目はありません',
            forceFit:true
        },

        tbar:[
            {
                text:'追加',
                iconCls:'add',
                handler:function(btn){  //グリッドに項目を追加する処理
                    //編集中の場合は編集をやめる
                    grid.stopEditing();
                    var data = {};

                    var RecordType = grid.getStore().recordType;
                    var newItem = new RecordType(data);
                    grid.getStore().insert(0,newItem);
                }
            },
            {
                text:'削除',
                iconCls:'delete',
                handler:function(btn){  //選択したレコードを削除する処理

                    //編集中の場合は編集をやめる
                    grid.stopEditing();

                    //1.選択されている項目を取得
                    var record = grid.selModel.getSelected();

                    if (record) {
                        //2.recordをremoveでストアから取り除く
                        grid.getStore().remove(record);
                    }
                }
            }
        ]
    });
});

実行結果:

RowEditor

RowEditorの設置場所は任意でかまいませんが、今回はextとは分けてuxディレクトリを作って、さらにRowEditorディレクトリを作って設置しています。UXはJSだけでなくCSSファイルや画像も含むためです。まれに使用している画像名が同じ場合もあるため個々のUXごとにディレクトリと管理が楽になります。RowEditor.cssの画像の読み先が少し変でしたので、それにあわせて画像の設置位置が換えてあります。CSS自体を書き換えても良いと思います。

RowEditorはグリッドのプラグインとして設定します。グリッドへのプラグインの設置はGridのコンフィグのpluginsに配列で指定します。配列なのは複数のプラグインを登録できるようしているためです。
[code lang="js"]
var editor = new Ext.ux.grid.RowEditor({
saveText:'変更',
cancelText:'キャンセル'
});

var grid = new Ext.grid.GridPanel({
renderTo:'grid',
title:'UX RowEditorをグリッドに設置',
height:210,
width:400,
plugins:[editor],

・・・

});
[/code]

RowEditorのコンフィグオプションはAPIリファレンスが無いためソースから調査しないといけません。いかに大まかなコンフィグオプションをまとめておきます。
実際使う場合に必要なのは設定は特に無いので空のままでもかまいません。サンプルではボタンが日本語化されないので、保存とキャンセルの文字を日本語に変更しています。

RowEditorが呼び出すエディターはエディタブル・グリッドと同様にカラムモデルで指定します。エディタを設定しないカラムは編集できません。
allowBlank等の設定もも使用できます。RowEditorに必要な設定はこれくらいです。UXのファイル正しく設置できれば特に難しくないかもしれません。
またux.RowEditorはExt-3.1だと少し崩れました。ExtJS 3.2ではきちんと動作しました。（昨日3.2.1も公開されていますね。アップデートのペースがかなり早くなっている気がします。）

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

ExtJS入門39 ファイルをアップロードするフォームフィールド

ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示する

ExtJS入門34 ComboBoxの基本

ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する その2

{from_user}:{1}

ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する

{from_user}:{1}

{from_user}:{1}

ExJS入門31 GridViewでグリッドの各行の背景色を変更する

ExJS入門30 Twitter Search APIを使ったグリッドパネル

ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

ExJS入門28 チェックボックス付きグリッドパネル

ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン

ExtJS入門39　ファイルをアップロードするフォームフィールド

ExtJS入門　JSONP経由でTwitterの情報をDataViewに表示するその2

ExtJS入門　JSONP経由でTwitterの情報をDataViewに表示する

ExJS入門30　Twitter Search APIを使ったグリッドパネル

ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

ExJS入門28　チェックボックス付きグリッドパネル

ExJS入門27　もう一つのエディタブル・グリッド　ux.RowEditorプラグイン