CODEWITHSUNDEEP
extjsaem
user972418
user972418

Reputation: 827

CQ5 ExtJs DateField state not maintained

have written a custom multifield which has a DateField. The issue is that when I select a date and close the dialog after clicking on the OK and reopen the dialog the date loses its state and I have to select it again. Here is the code:

   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);

I also want to know what function gets called when the dialog box is opened. The idea is to try and override any such function and set the value into date field.

Upvotes: 0

Views: 811

Answers (1)

rakhi4110
rakhi4110

Reputation: 9281

The reason being, datefield was unable to parse the date that is being set. It needs a valid string that can be parsed as Date.

Try using CQ.form.DateTime instead of CQ.Ext.form.DateField, it would work. The code snippet would be as shown below.

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);

You can set hideTime to false/true(as shown above), based on whether you need to display the timefield or not respectively. You can check the other configurations available here

Upvotes: 1

Related Questions