custom xtype loading issue

[Saran_K]

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

[smacdonald2008]

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 · Accepted solution]

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

[Saran_K]

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.