コンポーネントのダイアログ内でこれらすべてを行うことについて話していると思います-
xtype が提供するすべての編集機能を提供せずに、ダイアログに画像を表示するだけの場合は、プロパティを次のように設定してラベル ウィジェットsmartimage
を使用できます。html
<img src="{your-thumbnail-image-path}" />
ここで、他のタブでロードした画像と一致させる必要があるため、最初のタブで画像を変更するたびに の htmlを更新するようsmartimage
に、 でリスナーを設定する必要があります。smartimage
label
すぐに使用できるダイアログ リスナーの例を確認するには、CRXDE Lite のリスト コンポーネントのダイアログを参照してください。
/libs/foundation/components/list/dialog/items/list/items/listFrom/listeners
あなたの場合、おそらくイベントをリッスンしたいと思うでしょう( API docsimagestate
の events セクションにあります)。
function(smartImg) {
var dialog = this.findParentByType('dialog'),
label = dialog.find('name', 'thumbnailPreviewLabel')[0];
label.update('<img src="' + smartImg.referencedFileInfo.dataPath + '.thumb.100.100.jpg" />');
}
ウィジェットthumbnailPreviewLabel
の name 属性はどこにありますか。label
この例では、dialog.xml でリスナーをインラインで定義するなど、いくつかのショートカットを使用しました (HTML 文字がエスケープされているため、これは少し見にくいです。別の JavaScript ファイルで関数を定義し、次のように使用することをお勧めします)。サムネール サーブレットが機能しなかったため、DAM レンディションへの raw パスを使用しました。
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
title="Image Thumbnail Preview"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<image
jcr:primaryType="cq:Widget"
cropParameter="./imageCrop"
ddGroups="[media]"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mapParameter="./imageMap"
name="./file"
requestSuffix=".img.png"
rotateParameter="./imageRotate"
title="Image"
xtype="html5smartimage">
<listeners
jcr:primaryType="nt:unstructured"
imagestate="function(smartImg) { this.findParentByType('dialog').find('name', 'thumbnailPreviewLabel')[0].update('<img src="' + smartImg.referencedFileInfo.dataPath + '/jcr:content/renditions/cq5dam.thumbnail.140.100.png" />'); }"/>
</image>
<preview
jcr:primaryType="cq:Widget"
anchor="100%"
title="Image Thumbnail Preview"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<thumbnail
jcr:primaryType="cq:Widget"
name="thumbnailPreviewLabel"
html=""
xtype="label"/>
</items>
</preview>
</items>
</items>
</jcr:root>