我正在尝试在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);
// 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'中的所有字段。
请帮帮我。如果需要更多内容，请与我们联系。提前谢谢。
答案 0 :(得分：1)
感谢大家的答案和建议。我能用下面的代码解决问题。它有点难看，但它确实起到了作用。
调用第二个xtype的解决方案很简单。我说错了。它应该只是fieldConfig：{xtype：＆＃34; widgets.configurableAnswer＆＃34;} 为了填补将来的参考，我又遇到了一个问题 - 从第二个xtype获取数据并将其作为JSON发回。我修改了第二个xtype updateHidden方法，如下所示
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
this.findParentByType('widgets.configurableQandAfield').callUpdate();
}
父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\"}"
]
}
答案 1 :(得分：0)
我同意评论说最好有一个容器组件而不是使对话框复杂化，但是如果你仍在寻找一种在多字段中拉出多字段的方法，那么以下方法应该有帮助
您可以使用三个xtypes创建效果：
1）Multicomposite - xtype，将每个多字段条目存储为子节点，并将字段作为属性。 [由Citytech inc开发]
2）Multifieldpanel - xtype，它将多字段存储为json对象的数组，其中每个字段都是json对象的属性。 [由ACS开发]
3）多字段 - 开箱即用的多字段xtype。
对话框结构（以菜单为例）：
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"
}
}
}
您可以在我的帖子here
中找到有关此方法的详细说明