我正在尝试在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小部件，如下所示。这将创建（问题+问题配置+添加答案多字段）多字段。
/*A global array to save the questions*/
var questionBanks =[];
var myQuestionStore = new CQ.Ext.data.ArrayStore({
data : questionBanks,
id:0,
fields : ['myId','username']
});
/**
* @class NirmalWeb.ConfigurableQandAField
* @extends CQ.form.CompositeField
* This is a custom widget based on {@link CQ.form.CompositeField}.
* @constructor
* Creates a new NirmalWeb.ConfigurableQandAField.
* @param {Object} config The config object
*/
NirmalWeb.ConfigurableQandAField = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* @private
* @type CQ.Ext.form.HiddenField
*/
hiddenField: null,
questionHiddenField: null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
hiddenAnswerTypeField:null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
questionText: null,
questionStyle:null,
questionStyle1:null,
answerType: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);
if(this.itemId == undefined) {
this.itemId = this.id.split('-')[2];
}
// Add a hidden field to hold our result to store.
this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);
this.questionHiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
// this.add(this.questionHiddenField);
// Add the link text field and label.
this.questionText = new CQ.Ext.form.TextField({
fieldLabel: 'Question',
name:'./questionText',
allowBlank: false,
emptyText: "Enter the question",
listeners: {
change: {
scope:this,
fn:this.updateQuestionHidden
}
},
width: 500,
});
this.add(this.questionText);
this.questionStyle = new CQ.Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
fieldLabel:'Question Style',
name:'./questionStyle',
valueField: 'options',
displayField: 'displayText',
store: new CQ.Ext.data.ArrayStore({
id: 0,
fields: ['options','displayText'],
data: [
['heading1', 'Heading 1'],
['heading2', 'Heading 2'],
['questionStyle', 'Question Style 1'],
['answerStyle', 'Answer Style 1'],
['paragraph1', 'Paragraph 1'],
['paragraphImp', 'Paragraph Important'],
['paragraphBold', 'Paragraph Bold'],
['paragraphUrgent', 'Paragraph Urgent'],
]
}),
listeners: {
scope: this,
change: this.updateHidden
},
});
this.add(this.questionStyle);
this.answerType = new CQ.Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
allowBlank: false,
autoSelect: false,
forceSelection:true,
fieldLabel:'Answer Type',
name:'./answerType',
valueField: 'options',
displayField: 'displayText',
store: new CQ.Ext.data.ArrayStore({
id: 0,
fields: ['options','displayText'],
data: [['text', 'Text Answer'], ['image', 'Image Answer']]
}),
value : 'text',
listeners: {
change: {
scope:this,
fn:this.answerTypeselection
},
selectionchanged: {
scope:this,
fn:this.answerTypeselection
},
dialogclose: {
scope: this,
fn: this.updateHidden
}
},
});
this.add(this.answerType);
var fieldsetConfig = CQ.Ext.apply({}, {
xtype: 'fieldset',
title: 'Add Answers',
columnWidth: 0.5,
name:'./answerFieldSet',
checkboxToggle: true,
collapsed: true,
listeners: {
expand: {
scope: this,
fn:this.updateHidden
}
},
items :[
{
xtype: "multifield",
name:'./answerStack',
addItemLabel:"Add an answer",
listeners: {
change: {
scope:this,
fn:this.updateHidden
},
dialogclose: {
scope: this,
fn: this.updateHidden
}
},
fieldConfig : {
xtype: "apps.ee-web.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.questionStyle.processInit(path, record);
this.hiddenAnswerTypeField.processInit(path, record);
this.answerSet.processInit(path, record);
},
// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
var link = JSON.parse(value);
this.itemId = link.itemId;
this.questionText.setValue(link.questionText);
this.questionHiddenField.setValue(this.questionText.getValue());
this.questionStyle.setValue(link.questionStyle);
this.answerType.setValue(link.answerType);
this.answerSet.toggleCollapse(true) ;
this.answerSet.getComponent(0).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 = {
"itemId": this.itemId,
"questionText": this.questionText.getValue(),
"questionStyle":this.questionStyle.getValue(),
"answerType" : this.answerType.getValue(),
"answerStack" : this.answerSet.findByType('multifield')[0].getValue(),
};
return JSON.stringify(link);
},
updateQuestionHidden: function() {
this.questionHiddenField.setValue(this.questionText.getValue());
this.hiddenField.setValue(this.getValue());
},
// private
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
},
answerTypeselection:function(){
var comboList = this.answerSet.findByType('multifielditem',true);
console.log(comboList);
for (var i = 0 ; i < comboList.length ; i ++){
this.answerSet.remove(comboList[i]);
}
this.answerSet.collapse();
this.answerSet.doLayout();
this.updateHidden();
},
});
// Register our new xtype.
CQ.Ext.reg('apps.ee-web.widgets.configurableQandAfield', NirmalWeb.ConfigurableQandAField);
一个answerType组合框选择，我想删除answerSet Fieldset中包含的自定义多字段元素。我编写了函数answerTypeselection来删除多字段项元素。但是，尽管它们从隐藏值字段中删除，但它不会从对话框屏幕中删除。我错过了什么？请指导我。谢谢！
请帮帮我。谢谢!!
答案 0 :(得分：1)
如果删除多字段中的所有条目，那么questionsAnswers参数将为空，这意味着sling Post servlet将忽略它。如果您还需要删除属性，则需要添加带有@Delete后缀的隐藏字段。这将迫使Sling删除该属性。
./ questionAnswers @删除=真