CQ，多字段中的文本，链接，复选框的自定义小部件

问题描述：

请参阅下面的图像，这是我正在尝试构建的组件。一个包含文本，链接和复选框的自定义小部件。CQ，多字段中的文本，链接，复选框的自定义小部件

enter image description here

到目前为止，我可以设法让接口党正确地显示出来，你可以在图片中看到。但是，当我点击'OK'时，它会抛出一个'Uncaught TypeError: undefined is not a function' ，如图中的红色下划线所示...显然，它不会将任何对象数据传递到JSP层供我以后使用....

所以，基本上，它抱怨说“VT”未定义....我没有clud为什么它正在发生... 这里是我的代码生成的小部件

/** 
* @class MapLinks.CustomWidget 
* @extends CQ.form.CompositeField 
* This is a custom widget based on {@link CQ.form.CompositeField}. 
* @constructor 
* Creates a new CustomWidget. 
* @param {Object} config The config object 
*/ 
CQ.form.KeyValueLinkSelection = CQ.Ext.extend(CQ.form.CompositeField, { 

    /** 
    * @private 
    * @type CQ.Ext.form.TextField 
    */ 
    hiddenField: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.Label 
    */ 
    textLabel: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.TextField 
    */ 
    textField: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.Label 
    */ 
    pathLabel: null, 

    /** 
    * @private 
    * @type CQ.form.PathField 
    */ 
    pathField: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.Label 
    */ 
    checkboxLabel: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.Checkbox 
    */ 
    checkbox: null, 

    constructor: function(config) { 
     config = config || { }; 
     var defaults = { 
      "border": false, 
      "layout": "table", 
      "columns": 6 
     }; 
     config = CQ.Util.applyDefaults(config, defaults); 
     CQ.form.KeyValueLinkSelection.superclass.constructor.call(this, config); 
    }, 

    // overriding CQ.Ext.Component#initComponent 
    initComponent: function() { 

     CQ.form.KeyValueLinkSelection.superclass.initComponent.call(this); 


     this.hiddenField = new CQ.Ext.form.Hidden({ 
      name: this.name 
     }); 
     this.add(this.hiddenField); 

     this.textLabel = new CQ.Ext.form.Label({ 
      cls:"keyvaluelinkselection-1", 
      text:"Text:", 
      style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:10px;" 
     }); 
     this.add(this.textLabel); 

     this.textField = new CQ.Ext.form.TextField({ 
      cls:"keyvaluelinkselection-2", 
      listeners: { 
       change: { 
        scope:this, 
        fn:this.updateHidden 
       } 
      } 
     }); 
     this.add(this.textField); 

     this.pathLabel = new CQ.Ext.form.Label({ 
      cls:"keyvaluelinkselection-3", 
      text:"Link:", 
      style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:15px;" 
     }); 
     this.add(this.pathLabel); 

     this.pathField = new CQ.form.PathField({ 
      cls:"keyvaluelinkselection-4", 
      width:"150", 
      listeners: { 
       change: { 
        scope:this, 
        fn:this.updateHidden 
       }, 
       dialogselect: { 
        scope:this, 
        fn:this.updateHidden 
       } 
      } 
     }); 
     this.add(this.pathField); 

     this.checkboxLabel = new CQ.Ext.form.Label({ 
       cls:"keyvaluelinkselection-5", 
       text:"open in new tab:", 
       style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:20px;" 
      }); 
     this.add(this.checkboxLabel); 

     this.checkbox = new CQ.Ext.form.Checkbox({ 
      cls:"keyvaluelinkselection-6", 
      width:"30", 
      listeners: { 
       change: { 
        scope:this, 
        fn:this.updateHidden 
       }, 
       dialogselect: { 
        scope:this, 
        fn:this.updateHidden 
       } 
      } 
     }); 
     this.add(this.checkbox); 
    }, 

    // overriding CQ.form.CompositeField#processPath 
    processPath: function(path) { 
     this.textField.processPath(path); 
    }, 

    // overriding CQ.form.CompositeField#processRecord 
    processRecord: function(record, path) { 
     this.textField.processRecord(record, path); 
    }, 

    // overriding CQ.form.CompositeField#setValue 
    setValue: function(value) { 
     var parts = value.split("}={"); 
     this.textField.setValue(parts[0]); 
     this.pathField.setValue(parts[1]); 
     this.checkbox.setValue(parts[2]); 
     this.hiddenField.setValue(value); 
    }, 

    // overriding CQ.form.CompositeField#getValue 
    getValue: function() { 
     return this.getRawValue(); 
    }, 

    // overriding CQ.form.CompositeField#getRawValue 
    getRawValue: function() { 
     return this.textField.getValue() + "}={" + 
      this.pathField.getValue() + "}={" + 
      this.checkbox.getValue(); 
    }, 

    // private 
    updateHidden: function() { 
     this.hiddenField.setValue(this.getValue()); 
    } 

}); 

// register xtype 
CQ.Ext.reg('keyvaluelinkselection', CQ.form.KeyValueLinkSelection);

bascially ，我流动的教程给土坯 - >http://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html

任何提示旨意是有帮助的，感谢

答

其实我想通了，我自己.... 基本上，只是覆盖validateValue: function(value)

这里是整个代码示例：

CQ.form.KeyValueLinkSelection = CQ.Ext.extend(CQ.form.CompositeField, { 

    /** 
    * @private 
    * @type CQ.Ext.form.TextField 
    */ 
    hiddenField: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.Label 
    */ 
    textLabel: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.TextField 
    */ 
    textField: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.Label 
    */ 
    pathLabel: null, 

    /** 
    * @private 
    * @type CQ.form.PathField 
    */ 
    pathField: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.Label 
    */ 
    checkboxLabel: null, 

    /** 
    * @private 
    * @type CQ.Ext.form.Checkbox 
    */ 
    checkbox: null, 

    constructor: function(config) { 
     config = config || { }; 
     var defaults = { 
      "border": false, 
      "layout": "table", 
      "columns": 6 
     }; 
     config = CQ.Util.applyDefaults(config, defaults); 
     CQ.form.KeyValueLinkSelection.superclass.constructor.call(this, config); 
    }, 

    // overriding CQ.Ext.Component#initComponent 
    initComponent: function() { 

     CQ.form.KeyValueLinkSelection.superclass.initComponent.call(this); 


     this.hiddenField = new CQ.Ext.form.Hidden({ 
      name: this.name 
     }); 
     this.add(this.hiddenField); 

     this.textLabel = new CQ.Ext.form.Label({ 
      cls:"keyvaluelinkselection-1", 
      text:"Text:", 
      style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:10px;" 
     }); 
     this.add(this.textLabel); 

     this.textField = new CQ.Ext.form.TextField({ 
      cls:"keyvaluelinkselection-2", 
      allowBlank: false, 
      listeners: { 
       change: { 
        scope:this, 
        fn:this.updateHidden 
       } 
      } 
     }); 
     this.add(this.textField); 

     this.pathLabel = new CQ.Ext.form.Label({ 
      cls:"keyvaluelinkselection-3", 
      text:"Link:", 
      style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:15px;" 
     }); 
     this.add(this.pathLabel); 

     this.pathField = new CQ.form.PathField({ 
      cls:"keyvaluelinkselection-4", 
      width:"150", 
      allowBlank: false, 
      listeners: { 
       change: { 
        scope:this, 
        fn:this.updateHidden 
       }, 
       dialogselect: { 
        scope:this, 
        fn:this.updateHidden 
       } 
      } 
     }); 
     this.add(this.pathField); 

     this.checkboxLabel = new CQ.Ext.form.Label({ 
      cls:"keyvaluelinkselection-5", 
      text:"open in new tab:", 
      style:"font-size: 12px; font-family: Arial, Verdana, sans-serif; vertical-align:text-bottom; padding-bottom:0px; padding-right:5px; padding-left:20px;" 
     }); 
     this.add(this.checkboxLabel); 

     this.checkbox = new CQ.Ext.form.Checkbox({ 
      cls:"keyvaluelinkselection-6", 
      width:"30", 
      listeners: { 
       change: { 
        scope:this, 
        fn:this.updateHidden 
       }, 
       dialogselect: { 
        scope:this, 
        fn:this.updateHidden 
       } 
      } 
     }); 
     this.add(this.checkbox); 
    }, 

    validateValue: function(value) { 
     if(value.length < 1){ // if it's blank 
      if(this.allowBlank){ 
       this.clearInvalid(); 
       return true; 
      }else{ 
       this.markInvalid(this.blankText); 
       return false; 
      } 
     } 
     if(this.vtype){ 
      //TO DO, may need this condition checker later on 
     } 
     if(typeof this.validator == "function"){ 
      var msg = this.validator(value); 
      if(msg !== true){ 
       this.markInvalid(msg); 
       return false; 
      } 
     } 
     if(this.regex && !this.regex.test(value)){ 
      this.markInvalid(this.regexText); 
      return false; 
     } 
     return true; 
    }, 

    // overriding CQ.form.CompositeField#processPath 
    processPath: function(path) { 
     this.textField.processPath(path); 
    }, 

    // overriding CQ.form.CompositeField#processRecord 
    processRecord: function(record, path) { 
     this.textField.processRecord(record, path); 
    }, 

    // overriding CQ.form.CompositeField#setValue 
    setValue: function(value) { 
     var parts = value.split("|"); 
     this.textField.setValue(parts[0]); 
     this.pathField.setValue(parts[1]); 
     this.checkbox.setValue(parts[2]); 
     this.hiddenField.setValue(value); 
    }, 

    // overriding CQ.form.CompositeField#getValue 
    getValue: function() { 
     return this.getRawValue(); 
    }, 

    // overriding CQ.form.CompositeField#getRawValue 
    getRawValue: function() { 
     return this.textField.getValue() + "|" + 
      this.pathField.getValue() + "|" + 
      this.checkbox.getValue(); 
    }, 

    // private 
    updateHidden: function() { 
     this.hiddenField.setValue(this.getValue()); 
    } 

}); 

// register xtype 
CQ.Ext.reg('keyvaluelinkselection', CQ.form.KeyValueLinkSelection);

，它100名％的作品.. ..

CQ，多字段中的文本，链接，复选框的自定义小部件

相关推荐