我需要根据我的选择字段的值将多字段的标题设为必填项。这就是我的多场看起来像
var foo = {};
foo.testWidget = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* @private
* @type CQ.Ext.form.Hidden
*/
hiddenField : null,
titleField:null,
subTitleField:null,
description:null,
elementImage:null,
linkText:null,
linkURL:null,
anchorField:null,
emptyField:null,
constructor : function(config) {
config = config || {};
var defaults = {
"border" : true
};
config = CQ.Util.applyDefaults(config, defaults);
foo.testWidget.superclass.constructor.call(this, config);
},
// overriding CQ.Ext.Component#initComponent
initComponent : function() {
foo.testWidget.superclass.initComponent.call(this);
this.hiddenField = new CQ.Ext.form.Hidden({
name : this.name
});
this.add(this.hiddenField);
this.titleField = new CQ.Ext.form.TextField({
fieldLabel : "Title",
labelStyle : 'display:block;width:85px;',
maxLength : "50",
cls : "potato",
width : 400,
allowBlank : true,
listeners : {
change : {
scope : this,
fn : this.updateHidden
}
}
});
this.add(this.titleField);
this.subTitleField = new CQ.Ext.form.TextField({
fieldLabel : "Subtitle",
labelStyle : 'display:block;width:85px;',
maxLength : "150",
width : 400,
allowBlank : true,
listeners : {
change : {
scope : this,
fn : this.updateHidden
}
}
});
this.add(this.subTitleField);
this.description = new CQ.Ext.form.TextArea({
fieldLabel : "Description",
labelStyle : 'display:block;width:85px;',
maxLength : "200",
width : 400,
allowBlank : true,
listeners : {
change : {
scope : this,
fn : this.updateHidden
}
}
});
this.add(this.description);
this.elementImage = new CQ.form.PathField({
fieldLabel : "Banner Image",
fieldDescription : "Specify image path",
labelStyle : 'display:block;width:85px;',
rootPath : "/content/dam/foo",
editable : false,
width : 400,
allowBlank : true,
listeners : {
dialogselect : {
scope : this,
fn : this.updateHidden
},
change : {
scope : this,
fn : this.updateHidden
}
}
});
this.add(this.elementImage);
this.linkText = new CQ.Ext.form.TextField({
fieldLabel : "Enter Link Text",
labelStyle : 'display:block;width:92px;',
maxLength : "40",
width : 400,
allowBlank : false,
listeners : {
change : {
scope : this,
fn : this.updateHidden
}
}
});
this.add(this.linkText);
this.linkURL = new CQ.form.PathField({
fieldLabel : "Complete URL for the element CTA",
labelStyle : 'display:block;width:85px;',
rootPath : "/content/foo",
editable : true,
width : 400,
allowBlank : false,
listeners : {
dialogselect : {
scope : this,
fn : this.updateHidden
},
change : {
scope : this,
fn : this.updateHidden
}
}
});
this.add(this.linkURL);
this.anchorField = new CQ.form.Selection({
type:"checkbox",
fieldLabel:"Link Target",
fieldDescription:"Select the browser tab in which the link should be opened",
options:displayOptionsTarget(),
listeners: {
selectionchanged: {
scope:this,
fn: this.updateHidden
}
},
optionsProvider: this.optionsProvider
});
this.add(this.anchorField);
/**
* Added a dummy Empty field to avoid ArrayIndexOutOfBound Exception in the resultant array
* Without this hidden field, the empty values will be not be added to the multifield list
*/
this.emptyField = new CQ.Ext.form.TextField({
fieldLabel: "Empty Field",
width:200,
maxLength: "30",
defaultValue: "empty",
hidden:true,
value:"empty",
});
this.add(this.emptyField);
},
// overriding CQ.form.CompositeField#setValue
setValue : function(value) {
var parts = value.split(/<#-@>/);
console.log("Related Resources Slider #parts", parts);
this.titleField.setValue(parts[0]);
this.subTitleField.setValue(parts[1]);
this.description.setValue(parts[2]);
this.elementImage.setValue(parts[3]);
this.linkText.setValue(parts[4]);
this.linkURL.setValue(parts[5]);
this.anchorField.setValue(parts[6]);
this.emptyField.setValue(parts[7]);
this.hiddenField.setRawValue(value);
},
// overriding CQ.form.CompositeField#getValue
getValue : function() {
return this.getRawValue();
},
// overriding CQ.form.CompositeField#getRawValue
getRawValue : function() {
return this.titleField.getValue() + "<#-@>"
+ this.subTitleField.getValue() + "<#-@>"
+ this.description.getValue() + "<#-@>"
+ this.elementImage.getValue() + "<#-@>"
+ this.linkText.getValue() + "<#-@>"
+ this.linkURL.getValue() + "<#-@>"
+ this.anchorField.getValue() + "<#-@>"
+ this.emptyField.getValue()
},
// private
updateHidden : function() {
this.hiddenField.setValue(this.getValue());
}
});
function displayOptionsTarget()
{
return [{
"text":"check to open link in new tab",
"value":true
}]
}
// register xtype
foo.testWidget.XTYPE = "testXtype";
CQ.Ext.reg(foo.testWidget.XTYPE, foo.testWidget);
我在对话框中添加了一个监听器，它执行以下JavaScript代码beforesubmit
function(){
var dialog = this.findParentByType('dialog');
var selection = this.findByType('selection');
var choice = selection[0].getValue();
var multi = this.findByType('customMultifield')[0];
var textfield = multi.findByType('textfield')[0];
if(choice=2){
textfield. markInvalid("mandatory for current choice");
return false;
}
}
虽然它有些有效，但是如果我添加2组多字段条目，第一组具有标题而第二组条目没有标题，则会将第一组的titleField标记为无效。
如何将正确的文本字段（每个多字段条目中的titleField）设置为无效。
答案 0 :(得分：2)
这不会起作用，因为您总是检查第一个文本字段的值并将其标记为无效。相反，您必须遍历所有文本字段，检查所需的文本字段并将其标记为无效。听众应该看起来像这样。
function(dlg){
var choice = dlg.getField('./choice').getValue();
var submit = true;
var multi = dlg.findByType('multifield')[0];
if(choice == 2) {
var textfields = multi.findByType('textfield');
for(var i=0; i < textfields.length; i++) {
if(textfields[i].fieldLabel == 'Title') {
if(textfields[i].getValue().trim() == '') {
textfields[i]. markInvalid("mandatory for current choice");
submit = false;
}
}
}
}
return submit;
}
注意：由于您的问题没有对话框的结构，我假设有一个名为./choice的选择，其值决定了文本字段的状态。