custom xtype loading issue | Community
Skip to main content
S
Saran_K
Level 2
October 16, 2015
Solved

custom xtype loading issue

  • October 16, 2015
  • 3 replies
  • 1143 views

Hi,

I am using two custom xtypes written in extjs for my design_dialog component. My component has 6 tabs, in which the two custom xtypes were present in the second and third tabs. Both the xtypes containing pathfields within them.

The issue here is, once i opened my design_dialog the width of the pathfields present in the second & third tab were reduced.

Onething i have noted here is, if i made the second or third tab as active tab and reopened the design_dialog i can see the pathfield was on proper size.

Since i am new to CQ5 am bit confused on how to make these pathfields to appear on proper size while i open the design_dialog for the first time itself. Please help me on this. Screenshot attached.

Thanks & Regards,

Saran

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by smacdonald2008

    Thank you for sending me your code. It would have been next to impossible to dig into this issue without seeing your component and all the code that you had in it.  I deployed in AEM and found the issue. 

    Basically, you can control the size of a path field that appears in the custom xtype by using code in the custom xtype. To set the size when creating this PathField object using a new operator, use this code:

    this.listItemPath = new CQ.form.PathField({
                    fieldLabel : "Specify the Cool NEW * URL to navigate",
                    allowBlank : false,
                    autoWidth: false,
                    width: 500,
                    fieldDescription : "Select the path for the respective site",
                });
                this.add(this.listItemPath);                            

    Now when you open the dialog - the size is respected - see here:

    [img]cusPathFieldSize.png[/img]

    If you want to give AEM control of the width (I personally like setting it via code) - use the following code:

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

                    fieldLabel : "Specify the Cool NEW * URL to navigate",

                    allowBlank : false,

                    autoWidth: true,

                    minLength: 200,

                    fieldDescription : "Select the path for the respective site",

                });

                this.add(this.listItemPath);       

     

    autoWIdth will control the size and minLength should never go below 200 px

    3 replies

    smacdonald2008
    smacdonald2008
    Level 10
    October 16, 2015

    For those reading this thread and wanting to know how to write an AEM component that uses a custom xtype - see:

     

    Creating your first Adobe Experience Manager custom xtype

    Creating AEM multifield components that support drag and drop and uses custom xtypes

    We have community articles that will get you up and running with custom xtypes.

    To help solve this issue -- as I recommended in another similar thread dealing with custom xtypes - can you zip up your code in a package and send to me. Its too hard to spot what may be the issue by a simple description. Email to scottm@adobe.com. Put a link to this forum thread in the email and state community code in the subject line. 

    smacdonald2008
    smacdonald2008Accepted solution
    Level 10
    October 16, 2015

    Thank you for sending me your code. It would have been next to impossible to dig into this issue without seeing your component and all the code that you had in it.  I deployed in AEM and found the issue. 

    Basically, you can control the size of a path field that appears in the custom xtype by using code in the custom xtype. To set the size when creating this PathField object using a new operator, use this code:

    this.listItemPath = new CQ.form.PathField({
                    fieldLabel : "Specify the Cool NEW * URL to navigate",
                    allowBlank : false,
                    autoWidth: false,
                    width: 500,
                    fieldDescription : "Select the path for the respective site",
                });
                this.add(this.listItemPath);                            

    Now when you open the dialog - the size is respected - see here:

    [img]cusPathFieldSize.png[/img]

    If you want to give AEM control of the width (I personally like setting it via code) - use the following code:

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

                    fieldLabel : "Specify the Cool NEW * URL to navigate",

                    allowBlank : false,

                    autoWidth: true,

                    minLength: 200,

                    fieldDescription : "Select the path for the respective site",

                });

                this.add(this.listItemPath);       

     

    autoWIdth will control the size and minLength should never go below 200 px

      S
      Saran_KAuthor
      Level 2
      October 16, 2015

      This helps Scott. 

       
      But still, the width of the pathfields were fixed and it hides when we resize the dialog. It would be more helpful if you give me a solution for the pathfields to be adjusted relative to the resizing of the dialog, Thanks.
      Terms & ConditionsAccessibility statement

      Loading footer...