0 Replies Latest reply on Sep 27, 2012 11:37 AM by shyam6385

    listeners for CQ.form.ParagraphReference

    shyam6385

      Hi,

       

      I created a custom widget using the examples mentioned in Using ExtJS Widgets.

      In the example they had a multi field of two columns, one for combobox and other textbox.

      In a similar way i want a multi field of two columns, one for textfield and other for paragraphreference.

      below is the code snippet i used.

      Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {
      
      
          /**
           * @private
           * @type CQ.Ext.form.TextField
           */
          hiddenField: null,
      
      
          /**
           * @private
           * @type CQ.Ext.form.TextField
           */
          allowField: null,
      
      
          /**
           * @private
           * @type CQ.form.ParagraphReference
           */
          otherField: null,
          
          constructor: function(config) {
              config = config || { };
              var defaults = {
                  "border": true,
                  "layout": "form",
                  "width":"auto",
                  "columns":2
              };
              config = CQ.Util.applyDefaults(config, defaults);
              Ejst.CustomWidget.superclass.constructor.call(this, config);
          },
      
      
          // overriding CQ.Ext.Component#initComponent
          initComponent: function() {
              Ejst.CustomWidget.superclass.initComponent.call(this);
      
      
              this.hiddenField = new CQ.Ext.form.Hidden({
                  name: this.name
              });
              this.add(this.hiddenField);
      
      
              this.allowField = new CQ.Ext.form.TextField({
                  cls:"ejst-customwidget-1",
                  fieldLabel:"Option Value",
                  listeners: {
                      change: {
                          scope:this,
                          fn:this.updateHidden
                      }
                  }
              });
              this.add(this.allowField);
      
      
              this.otherField = new CQ.form.ParagraphReference({
                  cls:"ejst-customwidget-2",
                  fieldLabel:"Select Question",
                  fieldDescription:"question to be shown if this option is selected by user",
                  listeners: {
                                  change: {
                          scope:this,
                          fn:this.updateHidden
                      }
                  }
              });
              this.add(this.otherField);
      
      
          },
      
      
          // overriding CQ.form.CompositeField#processPath
          processPath: function(path) {
              //console.log("CustomWidget#processPath", path);
              this.allowField.processPath(path);
              this.otherField.processPath(path);
          },
      
      
          // overriding CQ.form.CompositeField#processRecord
          processRecord: function(record, path) {
              //console.log("CustomWidget#processRecord", path, record);
              this.allowField.processRecord(record, path);
              this.otherField.processRecord(record, path);
          },
      
      
          // overriding CQ.form.CompositeField#setValue
          setValue: function(value) {
                    console.log("CustomWidget#setValue", value);
              var parts = value.split(":");
              this.allowField.setValue(parts[0]);
              console.log("allowField#setValue", parts[0]);
              this.otherField.setValue(parts[1]);
              console.log("otherField#setValue", parts[1]);
              this.hiddenField.setValue(value);
          },
      
      
          // overriding CQ.form.CompositeField#getValue
          getValue: function() {
                    console.log("getValue#this.getRawValue", this.getRawValue());
              return this.getRawValue();
          },
      
      
          // overriding CQ.form.CompositeField#getRawValue
          getRawValue: function() {
              /*if (!this.allowField) {
                  return null;
              }*/
                    return this.allowField.getValue() + ":" + this.otherField.getValue();
          },
      
      
          // private
          updateHidden: function() {
                    this.hiddenField.setValue(this.getValue());
          }
      
      
      });
      

       

      The problem iam facing is when ever i open the dialog, the value in paragraph reference is setting to empty string.

      below is the console log screen shot.

      ss.jpg

       

      what i observed is the listener of paragrapgh reference is not triggered while setting the value. but the listener for text bos is triggering.

      ss1.jpg

       

      can you please figure out how to make trigger the listener for paragraph reference

       

      i wasted one whole day, please helpppppp

       

       

      Thanks,

      Shyam