Layout:
Config on dialog:
<map jcr:primaryType="cq:Widget" fieldLabel="Field label" hideLabel="false" name="./map" xtype="multifield"> <fieldConfig jcr:primaryType="cq:Widget" border="true" hideLabel="true" layout="form" padding="10px" width="1000" xtype="multi-field-panel"> <items jcr:primaryType="cq:WidgetCollection"> <lineHead jcr:primaryType="cq:Widget" dName="lineHead" fieldLabel="Text field 1" width="300" xtype="textfield"/> <text jcr:primaryType="cq:Widget" dName="text" fieldLabel="Text field 2" width="300" xtype="textfield"/> </items> </fieldConfig> </map> |
Note: We can add many soft of field in items of fieldConfig for multifield.
Widget code:
CQ.Ext.ns("ExperienceAEM"); ExperienceAEM.MultiFieldPanel = CQ.Ext.extend(CQ.Ext.Panel, { panelValue: '', constructor: function(config){ config = config || {}; ExperienceAEM.MultiFieldPanel.superclass.constructor.call(this, config); }, initComponent: function () { ExperienceAEM.MultiFieldPanel.superclass.initComponent.call(this); this.panelValue = new CQ.Ext.form.Hidden({ name: this.name }); this.add(this.panelValue); var dialog = this.findParentByType('dialog'); dialog.on('beforesubmit', function(){ var value = this.getValue(); if(value){ this.panelValue.setValue(value); } },this); }, afterRender : function(){ ExperienceAEM.MultiFieldPanel.superclass.afterRender.call(this); this.items.each(function(){ if(!this.contentBasedOptionsURL || this.contentBasedOptionsURL.indexOf(CQ.form.Selection.PATH_PLACEHOLDER) < 0){ return; } this.processPath(this.findParentByType('dialog').path); }) }, getValue: function () { var pData = {}; this.items.each(function(i){ if(i.xtype == "label" || i.xtype == "hidden" || !i.hasOwnProperty("dName")){ return; } pData[i.dName] = i.getValue(); }); return $.isEmptyObject(pData) ? "" : JSON.stringify(pData); }, setValue: function (value) { this.panelValue.setValue(value); var pData = JSON.parse(value); this.items.each(function(i){ if(i.xtype == "label" || i.xtype == "hidden" || !i.hasOwnProperty("dName")){ return; } if(!pData[i.dName]){ return; } i.setValue(pData[i.dName]); }); }, validate: function(){ return true; }, getName: function(){ return this.name; } }); CQ.Ext.reg("multi-field-panel", ExperienceAEM.MultiFieldPanel); |