ExtJSのフォームウィジェットとサブミットの方法
以前のエントリにExtJSのサブミットの方法を試行錯誤してやってみたというものがありましたが、完全に的をはずしていたので改めてポストします。ページからページへ情報を渡すためにフォームタグにテキストエリアとか、ボタンとか色々配置して表現したりしますが、ExtJSのウィジェットでフォームパネル( Ext.form.FormPanel )というものを持っていますので、こいつを使ってみます。 examples\form にサブミット（アクション）のサンプルが無いってのはどうよ？とは思いますが、ちゃんと隅から隅まで見てません。誰かに「あるよー」なんて言われたら恥の上塗りなので、ごちゃごちゃ言わずに説明してみます。
前回説明したのは、リッチテキストのサブミットですが、フィールドをどう表現するのかは xtype で決まっているみたいだと書きました。以下は xtype のリストです。Form components を見ていただくとフォームフィールドとして簡単に表現できるコンポーネントがたくさんあります。頑張れば grid （の中身）もポストできるってのはすごいですよね。エクセルシートみたいなフォームをポスト出来たりしたらウェブのフォームと言うかほとんどデスクトップアプリケーションですね。
xtype Class ------------- ------------------ box Ext.BoxComponent button Ext.Button colorpalette Ext.ColorPalette component Ext.Component container Ext.Container cycle Ext.CycleButton dataview Ext.DataView datepicker Ext.DatePicker editor Ext.Editor editorgrid Ext.grid.EditorGridPanel grid Ext.grid.GridPanel paging Ext.PagingToolbar panel Ext.Panel progress Ext.ProgressBar splitbutton Ext.SplitButton tabpanel Ext.TabPanel treepanel Ext.tree.TreePanel viewport Ext.ViewPort window Ext.Window Toolbar components --------------------------------------- toolbar Ext.Toolbar tbbutton Ext.Toolbar.Button tbfill Ext.Toolbar.Fill tbitem Ext.Toolbar.Item tbseparator Ext.Toolbar.Separator tbspacer Ext.Toolbar.Spacer tbsplit Ext.Toolbar.SplitButton tbtext Ext.Toolbar.TextItem Form components --------------------------------------- form Ext.FormPanel checkbox Ext.form.Checkbox combo Ext.form.ComboBox datefield Ext.form.DateField field Ext.form.Field fieldset Ext.form.FieldSet hidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor numberfield Ext.form.NumberField radio Ext.form.Radio textarea Ext.form.TextArea textfield Ext.form.TextField timefield Ext.form.TimeField trigger Ext.form.TriggerFieldサブミットするときに必要になるのは、送信先の URL と送信するフィールド（名）とボタンになります。（実装に依存します）この3つをソースで見ていきたいと思います。
まず、フォームは Ext.FormPanel で作って、
送信先URLは
url:'hoge.php'で指定してあげます。
フィールド名は
name:'field1'で決まります。ポスト先はこのフィールド名で値をもらうことになります。
PHPだと$_POST[ "field1" ];こんな感じです。
最後にボタンに割り当てるのがハンドラです。以前はアクションを割り当てたらできたよーみたいなことを書きました。もちろんアクションでも出来ますが、非同期で値を渡したい場合は以下のようなハンドラをボタンに割り当てるといいみたいです。
handler:function() {
myForm.getForm().submit({
success:function( form, action ) {},
failure:function( form, action ) {}
});
}
myForm は FormPanel のインスタンスです。 getForm() で BasicForm を返すのでそいつの submit() を使うことになります。このハンドラをボタンに割り当ててあげます。
buttons: [{
text: '送信', handler:function() {
myForm.getForm().submit({
success:function(form, action) {},
failure:function(form, action) {}
});
}
}]
フォームとサブミットのサンプルソースは以下になります。
Ext.onReady( function(){
var myForm = new Ext.FormPanel({
url:'hoge.php',
labelWidth: 75,
frame:true,
title: 'テストフォーム',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: { width: 230 },
// デフォルトのフィールドを textfield とします
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:true
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
},{
fieldLabel: 'Email',
name: 'email',
// vtype:'email'でメールのバリデーションチェックがかかるようです。
vtype:'email'
}
],
buttons: [{
text: '送信',handler:function() {
myForm.getForm().submit({
success:function( form, action ) {
// echo print_r($_POST, 1); on hoge.php
// ポストしたパラメータと値を見れます。
alert( action.response.responseText );
},
failure:function( form, action ) {
// emailのバリデーションチェックで送信できない場合
// hostに送信できない場合なんかはこっちにきます
alert( action.failureType );
}
});
}
}]
});
myForm.render( document.body );
});
[ 最近のエントリーとその関連エントリー ]
[ スポンサードリンク ]
| パーマリンク
| コメント (0)
| トラックバック (0)
