Блог

Мне нужно сделать заголовок многополя обязательным на основе значения моего поля выбора. Вот как выглядит мое многополе

 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 набора записей с несколькими полями, в первом из которых есть заголовок, а во втором наборе записей нет заголовка, поле заголовка для первого набора помечается как недопустимое.

Как я могу установить правильное текстовое поле (поле заголовка в каждой записи с несколькими полями) как недопустимое.

Это не сработает, потому что вы всегда проверяете значение первого текстового поля и помечаете его недействительным. Вместо этого вам придется перебирать все текстовые поля, проверять те, которые требуются, и соответствующим образом помечать их недействительными. Слушатель должен выглядеть примерно так.

 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 , значение которого определяет статус текстовых полей.