1件のデータをExtJSで見せるには？

[integra]

いわゆる「詳細画面」や「確認画面」を表示する際のことです。

1件のレコードのラベルとデータをExtJSを使用して描画するというのを満たすために、

1.Ext.XTemplateでラベルとデータをHTML要素で書く。
2.Ext.form.FormPanelでオブジェクト作成する。（それぞれのアイテムはreadOnly）
のいずれかの方法でやっているのですが、

1.は、ExtJSのインターフェースとのギャップが激しいためかっこ悪い。
2.は、Formの見た目になるため、紛らわしい。
と問題がでています。

1件のレコードを画面上に描画する際、皆さんはどのようにされていますか？

皆さんのお知恵やご経験から、ぜひご意見を伺いたいと思います！

以下は1.の方法でやった場合のサンプルです。


var tpl = new Ext.XTemplate(
"<table>",
"<tr><th>顧客番号</th><td>{customertId}</td></tr>",
"<tr><th>顧客名</th><td>{customerName}</td></tr>",
"</table>"
);
var infoPanel = new Ext.Panel({frame: true});
var window = new Ext.Window({
title: '顧客情報',
modal: true,
width: 400,
items: [infoPanel]
});
window.show();
tpl.overwrite(infoPanel.body, data);
また、添付ファイルで簡単に動くものを用意しました。

[yuki]

1.Ext.XTemplateでラベルとデータをHTML要素で書く。
2.Ext.form.FormPanelでオブジェクト作成する。（それぞれのアイテムはreadOnly）


どっちかというと1のXTemplateを使ってHTMLで書くのではないでしょうか？（ExtのテーマにあうようにCSSを工夫するか、逆にExtのテーマを改造するか・・・）
ちょっと違うかもしれませんが、たとえば→http://extjs.com/deploy/dev/examples/view/chooser.html
(http://extjs.com/deploy/dev/examples/view/chooser.html)このコードでもXTemplateが使われています。

FormPanelでやるのであれば、紛らわしくないようにフィールドのCSSを改造するんですかね:-?

[djodjo]

XTemplateかFormPanelかだとすると
１．readonlyな場合以外に編集することもあるのであればFormPanelを流用
２．編集などないなら、Xtemplateできれいに並べる。

詳細画面をしょっちゅうみる必要があるなら、XTemplteつかって見せるのが
妥当かなと思います。

あと、デザインとか無視すれば、GridPanelを縦横入れ替えて表示させるってのはどうでしょうか？
項目｜値
名前｜ほげほげ
備考｜ほほほほほほ
って感じでどうでしょう。;)

[integra]

どっちかというと1のXTemplateを使ってHTMLで書くのではないでしょうか？（ExtのテーマにあうようにCSSを工夫するか、逆にExtのテーマを改造するか・・・）
FormPanelでやるのであれば、紛らわしくないようにフィールドのCSSを改造するんですかね:-?

XTemplateかFormPanelかだとすると
１．readonlyな場合以外に編集することもあるのであればFormPanelを流用
２．編集などないなら、Xtemplateできれいに並べる。

詳細画面をしょっちゅうみる必要があるなら、XTemplteつかって見せるのが
妥当かなと思います。


やっぱりXTemplateですよね・・・。
自由度が高すぎるのでデザインがめんどくさかったんです（笑
勇気が出たのでExtのテーマにそってCSS適応してみます。（汎用的に使えるような感じで。）
出来たらこのスレッドにもアップしてみますね。



あと、デザインとか無視すれば、GridPanelを縦横入れ替えて表示させるってのはどうでしょうか？
項目｜値
名前｜ほげほげ
備考｜ほほほほほほ
って感じでどうでしょう。;)

GridPanelを同じような用途で使用したことがあります！やっぱり思い付く方はいるんですね。
項目数が多いと縦に長くなってしまうため、見送りましたが、コーディングはわりと楽でした。。。

[froggugugugu]

私は参照と編集の実装を分けたくなかったので
TextFiledをReadOnlyにしたい派です。
編集不要な値とかを表示する際、枠があっても良いかな？
と思っていたんですが
たとえばDB上でのIDとかって編集不要ですし。枠は不要。
でもDBから取得してFormに流し込むことをほかの実装と同様にしたいので
TextFieldで実装したい。

で、悩んでました。

ちょうどプラグインについても？？だったので
djodjoさんのプラグイン解説で目からうろこを出して先ほど喜びました:D。
早速試してみました。

イメージはこんな感じなのはどうでしょうか？
//// スタイルシートここから////
//透過で、黒字で、線なし
.system-common-form-readonly
{
color:black;
background-color:transparent;
border-style:none;
}
//// スタイルシートここまで////


ほかのコントロールにも埋めこみたかたったので
プラグイン。
System.Common.Plugin.readOnly = function()
{
this.init=function( component )
{
if( component.readOnly )
{
component.addClass('system-common-form-readonly');
}
}
}

イメージ添付してみました。
画像のID：のぶぶんです。
テキストフィールドでReadOnlyをtrueにするとこんなかんじです。