Empty dialog fields overwritten when reordering Multifield

[arpan-garg]

Hi All,

While reordering multi-field empty fields of one section is getting override by another filled fields of other section. Using below multifield.js

var SiteClientLib = SiteClientLib || {};
if(typeof CQ !== 'undefined')
{
SiteClientLib.MultiFieldPanel = CQ.Ext.extend(CQ.Ext.Panel, {
    panelValue: '',

    constructor: function(config){
        config = config || {};
        SiteClientLib.MultiFieldPanel.superclass.constructor.call(this, config);
    },

    initComponent: function () {
        SiteClientLib.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);
    },

    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("abcmultifieldpanel", SiteClientLib.MultiFieldPanel);Love Sharma​smacdonald2008​Amy_Wong​Woojin​Adobe Experience Manager​@

[Techaspect_Solu · Accepted solution]

Hi arpang16406580,

Here is the sample Custom Xtype named SevenFields which has two fields in it.

//custom xtype code

CQ.Ext.form.SevenField = CQ.Ext.extend(CQ.Ext.form.Field, {
  msWidth : 170,
  msHeight : 170,
  hideNavIcons : false,
  /**
  * @cfg {String} fromData Json text for fromData
  */
  displayField : 'name',
  valueField : 'name',
  switchToFrom : false,
  allowDup : false,
  focusClass : undefined,
  delimiter : ',',
  bodyStyle : 'padding:15px',
  border : false,
  // Text Field
  Text1Height : 100,
  Text1Width : 500,
  Text1LblTxt : "Column1:",
  Text2Height : 100,
  Text2Width : 500,
  Text2LblTxt : "Column2:",
  Text1TextField : null,
  Text2TextField : null,
  defaultAutoCreate : {
  tag : "div"
  },
  initComponent : function () {
  CQ.Ext.form.SevenField.superclass.initComponent.call(this);
  this.addEvents({
  'rowdblclick' : true,
  'change' : true
  });
  },
  onRender : function (ct, position) {
  CQ.Ext.form.SevenField.superclass.onRender.call(this, ct, position);
  var area1 = {
  "name" : 'field1',
  "bodyStyle" : 'padding:5px',
  "height" : this.Text1Height,
  "width" : this.Text1Width,
  "cls" : "",
  "stateful" : false,
  "enableKeyEvents" : true
  };
  var area2 = {
  "name" : 'field2',
  "bodyStyle" : 'padding:5px',
  "height" : this.Text2Height,
  "width" : this.Text2Width,
  "cls" : "",
  "stateful" : false,
  "enableKeyEvents" : true
  };
  this.Text1TextField = new CQ.Ext.form.TextField(area1);
  this.Text2TextField = new CQ.Ext.form.TextField(area2);
  var label1 = {
  text : this.Text1LblTxt
  }
  var label2 = {
  text : this.Text2LblTxt
  }
  this.Text1LabelField = new CQ.Ext.form.Label(label1);
  this.Text2LabelField = new CQ.Ext.form.Label(label2);
  var p = new CQ.Ext.Panel({
  bodyStyle : 'padding:0px',
  border : this.border,
  layout : "table",
  layoutConfig : {
  columns : 2,
  colspan : 1
  }
  });
  p.add(this.Text1LabelField);
  p.add(this.Text1TextField);
  p.add(this.Text2LabelField);
  p.add(this.Text2TextField);
  p.render(this.el);
  var tb = p.body.first();
  this.el.setWidth(p.body.first().getWidth());
  p.body.removeClass();

  this.hiddenName = this.name;
  var hiddenTag = {
  tag : "input",
  type : "hidden",
  value : "",
  name : this.name
  };
  this.hiddenField = this.el.createChild(hiddenTag);
  this.Text1TextField.on('change', this.onTextChange, this);
  this.Text2TextField.on('change', this.onTextChange, this);
  },

  onTextChange : function (vw, index, node, e) {
  var txt = this.Text1TextField.getValue() + "|||" + this.Text2TextField.getValue();
  this.hiddenField.dom.value = txt;
  // var tText= this.titleTextField.getValue();
  },

  setValue : function (val) {
  CQ.Ext.form.SevenField.superclass.setValue.apply(this, arguments);
  this.hiddenField.dom.value = val;

  if (this.hiddenField.dom.value !== undefined) {
  var dataArray = val.split("|||");
  this.Text1TextField.setValue(dataArray[0]);
  this.Text2TextField.setValue(dataArray[1]);
  
  }
  }
  });
// registering the custom widget with the name sevenfield
CQ.Ext.reg("sevenfield", CQ.Ext.form.SevenField);

Refer the above code for multifield and update your code accordingly so that it wont have any reordering issues.
Hope it Helps.

Thanks,
Techaspect Solutions.
http://www.techaspect.com/