Adobe Experience Manager Sites & More

Ka_On_Leung · 10/15/15

I am currently using CQ5.5 SP2 and having trouble to create a multifield component where one of the field allow user to drag & drop image from content finder to a smartImage. Below is my source code to init my multifield xtype. The last field is the field where I create the smartImage, but on the moment, only the label can be displayed in the dialog. Please help!

initComponent: function() {
Ejst.CustomWidget.superclass.initComponent.call(this);

        this.hiddenField = new CQ.Ext.form.Hidden({
            name: this.name
        });
        this.add(this.hiddenField);
        this.allowField = new CQ.Ext.form.TextField({
            cls:"ejst-customwidget-1",
            fieldLabel: "Title",
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                }
            }
        });
        this.add(this.allowField);

        //this.richtext = new CQ.form.RichText({
        //this.richtext = new CQ.Ext.form.HtmlEditor({
        this.richtext = new CQ.Ext.form.TextArea({
            cls:"ejst-customwidget-2",
            fieldLabel: "Description",
            width: 600,
            listeners: {

                change: {
                    scope:this,
                    fn:this.updateHidden

                }
            }
        });
        this.add(this.richtext);

        this.pathField = new ACS.CQ.form.DDPathField({
            cls:"ejst-customwidget-3",
            fieldLabel: "Banner Path",
            width:600,
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                },
                focus:{
                    scope:this,
                    fn:this.updateHidden
                },
                dialogclose:{
                    scope:this,
                    fn:this.updateHidden
                }
            }
        });
        this.add(this.pathField);

        this.actionURL1 = new CQ.form.PathField({

            cls:"ejst-customwidget-4",
            fieldLabel: "Action URL 1",
            width:600,
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden

                }
            }

        });
        this.add(this.actionURL1);

        this.actionURL2 = new CQ.form.PathField({

            cls:"ejst-customwidget-5",
            fieldLabel: "Action URL 2",
            width:600,
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                }
            }

        });
        this.add(this.actionURL2);

        this.imageField = new CQ.html5.form.SmartImage({

            cls:"ejst-customwidget-6",
            fieldLabel: "Image",
            cropParameter: "./icon01/imageCrop",
            ddGroups: "media",
            fileNameParameter: "./icon01/fileName",
            fileReferenceParameter: "./icon01/fileReference",
            name: "./icon01/fileReference",
            rotateParameter: "./icon01/imageRotate",
            disableFlush:true,
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                }
            }
        });
        this.add(this.imageField)