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

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

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の記事

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入門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入門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入門32　フォームパネルとフィールド(基本編)

佐竹裕行 — Thu, 13 May 2010 04:26:46 +0000

今回からExtJSのフォームに関するサンプルコードを紹介していきます。フォームに関しては以前簡単なサンプルを紹介しているので、まずは以前紹介した基本的なフォームの修正版からはじめてみたいと思います。

フォームパネルと基本的なフィールド

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

ExtJS入門　ExtJSのフォームについて（基本編）

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

HTML:





    
    ExtJS名古屋勉強会　フォーム　その1

    
    
    
    

    
    
    
    


    
        

            Extのフォームフィールドについて
        
        
        

        
        

        Java Script：form-exsample.js

Java Script:


//フォームの簡単な紹介
Ext.onReady(function()
{
    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,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        items:[
            {
                xtype:'textfield',
                name:'samplefield1',
                fieldLabel:'テキストフィールド1',
                emptyText:'入力してください',   //空のときのテキスト
                anchor:'90%'
            },
            {
                xtype:'textfield',
                name:'samplefield2',
                fieldLabel:'テキストフィールド2(必須項目)',
                emptyText:'入力してください',
                allowBlank:false,   //このフィールドを必須項目にします
                anchor:'90%',
                msgTarget:'under'   //入力に誤りがある場合はフィールドの下に表示
            },
            {
                xtype:'displayfield',
                name:'samplefield3',
                fieldLabel:'ディスプレイフィールド',
                value:'表示だけのフィールドです。',
                anchor:'90%'
            },
            new Ext.form.NumberField({
                name:'samplefield4',
                fieldLabel:'ナンバーフィールド',
                allowDecimals:false,    //小数点を入力できないようにします
                anchor:'90%'

            }),
            {
                xtype:'textfield',
                name:'samplefield5',
                fieldLabel:'Emailフィールド',
                emptyText:'入力してください',
                anchor:'90%',
                vtype:'email',  //vtypeコンフィグでバリデーションが設定
                msgTarget:'under'
            },
            {
                xtype:'datefield',
                name:'samplefield6',
                fieldLabel:'日付フィールド',
                emptyText:'入力してください',
                width:100,
                msgTarget:'side'
            }
        ],
        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
                    });
                }
            }
        ]
    });

    //msgTargetにqtipを設定した場合はクイックティップスを起動しないといけない
    Ext.QuickTips.init();

    var form2 = new Ext.form.FormPanel({
        renderTo:'form2',
        title:'フォーム　その２',
        height:280,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する

        defaults:{
            xtype:'textfield',  //デフォルトを設定する
            //msgTarget:'qtip',    //フィールドのmsgTargtの初期値はqtipです。
            allowBlank:false,   //このフィールドを必須項目にします
            anchor:'90%',
            emptyText:'入力してください'   //空のときのテキスト
        },
        items:[
            {
                name:'form2-field1',
                fieldLabel:'テキストフィールド1',
                value:'初期のテキスト'
            },
            {
                name:'form2-field2',
                fieldLabel:'テキストフィールド2(必須項目)'
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'リセット',
                iconCls:'reset',
                handler:function(){
                    var formFields = form2.getForm();
                    formFields.reset();
                }
            },
            {
                text:'決定',
                formBind:true,
                iconCls:'tick',
                handler:function(){
                    //値の取り出し

                    //フォームパネルからフィールドを取得
                    var formFields = form2.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
                    });
                }
            }
        ]
    });
});

実行結果:

フォームパネルと基本的なフィールド

以前紹介した基本的なフォームに少し修正を加えたサンプルコードになります。
上のフォームは前回とほとんど同じです。変更点はフォームの妥当性チェックと送信ボタンを連動させています。
フォームパネルでmonitorValidをtrueに設定し、buttonsの中で連動させたいものにformBinde:trueを設定します。


    var form = new Ext.form.FormPanel({
		・・・
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        items:[],
		・・・
		buttons[
			{
				・・・
				formBine:true,
				・・・
			}
		]
	});

monitorValidを有効にすると、定期的に現在の妥当性の状況を確認してボタンを有効/無効に切り替えます。(monitorValidが有効なときフォームパネルは定期的にcllientValidationイベント実行します。)
monitorValid + formBindを設定すると、フォームパネル中に含まれる全てのフォームの妥当性チェックを正しく通過しない限り、ボタンを無効にできるので非常に便利です。
上側のフォームの以前のサンプルコードからの変更以上です。

次に下側のフォームです。こちらのフォームでは2つのテキストフィールドをフォームパネルに設置しています。
フォームパネルでは、普通は複数のフォームを設定します。defaultsコンフィグにフィールドの共通設定を記述しておくと毎回繰り返す必要がなくなります。


 defaults:{
            xtype:'textfield',  //デフォルトを設定する
            //msgTarget:'qtip',    //フィールドのmsgTargtの初期値はqtipです。
            allowBlank:false,   //このフィールドを必須項目にします
            anchor:'90%',
            emptyText:'入力してください'   //空のときのテキスト
        },

msgTargetをデフォルトの”qtip”のままにして、エラーメッセージをクイックティップスで表示します。クイックティップスで表示する場合はExt.QuickTip.init()を実行して、アプリ全体のクイックティップスを初期化しておく必要があります。


  //msgTargetにqtipを設定した場合はクイックティップスを起動しないといけない
    Ext.QuickTips.init();

下側のフォームでもmonitorValid + formBindを有効にしています。さらにもう一つボタンを設置してフォームの入力内容をリセットしています。リセットボタンのハンドラでBasicForm のreset()メソッドでフィールドをリセットしています


        items:[
            {
                name:'form2-field1',
                fieldLabel:'テキストフィールド1',
				value:'初期テキスト'
            },
            {
                name:'form2-field2',
                fieldLabel:'テキストフィールド2(必須項目)'
            }
        ],
         buttons[
			{
                text:'リセット',
                iconCls:'reset',
                handler:function(){
                    var formFields = form2.getForm();
                    formFields.reset();
                }
			},
			・・・
		]

ここでは注意が必要で、2つのテキストフィールドのうち上側には初期値を設定しています。reset()メソッドでは、フォームを空にするのではなく、フォームの初期の状態に戻すという点です。そのため初期値が設定されている、上のフィールドではフィールドが空になるのではなくvalueに設定されている初期値に戻ります。

以上の2つのフォームの基本形です。複雑なフォームも今回のサンプルの発展形です。次回からはもう少し複雑なフォームを紹介します。

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

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

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

DataViewのホバリング設定

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

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

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

HTML:





    
    ExtJS名古屋勉強会　Twitter API DataView

    
    
    
    

    
    
    


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

        
        

        Java Script：dataview-twitter2.js

        Twitter API：Twitter Search API Method: search

Java Script:


Ext.onReady(function(){

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

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

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

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

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

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

実行結果:

Twitter Data View改

DataViewのホバリング設定

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

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


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

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

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

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

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

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

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

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

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

ExtJS入門34 ComboBoxの基本

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

ExtJS入門32 フォームパネルとフィールド(基本編)

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

{from_user}:{1}

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

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

ExtJS入門32　フォームパネルとフィールド(基本編)

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