Question

编写了一个具有DateField的自定义多字段。问题是，当我选择一个日期并在单击确定后关闭对话框并重新打开对话框时，日期将失去其状态，我必须再次选择它。这是代码：

   var MMCCamCar = {};

MMCCamCar.SubdomainNewslistingWidget = CQ.Ext.extend(CQ.form.CompositeField, {

    /**
     * @private
     * @type CQ.Ext.form.Hidden
     */
    hiddenField : null,

    headline:null,
    date:null,
    description:null,
    url:null,
    checkbox : null,
    emptyField:null,


    constructor : function(config) {
        config = config || {};
        var defaults = {
            "border" : true
        };
        config = CQ.Util.applyDefaults(config, defaults);
        MMCCamCar.SubdomainNewslistingWidget.superclass.constructor.call(this, config);
    },

    // overriding CQ.Ext.Component#initComponent
    initComponent : function() {
        MMCCamCar.SubdomainNewslistingWidget.superclass.initComponent.call(this);

        this.hiddenField = new CQ.Ext.form.Hidden({
            name : this.name
        });
        this.add(this.hiddenField);


        this.headline = new CQ.Ext.form.TextField({
            fieldLabel : "Headline",
            labelStyle : 'display:block;width:85px;',
            width : 600,
            allowBlank : false,
            listeners : {
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.headline);

        this.date = new CQ.Ext.form.DateField({
            fieldLabel : "Date",
            labelStyle : 'display:block;width:85px;',
            width : 600,
            allowBlank : false,
            editable: false,
            format: "d-M-y",
            listeners : {
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.date);

        this.description = new CQ.Ext.form.TextArea({
            fieldLabel : "Description",
            labelStyle : 'display:block;width:85px;',
            width : 600,
            allowBlank : false,
            listeners : {
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.description);


        this.url = new CQ.form.PathField({
            fieldLabel : "URL",
            labelStyle : 'display:block;width:85px;',
            rootPath : "/content/mercer",
            editable : true,
            width : 600,
            allowBlank : false,
            listeners : {
                dialogselect : {
                    scope : this,
                    fn : this.updateHidden
                },
                change : {
                    scope : this,
                    fn : this.updateHidden
                }
            }
        });
        this.add(this.url);

         this.checkbox =  new CQ.form.Selection({
             type:"checkbox",
             fieldLabel:"Link Target",
             options:displayOptionsAnchorTargetSubdomainNewslisting(),
             listeners: {
                 selectionchanged: {
                     scope:this,
                     fn: this.updateHidden
                 }
             },
             optionsProvider: this.optionsProvider
         });

          this.add(this.checkbox);

        /**
         * 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("displayOptionsAnchorTargetSubdomainNewslisting#parts", parts);
        this.headline.setValue(parts[0]);
        this.date.setValue(parts[1]);
        this.description.setValue(parts[2]);
        this.url.setValue(parts[3]);
        this.checkbox.setValue(parts[4]);
        this.emptyField.setValue(parts[5]);


        this.hiddenField.setRawValue(value);

    },

    // overriding CQ.form.CompositeField#getValue
    getValue : function() {
        return this.getRawValue();
    },

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue : function() {
        return this.headline.getValue() + "<#-@>"
                + this.date.getValue() + "<#-@>"
                + this.description.getValue() + "<#-@>"
                + this.url.getValue() + "<#-@>"
                + this.checkbox.getValue() + "<#-@>"
                + this.emptyField.getValue();
    },

    // private
    updateHidden : function() {
        this.hiddenField.setValue(this.getValue());
    }

});

function displayOptionsAnchorTargetSubdomainNewslisting()
{
    return [{
        "text":"check to open link in new tab",
        "value":true

    }]
}

// register xtype
MMCCamCar.SubdomainNewslistingWidget.XTYPE = "subdomainNewslisting";
CQ.Ext.reg(MMCCamCar.SubdomainNewslistingWidget.XTYPE, MMCCamCar.SubdomainNewslistingWidget);

我还想知道打开对话框时调用哪个函数。我们的想法是尝试覆盖任何此类函数并将值设置为日期字段。

Answer 1

原因是，datefield无法解析正在设置的日期。它需要一个可以解析为Date的有效字符串。

尝试使用CQ.form.DateTime而不是CQ.Ext.form.DateField，它会起作用。代码段如下所示。

this.date = new CQ.form.DateTime({
    fieldLabel : "Date",
    labelStyle : 'display:block;width:85px;',
    width : 600,
    allowBlank : false,
    editable: false,
    dateFormat: "d F Y",
    hideTime: true,
    listeners : {
        change : {
            scope : this,
            fn : this.updateHidden
        }
    }
});
this.add(this.date);

您可以根据是否需要分别显示时间字段，将hideTime设置为false / true（如上所示）。您可以查看其他可用配置here

CQ5 ExtJs DateField状态未维护

1 个答案: