如何覆蓋CQ/AEM中的extjs函數？

Question

我正在使用選擇Xtype和複選框類型屬性（CQ.form.Selection）在CQ5中創建複選框組（API文檔位於http://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.form.Selection）。 但我想覆蓋setValue，getValue並驗證它的功能以滿足我的要求。我如何通過JCR節點聲明來做到這一點？

非常感謝和欣賞。

Answer 1

不確定您的意思是「通過JCR節點聲明來做到這一點」。但是，如果您需要使用標準xtype進行一些額外的步驟，則只需創建一個自定義的xtype，它將包裝標準的xtype並使用它。 以下是創建並註冊新xtype的JS代碼的example（將2個不同字段的值合併爲一個值）。

Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, { 

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

/** 
* @private 
* @type CQ.Ext.form.ComboBox 
*/ 
allowField: null, 

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

constructor: function(config) { 
    config = config || { }; 
    var defaults = { 
     "border": false, 
     "layout": "table", 
     "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.form.Selection({ 
     type:"select", 
     cls:"ejst-customwidget-1", 
     listeners: { 
      selectionchanged: { 
       scope:this, 
       fn: this.updateHidden 
      } 
     }, 
     optionsProvider: this.optionsProvider 
    }); 
    this.add(this.allowField); 

    this.otherField = new CQ.Ext.form.TextField({ 
     cls:"ejst-customwidget-2", 
     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); 
}, 

// overriding CQ.form.CompositeField#processRecord 
processRecord: function(record, path) { 
    console.log("CustomWidget#processRecord", path, record); 
    this.allowField.processRecord(record, path); 
}, 

// overriding CQ.form.CompositeField#setValue 
setValue: function(value) { 
    var parts = value.split("/"); 
    this.allowField.setValue(parts[0]); 
    this.otherField.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.allowField) { 
     return null; 
    } 
    return this.allowField.getValue() + "/" + 
      this.otherField.getValue(); 
}, 

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

}); 

// register xtype 
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget); 

Creating custom xtype in AEM6's touch UI