ExtJSで楽しくRIA業務アプリ開発 » チュートリアル

Ext JS/Sencha Touch入門40　Ajaxリクエスト処理

佐竹裕行 — Thu, 05 Aug 2010 02:06:27 +0000

今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。

サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。

Ajax サンプル

まずAjaxでリクエストする先を用意する必要があります。
今回はPHPで作成しました。
・PHP

3秒処理を遅らせています。
レスポンスにはJSON形式でPOSTされた情報とサーバーサイドでの処理が正しく終わったらsuccessにtrueを返すようにしています。

HTMLファイルはSencha Touchの基本形のものでよいです。
・HTML





    
    Ajax Sample

今回のサンプルではパネルをひとつ作ってツールバー上に、Ajaxリクエストをキックするボタンを配置します。このボタンをタップするとAjax リクエストが実行されるようにします。

・Javascript


Ext.setup({
    onReady: function() {

        //リクエスト処理
        var ajax = function(callback) {
            //ローディングマスク
            panel.el.mask(
                false,
                '  
お待ちください...');

            //Ajax リクエスト
            Ext.Ajax.request({
                url:'post.php',
                params:{
                    id:'test'
                },
                success:function(result,opt){
                    //マスクを外す
                    panel.el.unmask();
                    var res = Ext.decode(result.responseText);
                    if (res.success) {
                        window.alert('Success');
                        if (Ext.isFunction(callback)) {callback()};
                    }
                },
                failure:function(result,opt){
                    window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
                }
            });
        };

        //パネルの生成
        var panel = new Ext.Panel({
            fullscreen: true,
            styleHtmlContent:true,
            dockedItems:[
                {
                    xtype:'toolbar',
                    dock:'top',
                    items:[
                        {
                            ui:'mask',
                            iconCls:'action',
                            handler:function(){
                                //コールバック関数
                                var callback = function(){
                                    panel.update('Success!');
                                };

                                //Ajax処理実行
                                ajax(callback);
                            }
                        }
                    ]
                }
            ],
            html:'Ajax Request Sample'
        });
    }
});

前回のHello, World　+ Tbarのサンプルによく似ていますが、今回はxtypeでツールバーを作成しています。
xtypeについてはコチラ

ボタンのコンフィグオプションで
ui:’mask’,
iconCls:’action’
が設定されています。iconClsではボタンに配置する画像をCSSで設定できますが、今回はSencha Touchに予め用意されているactionクラスをそのまま使います。
Sencha Touchのパッケージ内のexamplesのiconsサンプルをみるとどんなアイコンがあるのかが分かります。

Ajax リクエスト処理
Ext JSおよびSencha TouchではExt.Ajaxクラスを使用してAjax処理を行ないます。このクラスはシングルトンですので、Ajax処理を呼びたい箇所でExt.Ajaxのrequestメソッドを呼び出します。パラメーターはURLなので設定はオブジェクトで渡します。

・Ext.Ajax.request
Ext.Ajax.requestの引数に渡しているもの

url:(String)リクエスト先のURL
params:(Object) パラメータ
success:(Function) Ajaxリクエスト成功時のコールバック関数
failure:(Function) Ajaxリクエスト失敗時のコールバック関数

最も単純なAjaxリクエストへ渡す設定は上の4つのものになります。
paramsに設定されているパラメータをurlの先にPOSTして,正しいレスポンスが返ってきたときにsuccessに設定されているコールバック関数が実行されます。リクエスト自体が失敗した場合(404などが返ってきた場合。)にfailureに設定されているコールバックが実行されます。

サンプルではajaxという関数にAjaxの処理をまとめています。
Ext.Ajax.request()の部分で実際にAjaxを実行します。

ajax関数の中では、リクエスト中に画面全体にマスクを掛ける処理を、行っています。

・ローディングマスク

ローディングマスクを表示


panel.el.mask(
                false,
                '  
お待ちください...');

Ext.Elementのmaskメソッドでそのエレメントにマスクをかける処理を実行します。Ext JSとSencha Touchでは引数が違うので注意が必要です。
Sencha Touchのマスク処理はスタイルがあんまり良くないので、独自で設定する必要があります。ローディング用の画像もないので適当なものを用意する必要があります。今回はこんなのGifアニメを作って設定しています。

ローディング用Gifアニメ

マスクを外すときは同様にExt.Elementのunmaskメソッドで行ないます。サンプルでは
successのコールバックの中でpanel.elをunmaskを実行しています。


success:function(result,opt){
　//マスクを外す
　panel.el.unmask();
　　　　　・
　　　　　・
　　　　　・
}

・コールバック処理


success:function(result,opt){
  //マスクを外す
  panel.el.unmask();
  var res = Ext.decode(result.responseText);
  if (res.success) {
    window.alert('Success');
    if (Ext.isFunction(callback)) {callback()};
  }
},
failure:function(result,opt){
  window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}

リクエスト成功/失敗時はwindow.alertを使って結果を表示してます。
また今回のサンプルではsuccess時にさらに呼び出し元でコールバックを設定して、パネル内の要素を”Success”に書き換えています。

・レスポンスボディーの取り出し
successのコールバックの第一引数にレスポンスがオブジェクトとして渡されます。
サンプルではresultという名前に設定しています。resultの中のresponseTextにレスポンスのボディーが格納されています。
サンプルのPHPの場合ではJSONの文字列を返しています。レスポンスボディーはそのままではただのテキストです、そのため文字列からJSONに変換する必要があります。
Sencha TouchでもExt JSと同じようにExt.util.JSONクラスを使ってJSONの変換を行います。
今回は文字列からオブジェクトへの変換(JSON.decode)処理を使います。


success:function(result,opt){
  //文字列からオブジェクトに変換する
  var res = Ext.decode(result.responseText);

  //resはオブジェクトとして扱えるようになる。
  if (res.success) {
    window.alert('Success');
   　　・
　　　・
　　　・
  }
}

Ext.decodeはExt.util.JSON.decodeへのエイリアスです。Ext.decodeで呼び出した方が簡素なのでこちらを使っています。
このExt.decodeを使ってレスポンスボディの文字列をJavascriptのオブジェクトとして扱えるように変換します。
変換されたレスポンスボディはオブジェクトとして扱えるので、res.successのようにドットシンタックスで任意のプロパティ値を取得できるようになります。

以上、Ext.Ajax.requestの簡単な使い方です。詳しくはAPIリファレンスをご覧ください。
Sencha Touch API Documentation
http://www.sencha.com/deploy/touch/docs/?class=Ext.Ajax

Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ

佐竹裕行 — Tue, 27 Jul 2010 05:44:06 +0000

2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4　佐竹の担当箇所のSencha Touch入門篇アジェンダです。

時間と場所は下記の通りです。残念ながら既に定員に達しているようです。
当日はUstreamでも配信も予定されているようですので、こちらでご覧ください。
http://www.ustream.tv/channel/extjapan
以下 Ext Japanブログより転載

日時：2010年7月28日（水）19:00～21:00（18:45開場）
募集人数：45名
場所：東京都港区東新橋1-9-1 東京汐留ビルディング9Fソフトバンク株式会社内（今回はいつもと会場が違いますので、ご注意ください。）
参加費：無料
アジェンダ：
Senchaへのブランド変更について（直鳥）
Sencha Touch入門（株式会社sus4 佐竹様）
Sencha TouchとYubizoで作るネイティブアプリ（株式会社アイキューブドシステムズ佐々木様）
SpreadOfficeとSencha Touch（小堤）
ホワイトクラウドシェアードHaaSのご紹介（ソフトバンクテレコム株式会社加藤様）

—–

Sencha Touch入門：Sencha Touchのはじめかた　佐竹裕行 – 株式会社sus4

・Sencha TouchでつくるiPhone/iPadアプリ

・Sencha Touchの環境
エディタ等
デバッグコンソール

・Hello, World!
Sencha Touchのアプリを作る。
HTML + JS合わせても30行くらいで
APIリファレンス、デバッグ環境など

・付属サンプルCarouselの解説
以前書いたブログの記事ベースにもう少し詳しく、Sencha Touchアプリの作り方を紹介します。
http://extjs.blog.sus4.co.jp/2010/06/28/sencha-ex-carousel/

—–

時間的にSencha Touchのさわり位しかできないと思いますが、
実際に手を動かしてSencha Touchを作ることと、その際のTipsが紹介できれば良いかなと思います。
APIリファレンスの読み方、フォーラム利用等。
内容はできるだけ簡単にして、ExtJSを知らなくても分かる内容です。
まさに入門という内容で、サンプルもできる限り簡単なものにしました。
Hello,World!に至ってはHTML + JS合わせても30行程度コードを書くだけです。
Sencha Touchの開発の雰囲気がつかめれば良いかなと思っています。
またSencha Touchのパッケージに含まれるexamplesを自力で読めるようになるのが目標です。

事前の準備しておくと良いもの：
・Sencha Touch ライブラリのダウンロード
http://extjs.co.jp/products/touch/

・iPhone、iPad、Androidでバイスの実機　もしくは　XCode付属iPhoneシュミレーター
Android,iPhone 3G以下はあまりおすすめできません。
XCodeはダウンロードに数GBかかるので事前にインストールしておくいていただくとスムーズです。

・ExtJS自体を知らない方はこのブログのチュートリアルの以前の記事を読んでおいていただけると良いかと思います。
勉強会ext-onreadyからはじめるextjsのまとめ
 sus4 Ext JSブログ内Sencha Touchの記事

Sencha Touch入門:Sencha Touch の付属サンプルCarouselを使ってSencha Touchのコツをつかむ

佐竹裕行 — Mon, 28 Jun 2010 06:39:24 +0000

Sencha Touch入門

Sencha Touch に付属するでもCarouselを見ながら、基本的なSencha Touchの使い方を紹介します。
コードは配布されているSencha Touchパッケージの/examples/carousel　にあります。
ここではindex.htmlについては,前回の記事をごらんください。
index.jsをお好きなエディタで開きながらご覧下さい。
iPad or iPhoneがあるとなおよいと思います。

Ext JSの基本についてはこちらをご覧下さい：
Ext.onReadyからはじめるExtJSのまとめ

Sencha Touch Examples

Sencha TouchはこれまでのExt JSのコードと違う個所がいくつかあります。
今回はその中でも基本となる、3点を紹介します。
1.Ext.setup()
2.onReadyコンフィグ
3.panelのfullscreenコンフィグ

1.Ext.setup();

これまでのExt JSのアプリではExt.onReady()をアプリの起動ポイントとして使っていることがほとんどでした。
Sencha Touch付属のサンプルではExt.setup()を使って、様々な初期設定を行っています。onReady()もこの
Ext.setup()のなかで設定されています。

APIをみるとsetupで設定できる項目一覧が乗っているので簡単に訳しておきます。

fullscreen – Boolean -　フルスクリーン設定

tabletStartupScreen – String – iPad用の起動時画像へのパス　サイズは768×1004 縦長でないといけない

phoneStartupScreen – String – iPhoneと iPod touch用起動時画像へのパス　320×460 で縦長でないといけない

icon -タブレットとスマートフォン両方に使われるアイコン画像へのパス　72×72がよい

tabletIcon – String – タブレット用アイコン画像へのパスこちらがiconで設定される画像より優先される　72×72がよい.

phoneIcon – String – スマートフォン用アイコン画像へのパスこちらがiconで設定される画像より優先される　57×57がよい.

glossOnIcon – Boolean – iPhone, iPad and iPod Touchのアイコンにグロスのエフェクトをつけるかどうか

statusBarStyle – String – iOS web アプリのステータスバーのスタイルの設定. default, black,black-translucentのどれかを選択。

preloadImages – Array – プリロードする画像へのパスの配列（詳細は後日調査）

onReady – Function – DOM構築後に実行される関数。アプリの起動ポイントになることが多い。

scope – Scope – スコープの設定

画像系の設定が多いですね。

CarouselサンプルのExt.setup()で設定される、他の項目をみるといくつか画像が設定されています。
Sencha TouchのWebアプリをホーム画面に追加してから起動すると,iPadはtabletStartupScreen,
iPhoneはphoneStartUpScreenが起動時の画面として登録されます。

Safariのツールバーで[+]をタップすると以下のようなメニューがでるので、ホームに追加します。

Sencha Touch アプリをホーム画面に追加

iconはホーム画面に設定される際のアイコンになる画像です。（ただし現状ではiPadでは正しく設定されましたが、iPhone4では上手くいきませんでした。もう少し詳しく調べてみます。）
iPhone4だとこうなりました。

ホーム画面に追加されたSencha Touch アプリ

tabletStartupScreen　:　タブレット用（iPad）
phoneStartupScreen　: スマートフォン用（iPhone,iPod Touch）
icon :アイコンとなる画像（iPadでしか正しく設定されない？）

まだAndroidの文字がありませんが、これから対応されていくと思います。

iPhoneでの起動時の画像

またホーム画面から起動すると自動的にURLバーとSafariのツールバーが非表示になります。これだけでぐっとネイティブアプリのような見た目になります。

2.onReadyコンフィグ
次にonReadyで実行される処理を見ていきます。
Carouselサンプルでは上下2つの領域に2つのカルーセルのコンテナが配置されています(carousel1,2)。それぞれのコンテナにはさらに子となる要素を設定して、その要素をスライドさせることができます。
carousel1も2もほぼ同じ内容ですので1のほうだけを紹介します。


// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [
{
html: 'Carousel
Navigate the two carousels on this page by swiping left/right or clickin    g on one side of the circle indicators below.'
}, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});

基本的にはExt JSでpanel等の配下にさらに子となるパネルを入れる作業とおなじです。
TabPanelやCardレイアウトのパネルで設定したように,itemsの中にパネルを設定しています。ここでは単純にHTMLで内容を記述した3枚のパネルを使っています。defaultsでそれぞれのパネルのCSSクラスにcardというセレクタを追加してます。

3.fullscreen設定
このサンプルはほんとに簡単で上で作ったカルーセルコンテナをパネルに配置しているだけです。
ただしこのカルーセルの親となるパネルのコンフィグでfullscreen設定をtrueにする必要があります。
この設定で、Ext JSのViewportのように画面全体にパネルを広げます。
ここではlayoutでvboxを設定しています。これはExt JSのレイアウトと同じですね。
この部分だけをみるとExt JSのコードとほとんど区別が付きません。
これまで培ったExt JSのノウハウをそのままSencha Touchで作るタッチスクリーンのアプリに活かせるのよく分かります。


new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1, carousel2]
});

またデバッグの方法を考える必要があります。モバイルSafariではデバッグメニューを表示できますが不十分です。
FirefoxでSencha Touchアプリを見るとレイアウトがかなり崩れています。
よい方法を見つけられた方は是非教えてください。

Sencha Touch をはじめよう 1　(Getting Started with Sencha Touch の邦訳その１)

佐竹裕行 — Mon, 21 Jun 2010 08:38:14 +0000

Sencha Touch をダウンロードするとGetting Started width Sencha Touchというオライリーの本のタイトルっぽいチュートリアルが付属しています。
当然英語なので勝手に翻訳してみます。

英語としては簡単な文章になっているので、原文でも読みやすいとおもいます。
Ext JSの知識がある人にとっては、内容があまりありません。ExtJSの知識無しでいきなりSencha Touchはじめる人のためのチュートリアルといった感じです。

Sencha Touch をはじめよう　(Getting Started with Sencha Touch の邦訳)

これはSencha Touchのはじめ型を解説した文書です。
Sencha Touchを使ってタッチスクリーンを持つデバイスに特化したWebアプリを作る際の基本的なステップを紹介しています。この解説では、今回のSencha Touchのリリースに含まれるサンプルアプリGeoTweetsの詳細な製作ステップも紹介しています。

この解説はSencha Touchを使ってすばやく、タッチスクリーンに対応したデバイス向けのWebアプリを作りたい全てのWebデベロッパーに向けて書かれています。
以下の準備を先に済ませている前提で話を進めます
Sencha Touchのライブラリをダウンロード。
開発用のサーバーの準備
HTML + CSS + JSを使用したWebアプリの開発の知識がある。
それでははじめましょう。

この解説では以下のセクションがあります。

Sencha Touch の紹介：Introduction to Sencha Touch
Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps
Sencha Toutchの使い方（応用編：GeoTweetsの解説）：Using Sencha Touch: Detailed Steps for Creating the GeoTweets Application
まとめ：Summary and Further Reading

※訳注：今回の翻訳はSencha Touchの使い方（基本編）までです。

Sencha Touch の紹介：Introduction to Sencha Touch
Sench Touch はタッチパネルデバイス向けWebアプリケーション開発用JavaScriptフレームワークです。Sencha Touchを使うことで、Webデベロッパーの既に持っているスキルを使いながらエレガントで一貫性のあるUIを使ったWebアプリケーションを最小限の努力で作成することができます。

Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps

開発環境を作る
HTMLファイルの作成
アプリケーションのJSファイルを作成
アプリのテスト
リリースのための設定　Update the Application for Production
アプリケーションを運用する　Put the Application into Production

1.環境を作る

Sench Touchライブラリのダウンロード

Webアプリの開発環境の確認（エディタ、ブラウザなどのことだと思います。）
開発及び運用のためのサーバーの設定を確認
独自のCSSファイルを使う場合はファイル名を確認しておく（これは次のステップでHTMLファイルの中で必要になるためです。）

2.HTMLファイルを作る
お好きなエディタでこのアプリケーションのためのHTMLファイルを作ります。HTMLファイルの例は以下のようなものがあります。ここではmyapp.htmlとしています。
アプリケーションのHTMLには特定のリンクを設定する必要があります。

Sencha TouchのデフォルトのCSSファイル ext-touch.css
アプリケーションのカスタムのCSS(mycss.cssなど)
使用したバージョンのSencha Touch ライブラリ
ただしSenechaチームは以下の点をお勧めしています。
アプリケーションの開発、テスト時：ext-touch-debug.js（デバッグバージョン：このバージョンはライブラリのどこでエラーが起きているかを見つけやすくなっています。非圧縮バージョン　難読化されていない。)
運用時：ext-touch.js(運用バージョン：圧縮バージョン　運用時のtipsは「リリースのための設定」をご覧下さい)
アプリケーションのJavaScriptファイル（次のステップで作成します。myApp.jsなど）

※訳注：以下はオリジナルのドキュメントではアンカーリンクの先の部分です。

HTMLファイルの作成の詳細
Sencha Touchのアプリケーションの開発の最初のステップはHTMLファイルの作成です。
このHTMLファイルはSencha Touchライブラリ、Sencha TouchのデフォルトCSS、アプリケーションのためのCSS,JSとリンクしている必要があります。

例えばGeoTweetsのHTMLファイル（index.html）は以下のようになります。
 
 
 
     
     GeoTweets

	 
    
    
    

    
    

    
    
    

    
    



    
        
            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入門38　独自のVTypeを定義してフォームを検証する

佐竹裕行 — Fri, 21 May 2010 04:05:36 +0000

今回はフォームのVTypeに独自のバリデーションを設定して、フォームの検証を行うサンプルです。

カスタムのVTypeを定義してフォームを検証する。

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

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

HTML:





    
    ExtJS名古屋勉強会　フォーム　カスタムのVTypeの作成

    
    
    
    

    
    
    
    


    
        

            Extのフォーム　カスタムVTypeの作成してフォームを検証します。
        
        
        

        Java Script：form-vtype.js

Java Script:


Ext.onReady(function()
{
    Ext.apply(Ext.form.VTypes,{

        //EXTという文字以外を入力させないルール
        onlyEXT:function(val){
            var pattern = /[^EXT]/g;
            return !pattern.test(val);
        },
        onlyEXTText:'EXTしか入力できません。大文字と小文字を区別します。',
        onlyEXTMask:/[EXT]/,

        //自分で設定した日付形式でチェックする場合
        mydate:function(val) {
            var dt = Date.parseDate(val,'Y:m:d',true);
            return dt ? val : false;
        },
        mydateText:'日付の形式が間違っています。2010:01:01の形式で入力してください。',
        mydateMask:/[0-9:]/
    });

    var form = new Ext.form.FormPanel({
        renderTo:'form',
        title:'カスタムのVTypeを使ったフォーム',
        height:280,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        defaults:{
            xtype:'textfield',
            anchor:'90%',
            msgTarget:'under'
        },
        items:[
            {
                name:'normal',
                fieldLabel:'チェックなしフィールド',
                emptyText:'チェックなし'
            },
            {
                name:'email',
                fieldLabel:'Emailフィールド',
                emptyText:'Email入力してください',
                vtype:'email'  //vtypeコンフィグでバリデーションが設定　emailはデフォルトであるvtype
            },
            {
                name:'onlyabc',
                fieldLabel:'onlyEXTフィールド',
                emptyText:'EXTのみ入力可',
                vtype:'onlyEXT'
            },
            {
                name:'mydatefield',
                fieldLabel:'mydateフィールド',
                emptyText:'日付を入力',   //空のときのテキスト
                anchor:'90%',
                vtype:'mydate'
            },
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'決定',
                formBind:true,
                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
                    });
                }
            }
        ]
    });
});

実行結果:

カスタムのVTypeを定義してフォームを検証する。

ExtJSでは予め、いくつかのVtypeが用意されています。

alpha:アルファベット
alphanum:アルファベットと数字
email:E-mailアドレス
url:URL

これをフォームフィールドのvtypeコンフィグに設定することでフィールドのvalidateが実行されたときに、検証方法を指定できます。
使用例は以下のような形です。vtypeを文字列で指定します。


//emailを設定する場合
new Ext.form.Textfield({
	name:'email',
	fieldLabel:'Emailフィールド',
	emptyText:'Email入力してください',
	vtype:'email'  //vtypeコンフィグでバリデーションが設定　emailはデフォルトであるvtype
}),

さて今回の本題ですが、VTypeに独自の検証法を定義する方法です。今回のサンプルでは2種類の独自VTypeを定義して使っています。
一つはE、X、T、の3文字のうちどれかしか入力できないフィールド。もう一つは独自の日付チェックを設定しています。
ExtJSのVTypeはExt.form.VTypesクラスというシングルトンクラスで管理されています。独自で作成したvtypeもここに登録しなければいけません。
登録方法はExt.form.VTypesクラスをオーバーライドすることで登録します。ExtJSのクラスのオーバーライドではExt.apply()を使ってExtJSで2つのオブジェクトをマージする方法があります。
Ext.apply()メソッドは引数を2つもち、第一引数側に第二引数のオブジェクトを追記します。


    Ext.apply(targetObj,{srcObj});

仮にtargetObjとsrcObjに同じプロパティが設定されいる場合は、srcObj側のプロパティに上書きされます。またマージする方向を逆にしたExt.applyIf()というメソッドも用意されています。

今回の場合


Ext.apply(Ext.form.VTypes,{

        //EXTという文字以外を入力させないルール
        onlyEXT:function(val){
            var pattern = /[^EXT]/g;
            return !pattern.test(val);
        },
        onlyEXTText:'EXTしか入力できません。大文字と小文字を区別します。',
        onlyEXTMask:/[EXT]/,

・・・
});
[/code]
というようにExt.form.VTypesにオブジェクトを追加しています。Ext.form.VTypesクラスに登録を行うと各フィールドのコンフィグで独自のvtypeを読み出すことができます。

では実際のvtypeの記述方法です。まずEXTしか入力できないルールを作成します。
独自のvtypeのためには3つのプロパティを設定できます。

vtype名:実際の検証処理関数。falseを返すとInvalidになる。またこの関数名がフィールドのvtypeコンフィグから呼び出す名前になる。
vtype名Text:このルールで検証結果がInvalidの場合に表示されるエラーメッセージ
vtype名Mask:このvtypeが設定されているフィールドへの入力を制限する。正規表現でしてい

オブジェクトとしては以下のように記述して、Ext.form.VTypesに追加します。


Ext.apply(Ext.form.VTypes,
	{
			//EXTという文字以外を入力させないルール
			onlyEXT:function(val){
				var pattern = /[^EXT]/g;
				return !pattern.test(val);
			},
			onlyEXTText:'EXTしか入力できません。大文字と小文字を区別します。',
			onlyEXTMask:/[EXT]/,

}
);
[/code]
VTypeを登録したら、使いたいフィールドで


vtype:'onlyEXT'

を設定します。
vtype：onlyExtのフィールドではEXTの3文字のうちどれかしか入力できません。onlyEXTMaskで設定した入力制限が効いているためです。しかし日本語環境では日本語が入力できてしまいます。入力があるとonlyEXTに設定した検証関数で検証されます。ここでEXT以外の文字列があった場合はfalseを返すようにしています。検証関数からfalseが返るとfieldはInvalidになりエラーメッセージを表示します。ここにはonlyEXTTextで設定したエラーメッセージが表示されることになります。
これで指定した文字以外の入力を制限します。

次に独自の日付フォーマットをチェックするVTypeの例です。VTypeの設定は以下のようになります。


Ext.apply(Ext.form.VTypes,
	{
        //自分で設定した日付形式でチェックする場合
        mydate:function(val) {
            var dt = Date.parseDate(val,'Y:m:d',true);
            return dt ? val : false;
        },
        mydateText:'日付の形式が間違っています。2010:01:01の形式で入力してください。',
        mydateMask:/[0-9:]/
	}
);

このVTypeではmydate関数内でDate.parseDate()で独自の日付形式でDateオブジェクトの生成を行っています。valにパースできない文字列が入ってきたばあいはdtにはundefinedが返されます。
parseDate()メソッドは賢く例えば5/32を指定した場合は、自動的に6/1にしてくれます。しかし現実的に5/32とは入力された場合は5/31の入力間違いの可能性が高いので、エラーにして欲しいと思います。その場合はparseDate
()メソッドの第三引数にbooleanで厳密な日付のチェックを行うか指定できます。ここがtrueの場合は5/32といった実際にはない日付はエラーになります。

今回はVTypesに独自のVtypeを追加する方法を紹介しました。フォームの検証はサーバーサイドでも行う必要がありますが、クライアントサイドのUIで処理することで、わざわざ情報をポストすることがないので高速に実行できます。前回紹介したサーバーからエラーメッセージを表示する方法と一緒に利用することで、ユーザビリティのよいフォームパネルが作成できます。

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入門36 HTMLの標準フォームにExtJSのフィールドを設置する

佐竹裕行 — Wed, 19 May 2010 04:02:30 +0000

今回はExtJSのフォーム（フィールド）をHTMLのノーマルなインプットのようにform要素に仕込むサンプルを紹介します。

HTMLの標準フォームにExt.form.Textfieldをレンダリング

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

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

HTML:





    
    ExtJS名古屋勉強 htmlにフィールドをレンダリング

    
    
    
    

    
    
    
    


    
        

            Extのフォームのレイアウト HTMLにExtのフィールドを仕込む
        
        
        
            インプット1:
            インプット2:
            インプット3:
            インプット4:

            普通のイプット:
        

        
        
        

        Java Script：form-layout3.js

Java Script:


Ext.onReady(function()
{

    //エイリアスを作っておく
    var dh = Ext.DomHelper;

    for (var i=1;i < 5; i++)
    new Ext.form.TextField({
        renderTo:'input' + i,
        allowBlank:false,
        name:'input' + i,
        listeners:{
            blur:function(field){
                var value = field.getValue();
                console.debug(value);
                console.debug(value.length);
                if (value.length < 5) {
                    msg = '短すぎます';
                    field.markInvalid(msg);
                }
            },
            invalid:function(field,msg){
                var msgdiv = Ext.get('msg-' + field.name);
                if (msgdiv) {
                    msgdiv.remove();
                }
                dh.append('msg',
                    {
                        tag: 'div',
                        cls:'message',
                        id: 'msg-' + field.name,
                        html:field.name + ':' + msg
                    }
                );
            },
            valid:function(field){
                var msg = Ext.get('msg-' + field.name);
                if (msg) {
                    msg.remove();
                }
            }
        }
    });

    new Ext.Button({
        renderTo:'submit',
        text:'送信',
        iconCls:'submit',
        handler:function(){
            document.extform.submit();
        }
    });
});

実行結果:

HTMLの標準フォームにExt.form.Textfieldをレンダリング

テーブルレイアウトは、表のようにパネルを配置します。これをフォームに適応するには前回同様fieldsetでラップしてfieldset内はformレイアウトを使いラベルを表示させます。
tableレイアウトは列の数を予め設定しておく必要があります。レイアウトのコンフィグの設定はlayoutConfigで行います。


        layout:'table',
        layoutConfig:{
            columns:3
        }

ExtJSのフィールドをHTMLで記述したフォームの中に設置しています。フィールドのrenderToコンフィグでレンダリング先を指定しいます。
例えばinput1のフィールドはspan#input1に下のように描画されます。

このようにテキストフィールドはinput type=”text”…という要素が生成されるためHTMLのフォームの中にExtJSのフィールドを仕込むことができます。
ただしfieldLabelなどの機能は利用できません。fieldLabelなどは親となるコンポーネントに依存しているためです。
ExtJSのフィールドにすることで、イベントリスナを設定することができるようになります。サンプルコードではblurイベントが発火されると、長さをチェックするような処理を記述しています。もちろんAjaxリクエストなども可能です。
invalid時のエラーメッセージも表示されなくなるので、サンプルコードではDomHelperを使ってエラーメッセージを表示するようにしています。

一見普通のフォームに見せておいて裏側でバリバリExtを使うといったことが可能になります。
サンプルコードではサブミットボタンもExtJSのボタンにしてしています。フィールドと同じようにrenderToで指定した要素にレンダリングしています。
formBindは使えませんが、妥当性のチェックとボタンを手動でしていして、disabledに設定することもできると思います。
datefield等を使うこともできるので、単発で使うこともできますが、ExtJSのライブラリのサイズが大きいのが少しマイナス要素です。ExtJS2.3ではextjs.comで必要なライブラリだけを選べるサービスがあったのですが、3.ｘではなくなっています。

ExtJS入門35 Tableレイアウトのフォーム

佐竹裕行 — Tue, 18 May 2010 04:18:26 +0000

今回はtableレイアウトのフォームの簡単な紹介です。基本的な部分はcolumnレイアウトのときと同じです。tableレイアウトではcolspan,rowspanを使ってレイアウトを設定します。ExtJS入門33 Columnレイアウトのフォーム

Tableレイアウトのフォーム

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

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

HTML:





    
    ExtJS名古屋勉強会　フォーム　Columnレイアウト

    
    
    
    

    
    
    
    


    
        

            Extのフォームのレイアウト
        
        
        

        

        Java Script：form-layout2.js

Java Script:


Ext.onReady(function()
{
    var form = new Ext.form.FormPanel({
        autoScroll:true,
        renderTo:'form',
        title:'tableレイアウトのフォーム',
        height:600,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        layout:'table',
        layoutConfig:{
            columns:3
        },
        defaults:{
            border:false,
            xtype:'fieldset',
            labelAlign:'top',
            anchor:'90%',
            defaults:{
                xtype:'textfield',
                emptyText:'入力してください',   //空のときのテキスト
                msgTarget:'under',   //入力に誤りがある場合はフィールドの下に表示
                allowBlank:false,
                anchor:'90%'
            }
        },
        items:[
            {
                xtype:'displayfield',
                value:'fieldLabelはformレイアウトの場合しか表示されないので、さらにフィールドセットでラップしてformレイアウトの中にフィールド入れています。
 ',
                hideLabel:true
            },
            {
                items:{
                    name:'samplefield1',
                    fieldLabel:'テキストフィールド1'
                }
            },
            {
                items:{
                    name:'samplefield2',
                    fieldLabel:'テキストフィールド2'
                }
            },
            {
                rowspan:2,
                items:[
                    {
                        name:'samplefield3-1',
                        fieldLabel:'テキストフィールド3-1'
                    },
                    {
                        name:'samplefield3-2',
                        fieldLabel:'テキストフィールド3-2'
                    },
                    {
                        name:'samplefield3-3',
                        fieldLabel:'テキストフィールド3-3'
                    }
                ]
            },
            {
                colspan:2,
                items:{
                    name:'samplefieldr4',
                    fieldLabel:'テキストフィールド4'
                }
            },
            {
                colspan:2,
                items:{
                    name:'samplefield5',
                    fieldLabel:'テキストフィールド5'
                }
            },
            {
                colspan:2,
                items:{
                    name:'samplefield6',
                    fieldLabel:'テキストフィールド6'
                }
            },
            {
                items:{
                    name:'samplefield7',
                    fieldLabel:'テキストフィールド7'
                }
            },
            {
                title:'左のセット',
                colspan:2,
                border:true,
                bodyStyle:'padding:3px',
                items:[
                    {
                        name:'samplefield8',
                        fieldLabel:'テキストフィールド8'
                    },
                    {
                        name:'samplefield9',
                        fieldLabel:'テキストフィールド9'
                    }
                ]
            },
            {
                title:'右のセット',
                border:true,
                bodyStyle:'padding:3px',
                collapsible:true,
                items:[
                    {
                        name:'samplefield10',
                        fieldLabel:'テキストフィールド10'
                    },
                    {
                        name:'samplefield11',
                        fieldLabel:'テキストフィールド11'
                    }
                ]
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'セット',
                iconCls:'add',
                handler:function(){
                    //初期値もセットできる
                    var formFields = form.getForm();
                    formFields.setValues({
                        samplefield7:'test',
                        samplefield8:'test'
                    });
                }
            },
            {
                text:'決定',
                formBind:true,
                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
                    });
                }
            }
        ]
    });

});

実行結果:

Tableレイアウトのフォーム


        layout:'table',
        layoutConfig:{
            columns:3
        }

layoutConfigにはオブジェクトで設定情報を渡します。columnsで列数を指定します。ここでは3列にしました。
これでtableレイアウトはitemsに設定されているコンポーネントを横に3つずつならべて表示してくれます。

さらにtableレイアウトではcolspan,rowspanが設定できます。columnレイアウトと同じように、itemsのそれぞれのコンポーネントに個別で指定します。
サンプルコードではフィールド３，４が以下のようになっています。。


{
	rowspan:2,
	items:[
		{
			name:'samplefield3-1',
			fieldLabel:'テキストフィールド3-1'
		},
		・・・
},
{
	colspan:2,
	items:{
		name:'samplefieldr4',
		fieldLabel:'テキストフィールド4'
	}
},

rowspanを設定するとその数だけ行を縦に連結します。対してcolspanは列を横に連結します。
注意点としては、rowspanを設定した場合vertical-alignがmiddleになり真ん中に寄せられる点です。右のセットのように折りたためるfieldsetの場合は折りたたんだ状態で真ん中によってしまうので少し不恰好です。フォーラムを見るとtableレイアウトクラスを拡張すればvalignをtopにできるようです。
columnと違ってrowspanが設定できるのがtableレイアウトの良いところなのですが、ちょっと残念です。
しかしtableレイアウトも上手く使うことで複雑なフォームのレイアウトが可能です。色々なフィールドで試してみると良いかも知れません。

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で楽しくRIA業務アプリ開発 » チュートリアル

Ext JS/Sencha Touch入門40 Ajaxリクエスト処理

Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ

Sencha Touch入門:Sencha Touch の付属サンプルCarouselを使ってSencha Touchのコツをつかむ

Carousel

Sencha Touch をはじめよう 1 (Getting Started with Sencha Touch の邦訳 その１)

ExtJS入門38 独自のVTypeを定義してフォームを検証する

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

ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する

ExtJS入門35 Tableレイアウトのフォーム

ExtJS入門34 ComboBoxの基本

Ext JS/Sencha Touch入門40　Ajaxリクエスト処理

Sencha Touch をはじめよう 1　(Getting Started with Sencha Touch の邦訳その１)

ExtJS入門38　独自のVTypeを定義してフォームを検証する