我正在尝试在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和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);
//if the destination type is text response
this.questionField= new CQ.form.RichText({
fieldLabel:'destination Text',
name:'./questionField',
allowBlank: true,
enableSourceEdit: true,
hidden:true,
externalStyleSheets:"[/etc/designs/web-2013/clientlibs_all.css]",
emptyText: "Enter the text to show to the customer on answer selection",
width: 500,
rtePlugins :{
spellcheck:{features:"*"},
image:{features:"*"},
edit:{features:"*"},
justify:{features:"*"},
misctools:{features:"*"},
table:{features:"*"},
undo:{features:"*"}
},
listeners : {
change :{
scope : this,
fn : this.updateHidden
},
destroy: {
scope:this,
fn:this.destroyRichText
}
}
});
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");
},
destroyRichText : function(){
this.el.dom={};
}
});
// Register our new xtype.
CQ.Ext.reg('widgets.configurableQandAfield', NirmalWeb.ConfigurableQandAField);
创建对话框时，它非常流畅。但是当我编辑组件并打开对话框时，任何编辑都不会更新。这是因为没有调用侦听器来更新隐藏值。我尝试过所有听众 - 改变，模糊，破坏，同步和推动。但是没有一个监听器被调用。
请帮帮我。谢谢!!
答案 0 :(得分：2)
尝试在多字段JS中覆盖父方法processValue并调用updateHidden方法init
示例：
// private
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
},
processValue: function(value) {
if ((value === undefined) || (value === null)) {
value = "";
}
// calling updateHidden() as change event not functioning for RTE widget
this.updateHidden();
return value;
},