ExtJSのexamplesディレクトリに入ってるdynamic.htmlのフォームインターフェイスがかっこいいなぁと思って使いたかったんですが、このsaveボタン押下時にpostやgetでページ遷移するにはどうすればよいのかよくわからなかったので調べてみました。
フォームの使い方はこっちのが本筋のようです。20080323
たぶんドキュメントにちゃんと書いてあるんだと思いますが、パタパタとコーディングしながらfirebugを使ってあーでもないこーでもないをやってたらできました。
Ext.Actionインスタンスを作ってsaveボタンに割り当ててあげればよいらしく、ページ遷移はdocument.formname.submit()を使っています。もちろん本来のやり方ではないかもしれません。動けばいいやと思ってやってみました。
＜アクションを作る＞
var action = new Ext.Action({
text: '送信',
handler: function(){
document.getElementById( "hiddentextarea" ).innerHTML = Ext.get( 'extform' ).getValue();
document.formname.action = "/hogehoge/mogemoge.php";
document.formname.method = "post";
document.formname.submit();
}
});
これだけだと何をしているのか判りにくいんですが、Ext.get( ‘extform’ ).getValue()というのは、リッチテキストフォームからユーザが書いた文字を取得しています。
それをスタイルで隠した(style=”display:none”)フォームのテキストエリアであるhiddentextareaに渡して/hogehoge/mogemoge.phpにpostで渡すというものです。
ExtJSで表現されるリッチテキストフォームはこんな感じ。xtypeがhtmleditorと言うところでどんなコンポーネントなのか決まるみたいですね。
＜リッチテキストフォームを作る＞
var top = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'タイトル',
bodyStyle:'padding:5px 5px 0',
items: [{
xtype:'htmleditor',
id:'extform',
fieldLabel:'',
anchor:'100%'
}],
buttons: [ new Ext.Button( action ) ]
});
で、buttonsに割り当てられるのが先ほど作ったactionというインスタンスです。ボタンが押下されると、フォームに入力された内容がポストされると言う仕組みです。formnameとhiddentextareaが解決されていませんので、以下に記述しておきます。
＜hiddenフォームを作る＞
<div style="display:none"> <form name="formname" method="post"> <textarea id="hiddentextarea" name="hiddentextarea"></textarea> </form> </div>
スタイルで表示を抑制したフォームテキストエリアにスクリプトで入力値を与えてあげて、スクリプトでサブミットする感じです。
＜サンプル＞
<script type="text/javascript">
var action = new Ext.Action({
text: '送信',
handler: function(){
document.getElementById( "hiddentextarea" ).innerText = Ext.get( 'extform' ).getValue();
document.formname.action = "/hogehoge/mogemoge.php";
document.formname.method = "post";
document.formname.submit();
}
});
var top = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'タイトル',
bodyStyle:'padding:5px 5px 0',
items: [{
xtype:'htmleditor',
id:'extform',
fieldLabel:'',
anchor:'100%'
}],
buttons: [ new Ext.Button( action ) ]
});
top.render( document.body );
</script>
<body>
<div style="display:none">
<form name="extform" method="post">
<textarea id="hiddentextarea" name="hiddentextarea"></textarea>
</form>
</div>
</body>
最近ExtJSにはまっているので、他のコンポーネントについてもそのうちポストしたいと思います。
