1 Reply Latest reply on Feb 8, 2013 4:54 AM by Sergei Müller

    Create a new xtype containing html5smartimage

    Sergei Müller Level 1

      Hi all

       

      I'm trying to create an xtype that contains an html5smartimage element.

       

      Apart from adding the html5smartimage to a Panel, is there anything else required?

       

      The following is rendered to my dialog, but this doesn't contain the Crop / Resize / Map icons or the placeholder text.

      image-xtype.png

      When dropping images from ContentFinder to this area, I get the following error:

      image-error.png

      CODE

      this.newPanel = new CQ.Ext.Panel({

       

          cls: "test",

       

          layout: "fit",

          border: true,

          autoHeight: true,

          items: {

              xtype: "panel",

              layout: "form",

              border: false,

              autoHeight: true,

              defaults: {

                  labelWidth: 70,

                  anchor: "100%"

              },

              items:[

                  {

                       xtype: "panel",

                       border: false,

                       items: [{

                           height: 150,

                          title:"Image",

                          ddGroups: ["media"],

                          ddAccept: ["image/.*"],

                          border: true,

                          disableZoom: true,

                          allowUpload: false,

                          fileNameParameter:"./fileName",

                          fileReferenceParameter:"./fileReference",

                          cropParameter:"./imageCrop",

                          mapParameter:"./imageMap",

                          requestSuffix:".img.png",

                          rotateParameter:"./imageRotate",

                          name:"./file",

                          uploadUrl:"/tmp/upload/*",

                          xtype: "html5smartimage"

                       }]

                  }

              ]

          }

      });

        • 1. Re: Create a new xtype containing html5smartimage
          Sergei Müller Level 1

          I resolved it by creating a new panel with a form layout and adding the smartimage object to it.

           

          CODE


          this.newPanel = new CQ.Ext.Panel({

              cls: "test",

           

              layout: "fit",

              border: true,

              autoHeight: true,

              items: {

                  xtype: "panel",

                  layout: "form",

                  border: false,

                  autoHeight: true,

                  defaults: {

                      labelWidth: 70,

                      anchor: "100%"

                  },

                  items:[

                      {

                           xtype: "panel",

                           border: false,

                           items: [{

                              frame: false,

                              border: false,

                              height: 250,

                              anchor: "100%",

                              xtype: "panel",

                              layout: "form",

                              items: [

                                      new CQ.html5.form.SmartImage({

                                          title:"Image",

                                          ddGroups: ["media"],

                                          ddAccept: ["image/.*"],

                                          border: true,

                                          height: 250,

                                          disableZoom: true,

                                          allowUpload: false,

                                          fileNameParameter:"./fileName",

                                          fileReferenceParameter:"./fileReference",

                                          cropParameter:"./imageCrop",

                                          mapParameter:"./imageMap",

                                          requestSuffix:".img.png",

                                          rotateParameter:"./imageRotate",

                                          name:"./file",

                                          uploadUrl:"/tmp/upload/*",

                                          xtype: "html5smartimage"

                                      }),

                                      { //resType

                                      ignoreData: true,

                                      name: "./jcr:content/image/sling:resourceType",

                                      value: "foundation/components/image",

                                      xtype: "hidden"                           

                                      }

                              ]

                           }]

                      }

                  ]

              }

          });