Multifield hides the labels of its child fields
Hello, hope someone can help me on this.
First I created a multifield node with hideLabel=true because I do not need the label and its indented space for multifield itself. Also, added fieldConfig with xtype=myxtype, the custom widget. Here is the code:
{ "xtype":"multifield", "name":"./multitext", "hideLabel":true, "jcr:primaryType":"cq:Widget", "fieldConfig": { "xtype":"myxtype", "jcr:primaryType":"nt:unstructured" } }Next, in the custom widget code CustomWidget.js, I added 2 text fields WITH the label 'My Text 1' and 'My Text 2'. Here is the code:
var Test = {}; Test.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, { /** * @private * @type CQ.Ext.form.TextField */ hiddenField: null, /** * @private * @type CQ.Ext.form.TextField */ textField1: null, textField2: null, constructor: function(config) { config = config || { }; var defaults = { "border": false, "layout": "form", "padding":5 }; config = CQ.Util.applyDefaults(config, defaults); Test.CustomWidget.superclass.constructor.call(this, config); }, // overriding CQ.Ext.Component#initComponent initComponent: function() { Test.CustomWidget.superclass.initComponent.call(this); this.hiddenField = new CQ.Ext.form.Hidden({ name: this.name }); this.add(this.hiddenField); this.textField1 = new CQ.Ext.form.TextField({ hideLabel:false, fieldLabel:"My Text 1", listeners: { change: { scope:this, fn:this.updateHidden } } }); this.add(this.textField1); this.textField2 = new CQ.Ext.form.TextField({ hideLabel:false, fieldLabel:"My Text 2", listeners: { change: { scope:this, fn:this.updateHidden } } }); this.add(this.textField2); this.doLayout(); }, // overriding CQ.form.CompositeField#setValue setValue: function(value) { var parts = value.split("/"); this.textField1.setValue(parts[0]); this.textField2.setValue(parts[1]); this.hiddenField.setValue(value); }, // overriding CQ.form.CompositeField#getValue getValue: function() { return this.getRawValue(); }, // overriding CQ.form.CompositeField#getRawValue getRawValue: function() { if (!this.textField1) { return null; } return this.textField1.getValue() + "/" + this.textField2.getValue(); }, // private updateHidden: function() { this.hiddenField.setValue(this.getValue()); } }); // register xtype CQ.Ext.reg('myxtype', Test.CustomWidget);However, when I ran this code in the author mode, clicking 'Add Item' displays the text fields WITHOUT the labels. (see screenshot)
[img]multifield_no_label.png[/img]
As I thought the child fields inherits the parent multifield's hideLabel setting, I force set hideLabel=false in each child textfield (as you can see above), but it did not help. I appreciate if someone could help on this. I'm using AEM5.6.0. Thanks!