Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How do I put SmartImage in Multifield?

Ka_On_Leung
Level 2
Level 2

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)

    },

1 Accepted Solution
smacdonald2008
Correct answer by
Level 10
Level 10
1 Reply
smacdonald2008
Correct answer by
Level 10
Level 10