CQ5 - mutlifield自定义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>

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

在自定义小部件中，我创建了另一个多字段，用于添加应答文本和工具提示，这是另一个自定义小部件。不幸的是，多字段添加项只是添加了一个文本字段，而不是自定义小部件中的所有字段“配置仿真器答复字段”。

请帮帮我。如果还需要什么，请告诉我。提前谢谢。

Answer 1

谢谢大家的回答和建议。我能够用下面的代码来解决这个问题。它有点丑，但它完成了任务。

1. 调用第二个xtype的解决方案很简单。我说错了。应该只是fieldConfig：{ xtype："widgets.configurableAnswer"} --为了便于将来参考，我又遇到了一个问题--从第二个xtype获取数据并将其作为JSON.I发送回JSON.I。 函数(){ this.findParentByType('widgets.configurableQandAfield').callUpdate()；(this.getValue())；updateHidden }

父xtype中的调用更新方法如下所示：

    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\"}"
]

}

Answer 2

我确实同意这样的意见，即拥有一个容器组件会比使对话框复杂化更好，但是如果您仍然在寻找一种在多字段中提取多字段的方法，那么下面的方法应该会有所帮助

您可以使用以下三种xtype创建效果：

1) 多层复合材料 -x类型，它将每个多字段条目作为子节点存储，字段作为属性。由Citytech公司开发

2) 多场面板 - xtype，它将多字段存储为json对象的数组，其中每个字段都是json对象的属性。由ACS开发

3)多字段--开箱多字段X型。

对话框结构(以菜单为例)：

multicomposite ( outer multifield ) |-fieldConfigs |- field A (lets say a textfield , for the menu's coulmn name) |- field B (a pathfield to configure the link for the column name ) |- field C (multifield , the inner multifield to hold sub menu entries ) |-fieldConfig - xtype : multifieldpanel |- field Ca (textfield to hold title) |- field Cb (pathfield for the link)

这将以下列格式存储数据：

{
jcr:primaryType: "nt:unstructured",
menu:
    {
        jcr:primaryType: "nt:unstructured",
        item_1:
        {
          submenu:
          [
            "{"title":"Link 1","link":"http://stackoverflow.com"}",
            "{"title":"Link 2","link":"http://stackoverflow.com"}"
          ],
          title: "Main Menu Item 1",
          jcr:primaryType: "nt:unstructured",
          link: "http://stackoverflow.com"
        },
        item_2:
        {
          submenu:
          [
            "{"title":"Sub menu 1","link":"http://stackoverflow.com"}",
            "{"title":"Sub menu 2","link":"http://stackoverflow.com"}"
          ],
          title: "Main Menu item 2",
          jcr:primaryType: "nt:unstructured",
          link: "http://stackoverflow.com"
        }
    }
}

在我的文章这里中，您可以找到关于此方法的详细记录。