CQ5カスタムウィジェットの開発-ハードコードされた値をウィジェットスクリプトの外部に保持する-グローバル変数を使用する

techrookie

私はCQ5とExtJSを初めて使用します。cqextjsウィジェットを作成しました。これで、ウィジェットのjsファイルにハードコードされた文字列がたくさんあります。fieldLabel、fieldDescription、addItemLabel、rootPathなどのように...このウィジェットを別のチームに渡したいのですが、ウィジェットのjsスクリプトに変更を加えたくないのです。彼らは完全に技術者ではないため、間違いを犯す可能性があるからです。 。

グローバル変数から値を読み取ることで、別のjsファイルを作成し、いくつかのグローバル変数を宣言し、上記の多くのフィールドの値を設定できればと思います。

この個別のjsファイルにmywidgetconfig.jsという名前を付け、他のチームに必要に応じてこのファイルでのみ変更を加えるように要求します。

たとえば、ウィジェットにハードコーディングしました->

{
fieldLabel : 'Multi Field to setup links'
}

この値をmywidgetconfig.jsに次のように保持できればいいのですが。

INNERMULTIFIELD_FIELD_LABEL_TEXT_STRING : 'Multi Field to setup links',

などのように

INNERMULTIFIELD_FIELD_DESC_TEXT_STRING : 'blah blah blah'

実際のウィジェットjsでは、次のように値にアクセスできます->

{
fieldLabel : MyNamespace.INNERMULTIFIELD_FIELD_LABEL_TEXT_STRING,
fieldDescription: MyNamespace.INNERMULTIFIELD_FIELD_DESC_TEXT_STRING
}

これは可能ですか?

rakhi4110

はい、可能です。名前空間内に変数を作成してから、新しいチームに変更させたい構成のみを含む新しいjsファイル(必要に応じてmywidgetconfig.js)を作成できます。

例として、以下に示すように、名前空間内の変数を定義するカスタムウィジェット(customwidget.js)を使用できます。

/**
 * @class Myns.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
 */
var Myns = {};
Myns.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

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

    constructor: function(config) {
        config = config || { };
        var defaults = {
            "border": true,
            "layout": "form"
        };
        config = CQ.Util.applyDefaults(config, defaults);
        Myns.CustomWidget.superclass.constructor.call(this, config);
    },


    // overriding CQ.Ext.Component#initComponent
    initComponent: function() {
        Myns.CustomWidget.superclass.initComponent.call(this);

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

        this.textf = new CQ.Ext.form.TextField({
            fieldLabel: Myns.TEXTFIELDLABEL, //using variable
            allowBlank: false
        });
        this.add(this.textf);

        this.numberf = new CQ.Ext.form.NumberField({
            fieldLabel: Myns.NUMBERFIELDLABEL, //using variable
            allowBlank: false
        });
        this.add(this.numberf);
    }
    // rest of the code goes here
});
Myns.TEXTFIELDLABEL = "Enter Text"; //defining variable
Myns.NUMBERFIELDLABEL = "Enter a number"; //defining variable
// register xtype 
CQ.Ext.reg('customwidget', Myns.CustomWidget);

また、mywidgetconfig.jsには、他のユーザーが変更できる変数が含まれています。

/*
* Field Label for the text field
*/
Myns.TEXTFIELDLABEL = "New Text"; 

/*
* Field label for number field
*/
Myns.NUMBERFIELDLABEL = "New number"; 

また、js.txtで、customwidget.jsの下にmywidgetconfig.jsを追加してください。

#base=js
customwidget.js
mywidgetconfig.js

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ