Question

我正在使用选择Xtype和复选框类型属性（CQ.form.Selection）在CQ5中创建一个复选框组（http://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.form.Selection处的API文档）。但我想覆盖setValue，getValue并验证它的功能以满足我的要求。我怎么能通过JCR节点声明呢？

非常感谢和欣赏。

Answer 1

不确定你的意思＆＃34;通过JCR节点声明＆＃34;来做到这一点。但是如果你需要使用标准xtype做一些额外的步骤，你只需要创建一个自定义xtype，它包装标准xtype，并使用它。这是一个example JS代码，用于创建和注册新的xtype（将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

如何在CQ / AEM中覆盖extjs的功能？

1 个答案: