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

0.95のハマリどころ

野村亮之 — Sun, 19 Sep 2010 09:56:33 +0000

0.93から０.９５にアップデートした際に、動かなかったところをメモ。

itemsに直接オブジェクトを書くと、レンダーしてくれない（泣。0.93までしてくれていて便利だったのに。１つのComponentを仕込むだけでも、配列で書きましょう。
Ext.platform消滅。Ext.is.xxxで判断するように、サンプルの方は書き直されていました。
NestedListがStoreを使うようになったみたい（これは聞いただけなので、自分自身ではまったところではない）。

itemsのところだけが、見つけるのが大変でしたが、あとはエラーを吐いてくれるので、Touch本体のソースを見ながら修正しました。
いやー、まだまだ仕様変わりそうだなぁ。

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 入門: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

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アプリを見るとレイアウトがかなり崩れています。
よい方法を見つけられた方は是非教えてください。

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入門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で楽しくRIA業務アプリ開発 » JavaScript

0.95のハマリどころ

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

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

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

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

Carousel

Ext JS +JQTouch = Sencha Touch!!

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

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

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

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

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

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

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