如何在compositefield中使用smartimage或smartfile？

Question

我想合成一些字段（文本字段、URL 和图像）。我阅读了一些关于如何使用

组合一些元素的教程

CQ.Ext.form.CompositeField 小部件。

我的 javascript 看起来像这样 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);

我的 Dialog.xml 看起来像这样：

...
....
<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>
...
.....

对话框中显示的结果可以在下面的屏幕截图中看到。

我的问题是：如何在CompositeField中使用smartImage或smartFile？我做错了什么？

Answer 1

我还没有尝试使用 smartimage 小部件，但我发现 ACS Commons multifieldpanel 优于 multifield。

看看： http://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html#multi-field-panel-since-150

如何在compositefield中使用smartimage或smartfile？

How to use smartimage or smartfile in compositefield?

extjs

widget

aem