extjs - AEM CQ5 - 多字段自定义 xtype 中的多字段自定义 xtype

Question

我正在尝试在 AEM CQ5 中创建一个组件，它将生成一个测验模块。我的要求是创建一个对话框，允许我创建多个问题，每个问题都有多个答案。我的对话框 xml 如下 -

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    xtype="dialog">
    <items jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <categories 
                jcr:primaryType="cq:Panel"
                title="Questions & Answers">
                <items jcr:primaryType="cq:WidgetCollection">
                    <questions-answers
                        jcr:primaryType="cq:Widget"
                        title="Questions & Answers"
                        name="./qasegment"
                        xtype="dialogfieldset">
                            <items jcr:primaryType="cq:WidgetCollection">
                                <link
                                    jcr:primaryType="cq:Widget"
                                    fieldDescription="Click on Add item to add questions. Once question is added, click on Edit Answers to add answers and the destination URLs"
                                    name="./questionsAnswers"
                                    typeHint="String"
                                    xtype="multifield">                         
                                    <fieldConfig 
                                        jcr:primaryType="nt:unstructured"
                                        xtype="widgets.configurableQandAfield"/>
                                </link>
                            </items>
                    </questions-answers>
                </items>       
            </categories>
        </items>
    </items>
</jcr:root>

来自和 xtype:mutlifield，我指的是一个自定义的 extjs 小部件，如下所示。这将创建(问题 + 问题配置 + 添加答案多字段)多字段。

NirmalWeb.ConfigurableQandAField = CQ.Ext.extend(CQ.form.CompositeField, {

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

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

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

    textField:null,

    answerOptions:null,

    answerType:null,

    widgetConfig: null,


    constructor: function(config) {
        config = config || { };
        var defaults = {
            "border": true,
            "layout": "form",
            "labelSeparator": ":",
            "padding": "10px"
        };
        this.widgetConfig = config;
        config = CQ.Util.applyDefaults(config, defaults);
        EeWeb.ConfigurableQandAField.superclass.constructor.call(this, config);
    },

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

        // Add a hidden field to hold our result to store.
        this.hiddenField = new CQ.Ext.form.Hidden({
            name: this.name
        });
        this.add(this.hiddenField);


        // Add the link text field and label.
        this.questionField = new CQ.Ext.form.TextField({
            fieldLabel: 'Question',
            allowBlank: false,
            emptyText: "Enter the question",
            width: 500,
            listeners: {
                change: {
                    fn:this.updateQuestionStore
                },       
                dialogclose: {
                    scope: this,
                    fn: this.updateHidden
                }
            }
        });
        this.add(this.questionField);

        var fieldsetConfig = CQ.Ext.apply({}, {
           xtype: 'fieldset',
           title: 'Edit Answer',
           // title or checkboxToggle creates fieldset header
           columnWidth: 0.5,
           checkboxToggle: true,
           collapsed: true,
           items :[
               {    
                xtype: "fieldset",
                title: 'Answer configurations',
                autoHeight:true,
                items: [
                        new CQ.Ext.form.RadioGroup({
                                vertical: false,
                                id:"answerType",
                                items: [
                                    {boxLabel: 'Text Answer', name: 'answerType', inputValue: 1, checked:true},
                                    {boxLabel: 'Image Answer', name: 'answerType', inputValue: 2}
                                ]    

                        }),
                        new CQ.Ext.form.RadioGroup({
                                vertical: false,
                                id:"answerOptions",
                                items: [
                                    {boxLabel: 'Single Answer', name: 'answerOptions', inputValue: 1, checked:true},
                                    {boxLabel: 'Multiple Answer', name: 'answerOptions', inputValue: 2}
                                ]    

                        }),
                       ]
                },
                {
                xtype: "multifield",
                    fieldConfig : {
                        items: [
                            {
                                xtype: "widgets.configurablemultiAnswerfield",
                                hideLabel: true,
                            }
                        ]
                    }
                },
           ]
        });
        this.textField = new CQ.Ext.form.FieldSet(fieldsetConfig);
        this.add(this.textField);

    },

    // overriding CQ.form.CompositeField#processInit
    processInit: function (path, record) { 
        this.linkTextField.processInit(path, record);
        this.linkField.processInit(path, record);
    },

    // overriding CQ.form.CompositeField#setValue
    setValue: function(value) {
        var link = JSON.parse(value);
        this.linkTextField.setValue(link.text);
        this.linkField.show();
        this.hiddenField.setValue(value);
    },

    // overriding CQ.form.CompositeField#getValue
    getValue: function() {
        return this.getRawValue();
    },

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue: function() {
        return JSON.stringify("test");
    },

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

    editAnswer: function(value) {
                alert("radio group change");
     }

});

// Register our new xtype.
CQ.Ext.reg('widgets.configurableQandAfield', NirmalWeb.ConfigurableQandAField);

在自定义小部件中，我正在创建另一个多字段以添加答案文本和工具提示，这是另一个自定义小部件。不幸的是，多字段添加项只是添加了一个文本字段，而不是自定义小部件“configurablemultiAnswerfield”中的所有字段。

请帮帮我。让我知道是否需要更多信息。提前致谢。

Answer 1

感谢大家的回答和建议。我能够用下面的代码解决这个问题。它有点难看，但可以完成工作。

1. 调用第二个 xtype 的解决方案很简单。我叫错了。它应该只是 fieldConfig : {xtype: "widgets.configurableAnswer"}只是为了将来引用，我又遇到了一个问题——从第二个 xtype 获取数据并将其作为 JSON 发送回来。我修改了第二个 xtype updateHidden 方法，如下所示

    updateHidden: function() {
       this.hiddenField.setValue(this.getValue());
      this.findParentByType('widgets.configurableQandAfield').callUpdate();
   

   }

调用父xtype中的update方法如下:

    callUpdate: function() {
    this.hiddenField.setValue(this.getValue());
},

为了保存来自第一个 xtype 的第二个 xtype 的数据，我在 getRaw 值方法中使用了以下代码

    getRawValue: function() {
    var link = {
        "questionText": this.questionText.getValue(),
        "answerStack" : this.answerSet.findByType('multifield')[0].getValue(),
        };
    return JSON.stringify(link);
},

附上第一个 xtype JS 以供进一步引用。

Nirmalweb.ConfigurableQandAField = CQ.Ext.extend(CQ.form.CompositeField, {

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

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

/**
 * @private
 * @type CQ.Ext.form.FieldSet
 */
answerSet:null,

constructor: function(config) {
    config = config || { };
    var defaults = {
        "border": true,
        "layout": "form",
        "labelSeparator": ":",
        "padding": "10px"
    };
    config = CQ.Util.applyDefaults(config, defaults);
    Nirmalweb.ConfigurableQandAField.superclass.constructor.call(this, config);
},

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

    // Add a hidden field to hold our result to store.
    this.hiddenField = new CQ.Ext.form.Hidden({
        name: this.name
    });
    this.add(this.hiddenField);

    // Add the link text field and label.
    this.questionText = new CQ.Ext.form.TextField({
        fieldLabel: 'Question',
        cls:"ee-configurableqandafield-text",
        allowBlank: false,
        emptyText: "Enter the question",
        listeners: {
            change: {
                scope:this,
                fn:this.updateHidden,
                fn:this.questionBank
            },       
            dialogclose: {
                scope: this,
                fn: this.updateHidden
            }
        },
        width: 500,
    });
    this.add(this.questionText);

    var fieldsetConfig = CQ.Ext.apply({}, {
        xtype: 'fieldset',
        title: 'Add Answers',
       // title or checkboxToggle creates fieldset header
        columnWidth: 0.5,
        checkboxToggle: true,
        collapsed: true,
        items :[
            {   
            xtype: "fieldset",
            title: 'Answer configurations',
            autoHeight:true,
            items: [
                    {
                        xtype: "selection",
                        type:"select",
                        fieldLabel:'Answer Type',
                        listeners: {
                            change: {
                                scope:this,
                                fn:this.updateHidden,
                            },       
                            dialogclose: {
                                scope: this,
                                fn: this.updateHidden,
                            },
                            selectionchanged :{
                                scope:this,
                                fn:this.updateHiddenAnsType
                            }
                        },
                        options:[
                            {   value:"text",text:"Text Answer"},
                            {   value:"image",text:"Image Answer"}
                        ]
                    },
                    {
                        xtype: "selection",
                        type:"select",
                        fieldLabel:'Answer Options',
                        listeners: {
                            change: {
                                scope:this,
                                fn:this.updateHidden
                            },       
                            dialogclose: {
                                scope: this,
                                fn: this.updateHidden
                            }
                        },
                        options:[
                            {   value:"single",text:"Single Answer"},
                            {   value:"multi",text:"Multiple Answer"}
                        ]
                    },
                   ]
            },
            {
                xtype: "multifield",
                addItemLabel:"Add an answer",
                listeners: {
                    change: {
                        scope:this,
                        fn:this.updateHidden
                    },       
                    dialogclose: {
                        scope: this,
                        fn: this.updateHidden
                    }
                },
                fieldConfig : {
                    xtype: "widgets.configurableAnswer",
                }
            },
       ]
    });
    this.answerSet = new CQ.Ext.form.FieldSet(fieldsetConfig);
    this.add(this.answerSet);


},

// overriding CQ.form.CompositeField#processInit
processInit: function (path, record) { 
    this.questionText.processInit(path, record);
    this.answerSet.processInit(path, record);
},

// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
    var link = JSON.parse(value);
    this.questionText.setValue(link.questionText);
    this.answerSet.setValue(link.answerStack);
    this.hiddenField.setValue(value);
},

// overriding CQ.form.CompositeField#getValue
getValue: function() {
    return this.getRawValue();
},

// overriding CQ.form.CompositeField#getRawValue
getRawValue: function() {
    var link = {
        "questionText": this.questionText.getValue(),
        "answerStack" : this.answerSet.findByType('multifield')[0].getValue(),
        };
    return JSON.stringify(link);
},

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

callUpdate: function() {
    this.hiddenField.setValue(this.getValue());
},

});
// Register our new xtype.
CQ.Ext.reg('widgets.configurableQandAfield', Nirmalweb.ConfigurableQandAField);

生成的 JSON 将如下所示:

{
"questionText": "What type of user are you?",
"answerStack": [
    "{\"answerText\":\"a1\",\"answerStyle\":\"questionStyle\",\"answerToolTip\":\"t1\",\"destinationType\":\"text\",\"destinationTextCTA\":\"Fill in the Unlock form\",\"destinationTextCTAURL\":\"https://google.com\"}",
    "{\"answerText\":\"a2\",\"answerStyle\":\"questionStyle\",\"answerToolTip\":\"t2\",\"destinationType\":\"text\",\"destinationTextCTA\":\"Fill in the Unlock form 2\",\"destinationTextCTAURL\":\"https://facebook.com\"}"
]