Problems extending CompositeField

[Former Community Member]

I'm trying to extend CompositeField to create a new xtype that has some custom listeners.  I'm able to add my new widget to components and after adding data, I see it saved in CRX as expected.  There are two problems: (1) When I re-open the dialog or refresh the page, the data does not load and (2) The pathfield that I'm using shows everything under Websites, not just "siteadmin" pages, even though I have explicitly set the Predicate property to "siteadmin".  

I think I'm just missing something but can't figure out what - any help is appreciated.  I am using CQ5.6.1.

MyCompany.form.AdvancedPathField = CQ.Ext.extend(CQ.form.CompositeField, { /** * @private * @type CQ.Ext.form.TextField */ hiddenField: null, /** * @private * @type CQ.form.PathField */ pathField: null, /** * @private * @type CQ.Ext.form.Checkbox */ pathCheckBox: null, constructor: function(config) { config = config || { }; var defaults = { "border": true, "bodyBorder": false }; config = CQ.Util.applyDefaults(config, defaults); MyCompany.form.AdvancedPathField.superclass.constructor.call(this, config); }, // overriding CQ.Ext.Component#initComponent initComponent: function() { MyCompany.form.AdvancedPathField.superclass.initComponent.call(this); this.hiddenField = new CQ.Ext.form.Hidden({ name: this.name }); this.add(this.hiddenField); this.pathField = new CQ.form.PathField({ fieldLabel: "New Link HREF", width:"auto", predicate:'siteadmin', listeners: { change: { scope:this, fn: this.updateHidden }, validator: { scope:this, fn: this.isExternalUrl }, dialogclose: { scope: this, fn: this.updateHidden } } }); this.add(this.pathField); this.pathCheckBox = new CQ.Ext.form.Checkbox({ fieldLabel: "Show in new browser window", //defaultValue:"", listeners: { change: { scope:this, fn: this.updateHidden }, check: { scope: this, fn: this.updateHidden } } }); this.add(this.pathCheckBox); }, // overriding CQ.form.CompositeField#processPath processPath: function(path) { console.log("AdvancedPathField#processPath", path); this.pathField.processPath(path); this.pathCheckBox.processPath(path); }, // overriding CQ.form.CompositeField#processRecord processRecord: function(record, path) { console.log("AdvancedPathField#processRecord", path, record); this.pathField.processRecord(record, path); this.pathCheckBox.processRecord(record, path); }, // overriding CQ.form.CompositeField#setValue setValue: function(value) { var parts = value.split(":"); this.pathField.setValue(parts[0]); this.pathCheckBox.setValue(parts[1]); this.hiddenField.setValue(value); }, // overriding CQ.form.CompositeField#getValue getValue: function() { return this.getRawValue(); }, // overriding CQ.form.CompositeField#getRawValue getRawValue: function() { return this.pathField.getValue() + ":" + this.pathCheckBox.getValue(); }, // private updateHidden: function() { this.hiddenField.setValue(this.getValue()); }, isExternalUrl: function(value) { //do stuff return true; } }); // register xtype CQ.Ext.reg('advancedpathfield', MyCompany.form.AdvancedPathField);

[smacdonald2008]

We have a community that works and shows this use case as well as use of CompositeField:

http://helpx.adobe.com/experience-manager/using/creating-custom-xtype.html

[Former Community Member]

I have seen that before and I am doing basically the same thing in the code posted above.  It works in other widgets I have made but not this one, so I think I am missing something but not sure what.

[smacdonald2008]

If you can - zip up your package (of your component - with the dialog and the custom xtype) and email it to me. I will take a look at the code to see what is happening. Send to scottm@adobe.com and put in community code in the subject line. Also tell me what version of CQ you are using. I have all of them. 

[smacdonald2008 · Accepted solution]

I checked your code and I made a few changes. Basically - i followed the article and plugged in your custom xtype code. It worked. I got it working and I was able to debug through this and get values. See:

[img]xtype.png[/img]

The path field works. To view different JCR paths, set rootPath. I changed to the default value. I recommend that you follow the article listed above, change the code to use your code that you had in AdvancedPathField.js. You can change config values for PathField - like rootpath according to the docs list below. There are some nice examples listed here:

http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.form.PathField