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

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

7月のExt JS勉強会（東京）「Sencha Touchのはじめかた　」まとめ

佐竹裕行 — Thu, 29 Jul 2010 11:52:18 +0000

7月の勉強会(東京)のまとめになります。

開発環境
→　好きなやり方。とりあえずささっと試したいならjsdo.itがおすすめ。コードの共有もできる。デバイスに依存しない部分なら結構使える。

検証機(タッチパネルデバイス)
→　iPhone 3GS以降 or iPad　が無難。Mac があるならiPhone　シュミレーターが一番安定している。iPhone 3G,Android端末は微妙。

APIリファレンス
→　発表し忘れ項目。Sencha Touchを学ぶうえで公式のAPIリファレンスはとても重要。Ext JSほど充実していないが、サンプルコードも載っているのですごく参考になります。Sencha Touchのパッケージにも入っていますが、以下のURLで見れます。もちろん英語です。
http://www.sencha.com/deploy/touch/docs/

本家フォーラム
→　Sencha はExt の頃からforumで活発な議論が交わされています。Sencha のメンバーからのリプライも早いので、バグっぽいものを見つけたらとりあえずforum内を見てみると以外とすでに質問があがっていたりします。Sencha Touchのライブラリ自体に怪しい部分がたくさんあるので、困ったら覗いてみると良いかもしれません。
http://www.sencha.com/forum/

Hello,World!
とにかく短い行数でSencha Touchアプリを書く。
HTML + JSで30行くらいかけば、とりあえずSencha Touchで動くWebアプリになっている。
XCodeのプロジェクトテンプレートのviewベースのテンプレートのようなものを目指しました。
コードはjsdo.itにあがっている Hello, World!になります。
勉強会当日のサンプルコード間違ってました。すいません。jsdo.it上も修正済みです。

Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS

多くのSench TouchのHTMLは以下のようにシンプルなものになります。
・HTML


 
 
 
 helloworld

この中でやることは3つ。

Sencha TouchのCSSを読み込む
Sencha TouchのJSを読み込む(3種類から選べるますが,ext-touch-debug.js)
自分のアプリケーションのJSファイル

Sencha Touchの中には3種類のライブラリがあります。ext-touch.jsが本番用の圧縮されたライブラリです。
運用環境ではこのライブラリを使うとファイル読み込みファイルが小さくなります。
ただし、難読化されているのでライブラリ中のバグが見つけにくくなります。開発中は-debugのついた2つのライブラリから選択するが無難です。
ext-touch-debug.jsとext-touch-debug-w-comments.jsはファイル名の通りコメントがあるかないかの違いがあります。コメント付きは当然ファイルが大きくなるので、ext-touch-debug.jsを選んでおくとちょうどよいかもしれません。

ではmain.jsの中を見ていきます

・javascript


 Ext.setup({
 onReady: function() {
 var panel = new Ext.Panel({
 fullscreen: true,
 styleHtmlContent:true,
 html:'Hello, Sencha Touch!!'
 });
 }
 });

これだけです。なるべくよけいな物を排除しました。ポイントはExt.setup()とその引数のオブジェクトです。複雑なアプリを作る場合でも、このサンプルのような処理を必ず行います。

Ext.setup()でアプリの起動時の動作を定義します。引数にアプリの基本設定をオブジェクトの形式で渡します。(オブジェクトリテラル)


 Ext.setup(
 {
 //オブジェクトリテラル
 }
 );

Ext JSおよびSencha Touchではこのオブジェクトでコンポーネントの基本設定を記述する方法をよく取ります。

引数に渡されているオブジェクトはこんな感じです。


 {
 onReady: function() {
 //起動の処理
 }
 }

onReadyというプロパティに関数をセットしています。この関数がSencha Touchアプリの起動ポイントになります。複雑なアプリでも基本的にこのonReadyに設定されている部分から処理が始まっていきます。

さらに、その処理の中身をみると、以下のようになっています。


 var panel = new Ext.Panel({
 fullscreen: true,
 styleHtmlContent:true,
 html:'Hello, Sencha Touch!!'
 });

panelという変数で新しいExt.Panelを作成しています。このパネルの引数にもパネルの初期設定がオブジェクトが渡されています。
ここで今回のサンプルの基本となるパネルを作成します。Sencha Touchでは様々なパネルが用意さていますが、このサンプルでは最も基本的なExt.Panelクラスのパネルを作成しています。
Ext.Panelクラスにはコンフィグオプションと呼ばれるもので作成するパネルを定義することができます。new Ext.Panel()の引数に渡されてるオブジェクトの中身が今回作成するExt.Panelのコンフィグオプション設定になります。
コンフィグオプションはクラスごとにあらかじめ定義されている、
特別なオプションのことでAPIリファレンスを見るとどのクラスがどんなコンフィグオプションを持っているかが分かります。

http://www.sencha.com/deploy/touch/docs/?class=Ext.Panel
今回のサンプルではfullscreen,styleHtmlContent,htmlの３つだけを使っています。

・fullscreen:boolean パネルのwidthとheightを可能であれば100%に設定する。初期値false。これをtrueにするとmonitorOrientationのコンフィグが強制的にtrueに設定されるそうです。

・styleHtmlContent:多分boolean(APIリファセンス間違ってる) 自動的にHTMLコンテンツ用のスタイルを適応します。初期値はfalse。これをtrueにするとSencha Touchで定義されているパネルないHTMLコンテンツ用のスタイルを設定します。パネルの内容がコンポーネント等でなくHTMLの時はtrueにしておくと良いようです。具体的には以下のCSSがパネルのHTML要素に設定されます。

-webkit-user-select: auto;
color: #333;
font-size: 0.8em;
line-height: 1.5;
padding: 1.5em;

・html:パネル内のHTMLコンテンツを設定。パネルがレンダリングされた後にこのHTMLが描画されます。

以上がHello, Worldサンプルのためのすべてのコードになります。
jsdo.it上であればHTMLファイルの方を記述する必要がないので、javascriptを10行書いて、Sencha Touchのライブラリ(jsとcss)を追加すればおしまいです。

・実行結果

Hello,Worldにツールバーを追加するサンプル

Hello, World + tbar – jsdo.it – share JavaScript, HTML5 and CSS

・HTML
同じ

・Javascript


Ext.setup({
onReady: function() {
//dockするアイテム
var tbar = new Ext.Toolbar({
dock:'top',　//dockする場所,
title:'Hello, World',　//Toolbarの見出し
items:[
{
text:'ボタン'
}
]
});

//Dock先
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:tbar,　//ここでtbarをdockedItemsに設定。
html:'Hello, Sencha Touch!!'
});
}
});

つぎにHello,Worldにツールバーを追加します。Ext JSではtbarというコンフィグオプションで設定していました。Sencha TouchではdockeItemsというコンフィグで設定します。
APIリファレンスによると
dockedItems:このパネルにドックされるコンポーネントまたはコンポーネントのまとまり(配列)
となっています。
コンポーネントであればなんでも設置できそうです。ここにExt.Toolbarオブジェクトを渡すことでiPhoneぽいUIのツールバーをパネルに追加できます。
まずExt.Toolbarを作成します。


//dockするアイテム
var tbar = new Ext.Toolbar({
dock:'top',　//dockする場所,
title:'Hello, World',　//Toolbarの見出し
items:[
{
text:'ボタン'
}
]
});

Ext.Toolbarにも様々なコンフィグオプションがあります。詳しくはAPIリファレンスで確認してください。ここではdock,title,itemsの3つを設定します。
http://www.sencha.com/deploy/touch/docs/?class=Ext.Toolbar

・dock：String(ドックさせる場所)。APIリファレンスに載っていませんが、親パネルのどの位置に自分を設置するかを指定します。選べる位置は4種類,top,bottom,left,rightです。
・title：String このツールバーの見出しのテキストを設定します。
・items：Object/Array　このツールバーの子の要素を設定します。

今回のサンプルではExt.Toolbarのitemsにnew したクラスでなくオブジェクトを渡しています。今のところはサンプルのように書けばボタンが作れると思っておいてよいです。そのうちブログでも取り上げるかもしれません。defaultsコンフィグとxtypeでボタンを生成しています。こちらの記事を参考にしていただけるよいかもしれません。
http://extjs.blog.sus4.co.jp/2009/11/11/extjs-tutorial5/

これでExt.Toolbarがtbarという変数で作成できたので、これをパネルのdockedItemsに設定します。


//Dock先
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:tbar,　//ここでtbarをdockedItemsに設定。
html:'Hello, Sencha Touch!!'
});

・実行結果

ツールバーがあるだけで、iPhoneアプリっぽくなりました。
Sencha Touchアプリの基本は今回のHello, Worldになります。これを改造していくことでより複雑なアプリが作れるようになります。Sencha Touch付属のexamplesの中を眺めてみるとよいかもしれません。

Sencha Touch 入門:Sencha Touchのはじめかた（Ext JS & Sencha Touch勉強会7月＠東京）のサンプルコード

佐竹裕行 — Tue, 27 Jul 2010 12:27:19 +0000

2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4　佐竹の担当箇所のSencha Touch入門篇で使うサンプルコードをjsdo.itで公開しました。
明日の勉強会では、PCのブラウザでも動作するサンプルばかりですので、jsdo.it上でも動作を確認できます。
また簡単なサンプルばかりですので、forkしていただいて実際に手を動かしてももらうとより理解が深まると思います。
勉強会では持ち時間的に２,３つしか紹介できないと思います。
勉強会のアジェンダはこちらです。

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

Sencha Touchのはじめかたサンプルコード

Sencha Hello, World!
Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Hello, World! + tbar

Hello, World + tbar – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Touch Complex Docked Items
Sencha Touch Complex Docked Items – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Carousel (Edit)

Sencha Carousel (Edit) – jsdo.it – share JavaScript, HTML5 and CSS

Ext JS +JQTouch = Sencha Touch!!

佐竹裕行 — Fri, 18 Jun 2010 04:02:11 +0000

先日の会社名変更の衝撃からまだそんなに日がたっていませんが。早くもSencha.comからSenchaブランドのプロダクト第一弾が公開されました。

ExtJSとJQTouchを組み合わせたようなモバイルWebアプリ開発フレームワークです。

Sencha – Sencha Touch Overview – HTML5 Mobile App Framework.

タイトルにもあるようにHTML5の機能をふんだんに使用しています。ExtJSがIE6から動くマルチプラットフォームが一つの売りだったためHTML5の機能を入れられないんじゃなと思っていました。

モバイル機器専用として割り切ることでHTML5に対応させたExtJSとも考えられます。

将来的にHTML5の機能はExtJSに組み込まれんだろうと思います。

サンプルも沢山用意されているので、一度iPhoneやiPadで試してみるとよいかもしれません。

iPhone 3G,3GSで試すと3GSはなかなかの使用感ですが、3Gだとピッカー系のUIやフォームの動きがあやしいかんじです。メモリとCPUが結構必要な感じです。

Androidはまだ改善中とのことです。UIの制御でバグっぽい箇所がいくつかありました。スライドさせるUIが全体的に不安定な気がします。

現在のところまともに使えそうなのはiPadとiPhone 3GSですね。

実際サンプルのソースコードを見ると、Ext.～が使われて安心しました。Sencha.get()だったらどうしようと心配してましたがExtで使えるようです。

サンプルのソースコードを見ると、Extと同じ書き方がされているのが分かります。ExtJSの開発者はスムーズにSencha Touchに移行できそうです。APIドキュメントも慣れ親しんだExtJS APIドキュメントと同じようなものが用意されているので全体を眺めてみるとExtJSとの違いが分かります。videoやaudioといったHTML5っぽいクラスが追加されています。

ただこのSencha TouchドキュメントはiPadではまともに動きません。Sencha TouchドキュメントはExt JSで書かれているということなんだと思います。APIドキュメントがiPadで見れると実用は別にして、なんとなくうれしい気がするので期待しています。

あとはCANVASが使えれば、携帯ゲームを作ることも簡単になるかもしれません。

Sencha Touchは既存のモバイル向けJavascriptライブラリとは違いフレームワークです。雰囲気でいえばApple のDashcodeのようにモバイルアプリケーションを作るのに近いといえます。JQTouchを含め既存のJSのCocoa Touch風UIライブラリではUIのみしか提供されませんでしたが、Sencha TouchではモデルやAjax処理も内包しています。そのためより高度なモバイル向けWebアプリを作ることが可能になりそうです。

またいわゆるハイブリッドアプリケーションの形式を取れば、iPhone Appとして開発してAppstoreへの申請も可能かもしれません。

最近AppleのiPhone AppではFlashやC#など開発言語の締め出しがおこなわれましたが、Javascript + HTMLは現状OKです。またAppleのDashcodeがある以上Javascriptが禁止されることはまずないと思います。

色々期待はしますが、まだベータ版といった感じなので遊びで色々やってみるのも面白いかもしれません。Ext JSを開発してれば、簡単なアプリをすぐ作れてしまうんじゃないかなと思います。

追記：Vimeoにビデオも上がってました。

Sencha Touch Introduction from Sencha on Vimeo.

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入門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入門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レイアウトのフォーム

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


        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入門33 Columnレイアウトのフォーム

佐竹裕行 — Fri, 14 May 2010 03:50:49 +0000

フォームのレイアウトについてフォームパネルのではデフォルトで’form’レイアウトが設定されています。’form’レイアウトでは、fieldLabelを表示するなどフォームフィールドを設置に最適なレイアウトを提供してくれます。しかし複雑なフォームの配置ができません。フォームパネルのレイアウトコンフィグを変更することでより自由なレイアウトでフィールドを配置する方法を紹介します。
今回はcolumnレイアウトの紹介です。

Columnレイアウトのフォーム

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

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

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

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

HTML:





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

    
    
    
    

    
    
    
    


    
        

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

        

        Java Script：form-layout.js

Java Script:


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

実行結果:

Columnレイアウトのフォーム

まずcolumnレイアウトの紹介です。カラムレイアウトでは列表示を指定できます。itemsに配置するコンポーネントにcolumnWidthで幅の占有率を指定します。（0～1.0）。
これでフィールドをカラムの表示にできます。しかしカラムレイアウトの直下のitemsにフィールドを置いた場合、fieldLabel等が生成されません。fieldLabelを表示するためにはformレイアウトの中にフィールドを設置する必要があります。
そこで、columnレイアウトの直下のコンポーネントはfieldsetに設定してfieldsetのレイアウトをformにすることで,formレイアウト内にフィールドを配置することで解消できます。サンプルコードではフォームパネルの直下にfieldsetを9個設置してそれぞれ1～2個のフィールドを置いています。
構造だけを抜き出すとこんな感じになります。


new Ext.form.FormPanel({
       ・・・
        layout:'column',
        defaults:{
            columnWidth:.5,
            xtype:'fieldset',
            defaults:{
			・・・
            }
        },
        items:[
            {
                xtype:'displayfield',
                columnWidth:.9
            },
            {
				//filedset1
            },
            {
				//filedset2
            },
            {
				//filedset3
            },
            {
				//filedset4
            },
            {
				//filedset5
            },
            {
				//filedset6
            },
            {
				//filedset7
            {
                title:'左のセット',
				//filedset8
            },
            {
                title:'右のセット',
				//filedset9
        ]
		・・・
});

それぞれのfieldset内に実際の入力フィールドがあります。そしてcolumnWidthもフィールドではなくfieldsetに記述している点に注意してください。

fieldsetのオプションはほとんど同じなので,defaultsで設定を記述しています。defaultsの中のdefaultsはfieldset内のフィールドの初期値の設定です。
defaultsとdefaultsの中のdefaultsでフォーム内大まかなコンフィグを決めておくとコードが見やすくなります。


	defaults:{
            columnWidth:.5,
            border:false,
            xtype:'fieldset',
            labelAlign:'top',
            defaults:{
                xtype:'textfield',
                emptyText:'入力してください',   //空のときのテキスト
                anchor:'90%',
                msgTarget:'under',   //入力に誤りがある場合はフィールドの下に表示
                allowBlank:false,
                columnWidth:.3
            }
        },

フィールドセットはフィールドをまとめるコンテナで、パネルのように動作してくれます。Ext.form.FieldSetクラスは
Observable > Component > BoxComponent > Container > Panel > FieldSet
というようにパネルを継承しています。そのためExt.Panelで使えるレイアウト関連のオプションが使えるわけです(collapsibleなど)。
フィールドセットのデフォルトのlayoutはformに設定されています。そのためフィールドに配置したフィールドはformレイアウトで表示されます。そのためlayoutを指定しない場合は縦に並べて表示されます。(テキストフィールド8、9、10、11の部分)
サンプルコードは少し複雑ですがフィールドセットのベーシックな使い方をしているのがテキストフィールド8、9、10、11の部分になります。


			//defaultsで大まかなオプションは決めてある
			{
                title:'左のセット',
                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'
                    }
                ]
            }

今回の場合は
FormPanel
→fieldset
→→field
→fieldset
→→field
・・・
という構造になっています。このフォームの場合、値の取得や初期値のセットを再帰的に行わないといけない感じがしますが、フィールドセットにラップされているフィールドはFormPanelのgetFrom()メソッドできちんと取得されます。フォームの値の取得やセットのときはラップされていることを特に意識することなく実行できます。すごく便利ですね。

今回はカラムレイアウトの紹介でした。次回は別のレイアウトを紹介しようと思います。

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

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

7月のExt JS勉強会（東京）「Sencha Touchのはじめかた 」まとめ

Sencha Touch 入門:Sencha Touchのはじめかた（Ext JS & Sencha Touch勉強会7月＠東京）のサンプルコード

Ext JS +JQTouch = Sencha Touch!!

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

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

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

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

ExtJS入門34 ComboBoxの基本

ExtJS入門33 Columnレイアウトのフォーム

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

7月のExt JS勉強会（東京）「Sencha Touchのはじめかた　」まとめ

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

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