確認画面、プレビュー画面の作り方

[tomof]

ウインドウ上のフォームに値を入力し、値を送信する直前の確認／プレビュー画面を作成したいと考えています。
現在考えているのは確認ボタンを押すと、


textfieldの入力値　⇒　textfieldを隠して(hide?)、同じ場所に入力値の文字列を表示。
gridテーブルのチェック　⇒　gridテーブルを隠して(hide?)、同じ場所にチェックされた項目のみを表示したgridテーブルを表示。

となるような方法です。
お聞きしたいのは、もし存在するならばなんですが、


1.もしあればなんですが、もっと効率の良い方法
2.同じく、もしあればならばなんですが、確認／プレビュー画面のサンプルやプラグイン
3.まだ、applyToを使ったことが無いのですが、こういった処理の場合は使用した方が賢明でしょうか？

よろしくお願いします。

[yuki]

ウインドウ上のフォームに値を入力し、値を送信する直前の確認／プレビュー画面を作成したいと考えています。
現在考えているのは確認ボタンを押すと、

textfieldの入力値　⇒　textfieldを隠して(hide?)、同じ場所に入力値の文字列を表示。
gridテーブルのチェック　⇒　gridテーブルを隠して(hide?)、同じ場所にチェックされた項目のみを表示したgridテーブルを表示。

となるような方法です。
お聞きしたいのは、もし存在するならばなんですが、

1.もしあればなんですが、もっと効率の良い方法

個人的には、よほどの必要がない限り確認画面の類は用意せずに間違った入力をした場合気軽に修正できるように設計しておくというのが好みなのですが、当然どうしても必要な場面もあるとは思うので、その場合は、ユーザーの注意を引く必要があるので、できれば入力画面とは違いますよ、確認してくださいよ、というメッセージが伝わるようなものがいいのではと考えるのですが、いかがでしょうか？（このあたりは素人なもので:)）

なので、僕がやるとすれば、サーバーに送るデータをXTemplateを使って、確認しやすくて同時に注意を引くようなプレゼンテーションの別Windowを表示する、と思います（言うは易しですが・・・）（単純なPanelにXTemplateであれば処理もコードも複雑にならなそうでし）



2.同じく、もしあればならばなんですが、確認／プレビュー画面のサンプルやプラグイン
3.まだ、applyToを使ったことが無いのですが、こういった処理の場合は使用した方が賢明でしょうか？

applyToをどう使いたいのでしょうか？

[tomof]

個人的には、よほどの必要がない限り確認画面の類は用意せずに間違った入力をした場合気軽に修正できるように設計しておくというのが好みなのですが、当然どうしても必要な場面もあるとは思うので、その場合は、ユーザーの注意を引く必要があるので、できれば入力画面とは違いますよ、確認してくださいよ、というメッセージが伝わるようなものがいいのではと考えるのですが、いかがでしょうか？（このあたりは素人なもので:)）


個人的にそうしたいのですが、チェックボックスがずらっと並んで、安易に変更をされたくない重要な入力になりますので、どうしても必要なんですよね。Ext.jsってどちらかというとVBやC#のようなデスクトップアプリケーションの思想なので、確認画面とういのは本来想定されてないと思いますが…。



なので、僕がやるとすれば、サーバーに送るデータをXTemplateを使って、確認しやすくて同時に注意を引くようなプレゼンテーションの別Windowを表示する、と思います（言うは易しですが・・・）（単純なPanelにXTemplateであれば処理もコードも複雑にならなそうでし）


XTemplateはドキュメントによると「XTemplate.from」というメソッドがあり、「過去のエレメントvalue値からテンプレートを生成する」とありますが、value値というのはformのvalue値のことでしょうか？これを利用すれば、入力欄(入力フォーム)→ただのテキスト(確認画面)という流れが実装できますでしょうか？



applyToをどう使いたいのでしょうか？

applyToについてはExt.jsが良くわかっていないために書いてしまった不要な質問でした。勉強不足で本当にすみません:((

[yuki]

XTemplateはドキュメントによると「XTemplate.from」というメソッドがあり、「過去のエレメントvalue値からテンプレートを生成する」とありますが、value値というのはformのvalue値のことでしょうか？これを利用すれば、入力欄(入力フォーム)→ただのテキスト(確認画面)という流れが実装できますでしょうか？

XTemplate.fromは分かりにくいのですが、コンストラクタだと思ってもらえばいいかと思います。displau:noneに設定したtextareaタグの中（=value）にテンプレートを隠しておけば、XTemplateのインスタンスが作れるよというだけのメソッドです。

XTemplateはいわゆるテンプレートエンジンみたいなものなので、表示のためのHTMLのテンプレート（と必要に応じてCSSも）を用意しておいて、そこにフォームの値を流し込むイメージです。ループ処理もできるので、グリッドのデータを扱うには適しているのではないかと（サーバーに送るデータ→XTemplateに流し込み→生成されたHTMLを表示という流れです）。

別のスレッドで紹介しているサンプル (http://extjssamples-jp.googlecode.com/svn/trunk/tree/extuxjsonptreeloaderdemo.html)ですが、ここでもXTemplateを利用しています（右側に表示される詳細情報部分）。

[tomof]

yukiさん、毎回アドバイスありがとうございます。
XTempalteを使って作成してみますので、結果についてまた報告させていただきます。

[tomof]

報告が遅くなりましが。その後の対応についてソース例を記しておきます。
手順としては以下のような感じです。

1.入力のフォームパネルと、確認用のパネルを予め用意。確認用はhidden:trueをセットして非表示に。
2.Panelのhtmlコンフィグオプションに<div id="target"></div>をセットしておく。
3.確認画面へ移るボタンを押されたら、入力フォームをhide、確認パネルをshow。
4.下記のように値を取得して、確認パネルに入力した値を描写。




Ext.DomHelper.overwrite('target', '<p>' + "確認メッセージ" + '</p>');
Ext.DomHelper.append('target', '<p>Name : ' + hogeForm.getForm().getValues().name + '</p>');
Ext.DomHelper.append('target', '<p>Describe : ' + hogeForm.getForm().getValues().desc + '</p>');
ただし、この例だと見た目に何のひねりもないので、Xtemplateでレイアウトを整えるのがよさそうですね。