在aem 6.2中使用ExtJs编写自定义xtype脚本以开发多字段

您好，我是ExtJs脚本的新手，我正在尝试开发自定义多字段，我能够理解节点创建部分，但在脚本部分，我无法理解一些事情，比如在listener中添加作用域：this，fn:this.updatehidden我尝试用谷歌搜索出答案，但我没有得到满意的答案。那么，谁能给我解释一下范围：这部分 以及为什么我们在initcomponent中调用超类构造函数，也欢迎任何相关资源

提前谢谢 喜欢编码

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);

类层次结构，超类构造函数： 调用超类initComponent函数是因为希望派生类的层次结构的功能可用

例如，如果要构造大象：

• 首先设置一些属性，如“大”、“灰色”和“女性”
• 然后你构造了一个具有这些特性的哺乳动物
• 哺乳动物类构造函数本身会设置一些属性，比如“hasahead”，然后调用动物构造函数，所以如果你不从大象那里调用哺乳动物构造函数，你甚至连动物都得不到
• 然后，animal构造器将检查属性并创建一个animal
• 然后，哺乳动物类将添加动物类未涵盖的细节，例如乳房
• 在哺乳动物构造函数完成后，大象构造函数添加哺乳动物类没有涵盖的细节，例如主干

如果使用标准ExtJS语法（不确定CQ是否有自己的“标准语法”），大象定义如下：

Ext.define('Elephant',{
    extend:'Mammal',
    initComponent:function() {
        var me = this;
        // set config properties. Two possible calls:
        // "Ext.apply" overwrites config properties already defined by the subclass before constructor has been called
        // "Ext.applyIf" only sets config properties that have NOT been set by the subclass!
        // Since a MiniElephant subclass may want to set size:"small", we use applyIf here.
        Ext.applyIf(me,{ 
            size:'big',
            color:'gray'
        });
        me.callParent(arguments); // <- call constructor of superclass
        me.addTrunk(); // <- postprocessing
    },
    addTrunk:function() {
        var trunk = Ext.create('Trunk',{
            ...
        });
        me.getHead().add(trunk);
        // since addTrunk is called after the mammal constructor has been executed, 
        // the head is already initialized and the getHead function available!
    }
});

Ext.define('Mammal',{
    extend:'Animal',
    initComponent:function() {
        var me = this;
        // Every mammal has a head, so we force the property into here using "apply"!
        Ext.apply({
            hasHead:true,
            ...
        });
        me.callParent(arguments); // <- construct animal
        me.addBreast(); // <- add breast
    },
    getHead:function() {
        return this.headerEl;
    },
    ...
});

var fn = listeners.update;
fn();

它会将侦听器对象记录到控制台；但如果你这样做：

Ext.define('Elephant',{
    extend:'Mammal',
    initComponent:function() {
        var me = this;
        // set config properties. Two possible calls:
        // "Ext.apply" overwrites config properties already defined by the subclass before constructor has been called
        // "Ext.applyIf" only sets config properties that have NOT been set by the subclass!
        // Since a MiniElephant subclass may want to set size:"small", we use applyIf here.
        Ext.applyIf(me,{ 
            size:'big',
            color:'gray'
        });
        me.callParent(arguments); // <- call constructor of superclass
        me.addTrunk(); // <- postprocessing
    },
    addTrunk:function() {
        var trunk = Ext.create('Trunk',{
            ...
        });
        me.getHead().add(trunk);
        // since addTrunk is called after the mammal constructor has been executed, 
        // the head is already initialized and the getHead function available!
    }
});

Ext.define('Mammal',{
    extend:'Animal',
    initComponent:function() {
        var me = this;
        // Every mammal has a head, so we force the property into here using "apply"!
        Ext.apply({
            hasHead:true,
            ...
        });
        me.callParent(arguments); // <- construct animal
        me.addBreast(); // <- add breast
    },
    getHead:function() {
        return this.headerEl;
    },
    ...
});

var fn = listeners.update;
fn();

不会的！如果调用函数，则可以设置函数的范围：

listeners.update.call(myScope, firstParameter, secondParameter, ...)

或者，如果您应用它：

listeners.update.apply(myScope, parameterArray)

（请记住：Apply接受Array！）

因为在ExtJS中，监听器配置是由一个可观察的mixin处理的，它将函数放入特制的子对象中，所以默认范围对ExtJS程序员来说毫无意义，所以他们已经更改了它。为了方便起见，ExtJS添加了一个config属性，程序员可以使用该属性定义他想要的函数的

范围

因此，如果定义面板并在其中添加字段：

Ext.apply(me, {
    items:[{
        xtype:'textfield',
        listeners:{
            update:function() {
                console.log(this); // <- returns the panel, because...
            },
            scope:me // <- we are scoping to the panel!
        }
    }
});

Ext.apply（我{
项目：[{
xtype:'textfield'，
听众：{
更新：函数（）{
console.log（this）//