を書くExtJsを使用してカスタムXtypeスクリプトを作成してAemでマルチフィールドを開発する6.2

Question

こんにちは私はExtJsスクリプトの初心者です。私はカスタムマルチフィールドを開発しようとしていましたが、ノード作成部分は理解できましたが、リスナーのようなもののうちスコープを追加する：this、fn：this.updatehidden私は答えをgoogleにしようとしましたが、私はどんな満足のいく答えも得ていません。コード

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

Answer 1

にこの一部 、我々はinitcomponentに スーパークラスのコンストラクタを呼び出して、なぜ、どの関連リソースも

感謝を歓迎している、事前に 愛：そういずれかは私に範囲を説明してください可能性があり

クラス階層、スーパークラスコンストラクタ：

スーパークラスのinitComponent関数は、派生クラスの階層の機能をav痛い例えば

、あなたが象を構築したい場合：

• まず最初に、「ビッグ」と「グレー」と「女性」のように、いくつかのプロパティを設定します。
• 次に、これらの特性を持つ哺乳類を構築します。
• 哺乳類のクラスコンストラクタは、 "頭があります"のようないくつかのプロパティを設定してから、動物コンストラクタを呼び出します。したがって、象から哺乳類のコンストラクタを呼び出さない場合でも、 ！
• 動物のコンストラクタは、プロパティを検査し、動物を作成します。
• 次に、哺乳類クラスは、動物クラスがカバーしなかった詳細を追加します。乳房。
• 哺乳類のコンストラクタが終了した後、象のコンストラクタは、哺乳類のクラスがカバーしていない細部、例えば胴体を追加します。あなたは、このための標準的な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; 
    }, 
    ... 
}); 

リスナーのスコープを：

リスナーは関数です。すべての機能には、scopeという名前があります。これは、機能内からthisにアクセスしたときに取得するオブジェクトです。関数内にthisを使用しない限り、scopeはあなたに関係ありません。関数（）{ コンソール：オブジェクト

VARリスナー= { 更新を持っているので、もしデフォルトで

は、JavaScriptで、関数の範囲は、機能が接続されているオブジェクトです。ログ（これ）; } };

、あなたはこのように関数を呼び出す場合：

listeners.update() 

それはリスナーがコンソールに反対ログに記録されます。あなたがこれを好きなら、

var fn = listeners.update; 
fn(); 

それはありません！関数を呼び出す場合、関数の範囲を設定することができます。

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

またはあなたはそれを適用する場合：

listeners.update.apply(myScope, parameterArray) 

（グッドは覚えておく： pplyが rray を取ります！ ）

ExtJSでは、リスナー設定がObservable mixinによって処理されるため、機能が特別に細工されたサブオブジェクトに置かれます。デフォルトスコープはExtJSプログラムには全く意味がありませんそれで彼らはそれを変えました。便宜上、ExtJSはプログラマーが意図した機能のscopeを定義するために使用できる設定プロパティを追加しました。だから、

あなたがパネルを定義し、内部のフィールドを追加した場合：

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