How to use smartimage or smartfile in compositefield? - extjs

Question

I would like to composite some fields (textField, URL and image). I read some tutorial about how to composite some elements with the
CQ.Ext.form.CompositeField widget.
my javascript looks like this CustomPathField.js:
/**
* #class VRBANKENPORTAL.CustomPathFieldWidget
* #extends CQ.form.CompositeField
* This is a custom path field with link text and target
* #param {Object} config the config object
*/
/**
* #class Ejst.CustomWidget
* #extends CQ.form.CompositeField
* This is a custom widget based on {#link CQ.form.CompositeField}.
* #constructor
* Creates a new CustomWidget.
* #param {Object} config The config object
*/
VRBANKENPORTAL.CustomPathFieldWidget = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* #private
* #type CQ.Ext.form.TextField
*/
hiddenField: null,
/**
* #private
* #type CQ.Ext.form.TextField
*/
linkText: null,
/**
* #private
* #type CQ.form.SmartImage
*/
smartImage: null,
/**
* #private
* #type CQ.Ext.form.TextField
*/
linkURL: null,
/**
* #private
* #type CQ.Ext.form.CheckBox
*/
openInNewWindow: null,
/**
* #private
* #type CQ.Ext.form.FormPanel
*/
formPanel: null,
constructor: function (config) {
config = config || {};
var defaults = {
"border": true,
"labelWidth": 75,
"layout": "form"
//"columns":6
};
config = CQ.Util.applyDefaults(config, defaults);
VRBANKENPORTAL.CustomPathFieldWidget.superclass.constructor.call(this, config);
},
//overriding CQ.Ext.Component#initComponent
initComponent: function () {
VRBANKENPORTAL.CustomPathFieldWidget.superclass.initComponent.call(this);
// Hidden field
this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);
// Link text
this.add(new CQ.Ext.form.Label({
cls: "customwidget-label",
text: "Link Text"
}));
this.linkText = new CQ.Ext.form.TextField({
cls: "customwidget-1",
fieldLabel: "Link Text: ",
maxLength: 80,
maxLengthText: "A maximum of 80 characters is allowed for the Link Text.",
allowBlank: true,
listeners: {
change: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.linkText);
// Link SmartImage
this.smartImage = new CQ.form.SmartImage({
cls: "customwidget-smartimage",
title: "Image",
allowUpload: true,
fileNameParameter: "./image/fileName",
fileReferenceParameter: "./image/fileReference",
height: 100,
mimeTypes: "*.jpg;*.jpeg;*.gif;*.png",
name: "./image/file",
fieldLabel: "Banner"
});
this.add(this.smartImage);
// Link URL
this.add(new CQ.Ext.form.Label({
cls: "customwidget-label",
text: "Überschrift"
}));
this.linkURL = new CQ.form.BrowseField({
cls: "customwidget-2",
fieldLabel: "URL: ",
allowBlank: false,
width: 225,
listeners: {
change: {
scope: this,
fn: this.updateHidden
},
dialogclose: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.linkURL);
// Link openInNewWindow
this.openInNewWindow = new CQ.Ext.form.Checkbox({
cls: "customwidget-3",
boxLabel: "New window",
listeners: {
change: {
scope: this,
fn: this.updateHidden
},
check: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.openInNewWindow);
},
processInit: function (path, record) {
this.linkText.processInit(path, record);
this.smartImage.processInit(path, record);
this.linkURL.processInit(path, record);
this.openInNewWindow.processInit(path, record);
},
setValue: function (value) {
var link = JSON.parse(value);
this.linkText.setValue(link.text);
this.smartImage.setValue(link.smartImage);
this.linkURL.setValue(link.url);
this.openInNewWindow.setValue(link.openInNewWindow);
this.hiddenField.setValue(value);
},
getValue: function () {
return this.getRawValue();
},
getRawValue: function () {
var link = {
"url": this.linkURL.getValue(),
"text": this.linkText.getValue(),
"smartImage": this.smartImage.getValue(),
"openInNewWindow": this.openInNewWindow.getValue()
};
return JSON.stringify(link);
},
updateHidden: function () {
this.hiddenField.setValue(this.getValue());
}
});
CQ.Ext.reg('mypathfield', VRBANKENPORTAL.CustomPathFieldWidget);
my Dialog.xml looks like this:
...
....
<items jcr:primaryType="cq:WidgetCollection">
<links
jcr:primaryType="cq:Widget"
fieldDescription="Press + to add more links"
fieldLabel="Links"
hideLabel="true"
name="./links"
width="1000"
xtype="multifield">
<fieldConfig
jcr:primaryType="cq:Widget"
xtype="mypathfield"/>
<listeners
jcr:primaryType="nt:unstructured" />
</links>
</items>
...
.....
the result dispayed in the dialog can be seen in the following screenshot.
my Question is: How to use the smartImage or smartFile in CompositeField? What did I do wrong?

Answer 1

I have not tried this with a smartimage widget, but I've found that the ACS Commons multifieldpanel is superior to the multifield.
Have a look:
http://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html#multi-field-panel-since-150